Instagram Feed Onto Your Website – Dreamweaver

instagram-feed-header-image

This tutorial is proudly sponsored by our generous sponsor, Squarespace, the fast and easy way to create a professional website.

Instagram Feed Into Your Website Dreamweaver Tutorial

Video

1. Get The Plugin (Instafeed.js)

Instafeed.js is a crazy simple way to grab an Instagram feed and pop it into your website. You can download the Instafeed.js file for free here at this link and save the .js file where you can find it later.

Instagram Feed Into Your Website Dreamweaver Tutorial

 

2. Create Client ID via Instagram

You’ll want to log into your Instagram account and go to this link  http://instagram.com/developer/clients/manage/ to find the page where you will be able to register a new client. We will want to create a new “client” for this feed project. NOTE: Before being able to create a new client, you may need to confirm your phone number on Instagram.

Instagram Feed Into Your Website Dreamweaver Tutorial

Instagram Feed Into Your Website Dreamweaver Tutorial

Instagram Feed Into Your Website Dreamweaver Tutorial

3. Name Client ID via Instagram

Give your Client ID an Application Name, a Description, as well as Website and Redirect URI, fill out the CAPTCHA and hit the “Register” button to create that new Client ID. We’re not going to go over exactly what the authentication process via oAuth and the rediect_uri is here in this tutorial, but if you have questions Instagram has some information you can check out as well as running a couple Google searches.

Instagram Feed Into Your Website Dreamweaver Tutorial

Instagram Feed Into Your Website Dreamweaver Tutorial

4. Writing some HTML

The Instafeed.js script looks for a div with the id “instafeed”. We’re going to add that a div to our code and give it that id. See my screenshot to see the code I placed and to see where I placed it.
[code type=”markup” title=”Add div”]

