• Sitefinity Tips

Add an Instagram Feed to Your Site

Mia E Lee
Mia Ellis-Lee
Design & Frontend Development
Write to Mia
Share
Disclaimer: Adding an Instagram Feed requires web development experience and a working knowledge of HTML, CSS, and Javascript.

While Sitefinity comes with an out-of-the-box widget for adding a Twitter feed, there is no similar widget for Instagram. Fortunately, with a little bit of help from Instafeed.JS and a little bit of setup, it’s simple to add an Instagram feed to your Sitefinity Site.

  1. Download Instafeed.JS and add it to the appropriate directory in your website’s file system.

  2. You’ll need a valid client ID from the Instagram API (this is basically an API key). You can register for one here

  3. Access the back-end editor of the page or template where you’d like your Instagram feed to appear.

  4. Add a Javascript widget from the widget toolbar to the right. Select the “Link to a JavaScript file (.js)” option and select your copy of Instafeed.js. Under the “Where to include in HTML?” field, select “Where the widget is dropped”. Click the Save button.Image of the Javascript Sitefinity Widget in

  5. Next, wherever you’d like your Instagram feed to appear, paste “<div id="instafeed"> </div>” in a Content block. The Instagram feed will be injected into this markup.

  6. Add another Javascript widget underneath your previous Javascript widget. Instead of linking to a JavaScript file, we’re going to select “Write JavaScript”. Also make sure “Where the widget is dropped” is selected under “Where to include in HTML?”Image of the Sitefinity Javascript widget in

  7. Now we’re going to paste our code that will configure our Instagram feed and run our Instafeed.JS function. Paste the code below into your currently empty JavaScript widget and hit Save.

    var feed = new Instafeed({
    clientId: YOUR CLIENT ID,
    });
    feed.run();


  8. You can add more configuration options to your Instafeed. For instance, by default the Instafeed will show popular images from across Instagram. If you wanted to only show images from a single user, your Javascript would look similar to the code below:

    var feed = new Instafeed({
    get: 'user',
    clientId: YOUR CLIENT ID,
    userID: DESIRED USER ID
    });
    feed.run();


  9. Many other configuration options exist, like being able to change the surrounding markup for the images that the feed fetches or being able to change the resolution of the images. You can see the configuration options under “Standard Options” at the Instafeed.JS page.

  10. You should now see your Instagram feed in action!Flywheel's Instagram feed
Back to Top Arrow Up