[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

5. Link to the JavaScript File

Jump up to the header portion of your HTML document and add this one line of code to link to wherever you have saved your Instafeed.js file.
[code type=”markup” title=”Link to JavaScript”][/code] Instagram Feed Into Your Website Dreamweaver Tutorial

6. Start Adding JavaScript

I’m going to start by creating another open and closing script tag here below my call to grab the JavaScript file. [code type=”markup” title=”Adding JavaScript”][/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

7. Create a New Variable

We’re going place this code within our script tag that we just created. We want to create a new variable which will contain the parameters of our Instagram feed which is displayed on our website (The tag which we’re targeting, the size or resolution of the images, ordering, number of images, and a bunch more. We have options here.) You can check out the code below.
[code type=”javascript” title=”Add the variable”]var feed = new Instafeed ({

});[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

8. Choose Our Tag

Now we’ll specify that we want to grab images that are tagged with a specific tag and then choose which tag we want to target. Here I am targeting a tag I created in Summer of 2013 for a film project entitled “Philly Is Ugly” that I was working on at the time. We’ll be targeting ‘phillyisugly’ (#phillyisugly).
[code type=”javascript” title=”Get tagged images”]var feed = new Instafeed ({
get: ‘tagged’,
tagName: ‘phillyisugly’,
});[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

9. Add the Client ID to Make It Work

To make this feed work, simply paste in your Client ID to ensure proper authentication and we have to add a little line of code outside of our variable to tell this function to RUN! Check out the code below to see exactly what I wrote. Test your file in your browser and you will see a populated bunch of images from Instagram.
[code type=”javascript” title=”Add Client ID & Run!”]var feed = new Instafeed ({
get: ‘tagged’,
tagName: ‘phillyisugly’,
clientId: ’78a4558a72544a10a4c625e21fe755bb’
});
feed.run();
[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

Instagram Feed Into Your Website Dreamweaver Tutorial

10. Making Changes to Feed

With a few simple adjustments you can quickly change the images that are fed into your site. Obviously you can simply change the tag that is loaded, but you also can grab the latest popular images on Instagram at that moment by adjusting the code as I have.
[code type=”javascript” title=”Get popular images”]var feed = new Instafeed ({
get: ‘popular’,
clientId: ’78a4558a72544a10a4c625e21fe755bb’
});
feed.run();
[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

11. Limit Images and Linking

I’m going to go back to loading my “phillyIsUgly” tag and we’re going to take a look at loading more than just our initial 16 images. We want to load 32 images and also let’s look at removing the link to the Instagram image. NOTE: You can load up to 60 images at one time via Instagram.
[code type=”javascript” title=”Links & Limits”]var feed = new Instafeed ({
get: ‘tagged’,
tagName: ‘phillyisugly’,
limit: ’32’,
links: ‘false’,
clientId: ’78a4558a72544a10a4c625e21fe755bb’
});
feed.run();
[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

Instagram Feed Into Your Website Dreamweaver Tutorial

Instagram Feed Into Your Website Dreamweaver Tutorial

12. CSS Finishing Touches

Using a little CSS, I am able to add some spacing between my images here as well as a simple opacity shift when the user hovers over any image. NOTE: You may want to have the link to the Instagram image if you’re creating some kind of interaction when the user rolls over one of the images.
[code type=”css” title=”CSS code & styling”]
#instafeed img {
padding:5px;
opacity:0.8;
filter:alpha(opacity=80);
}

#instafeed img:hover {
opacity:1;
filter:alpha(opacity=100);
}
[/code]

Instagram Feed Into Your Website Dreamweaver Tutorial

 

13. That’s It!

There you have it, a simple way to pipe an Instagram feed into your website. Be sure to explore all the features on the Instafeed.js page and really check out the power they’ve packed into this quick and easy script. Thanks, Instafeed team!

Instagram Feed Into Your Website Dreamweaver Tutorial

More from Nathaniel Dodson
The Extract Filter – Photoshop CS2
The Extract Filter In Photoshop CS2 Learn how to make and use...
Read More
Join the Conversation

132 Comments

  1. says: Angel

    Does this require the web page viewer to grant authorization to your app to get access token for the content to be fetched?

    Meaning no authorization = no content?

    If yes, are there any other way to fetch information that are set to be public without access tokens like in facebook where some API’s doesn’t need access token?

  2. says: Hurst Vanrooj

    I want to get my feed only. I can hashtag my feed, but if others use the same hashtag I get their pictures too. I want my photos only and then only my photos with a specific tag?

  3. says: ibloo

    Instagram has changed its API from this tutorial?
    When you register a new user form now on (manage users), it has to go in for a review? I tried this but it then asks for a Screencast login video used for the app?
    Hope you can help, there is absolutely no info on the internet about this as yet.
    Regards,

  4. Pingback: zootopia 2016
  5. Pingback: more
  6. Pingback: film
  7. Pingback: helou zis me
  8. Pingback: helou zis me
  9. Pingback: clic here
  10. Pingback: clic
  11. Pingback: illuziaobmana
  12. Pingback: HDKINOONLINE
  13. Pingback: 2016
  14. Pingback: manastirski_chay
  15. Pingback: Divx indir
  16. Pingback: online
  17. Pingback: online
  18. Pingback: sitemaplist
  19. Pingback: hqpornforiphon
  20. Pingback: pornozavrnet
  21. Pingback: hqporn2016
  22. Pingback: Live draw hongkong
  23. Pingback: sunnyleone
  24. Pingback: sunnyleonelatest
  25. Pingback: toilehtml
  26. Pingback: tubepatrolporn
  27. Pingback: kinoklub
  28. Pingback: drama2016
  29. Pingback: jpmsru
  30. Pingback: top2017bloomingme
  31. Pingback: lopoda
  32. Pingback: novinki kino 2016
  33. Pingback: gidrofob
  34. Pingback: mirdikogozapada
  35. Pingback: trumpnews
  36. Pingback: molodezhka4seria
  37. Pingback: molodejka
  38. Pingback: molodezhka4sezon
  39. Pingback: molodezjka
  40. Pingback: milidejka4-19-20
  41. Pingback: molodejka4sezon19
  42. Pingback: molodejka4s21
  43. Pingback: molodejka4sezon21s
  44. Pingback: link2016
  45. Pingback: xml18112016
  46. Pingback: xml181120167
  47. Pingback: molodejka4seria25
  48. Pingback: lastssadsafdsa
  49. Pingback: me rt last
  50. Pingback: dadafdf3ddafdsa
  51. Pingback: dadafdf3ddafdsa
  52. Pingback: topsitesss
  53. Pingback: cxzvcxzvcxzvds
  54. Pingback: cxzvcxzvcxzvds
  55. Pingback: dsafdsafd sitein
  56. Pingback: meliostadaf
  57. Pingback: moana watch online
  58. Pingback: 201702201702
  59. Pingback: porno geschichten
  60. Pingback: porno geschichten
  61. Pingback: top liwe
  62. Pingback: News 26 04 2018
Leave a comment
Leave a Reply to ekorCancel comment

Your email address will not be published. Required fields are marked *