Friday, September 19, 2014

How to add Instagram feed to your blog or website

Short tutorial on how to add Instagram widget or gallery to your website or blog.

First, you need an Instagram account :) make sure it's public.
Before you start you can preview different kind of galleries here:
If you want to add your feed as Blogger Gadget, continue reading this tutorial then read
How to add Instagram Blogger gadget to your blog

Connecting your Instagram account:
  • Go to
  • Click the "Connect to your Instagram account and create your Instagram Gallery" button
  • You will be directed to Instagram website to approve Instush app, once approved by you, you will be redirected back to Instush editor.
Selecting Instagram feed:

Before you decide which gallery fits your need, choose the type of feed to display, there are 4 options shown at the top:

  • Your Photos, shows your Instagram posts from the account you are connected before, starting from your latest posts.
  • Your Likes, shows the Instagram posts you liked, starting from your latest likes. If you want to advance a post you liked then, unlike it and like it once again.
  • Instagram public user, Type the username you are looking for inside the text box and click the "search" button next to it. Wait for the results to show beneath and click on the user thumbnail. The gallery will update if the user is public.
  • Instagram Hashtag, same as the above, just enter your Hashtag (without #).

Selecting gallery:

Next, select the type of gallery on the top.
Different galleries have different kind of features and settings, it's up to you. You need to play with the gallery settings to customize your gallery.

Getting the code:

Once your'e ready, copy the code from the text box.

Placing the gallery on your page:

The code is just a HTML iframe you place inside your page. it includes the correct size of the gallery. Changing the size on the embed code is not recommended since it's calculated exactly by the type of gallery and your settings. To center the gallery inside your page, add a style attribute "margin:auto;" on the embed code style attribute or just place it inside your own centered container. there are many ways to do it. style="display:block;width:733px;height:733px;border:none;overflow:visible;margin:auto;"
If you're using a website editor to create your website and you can't add HTML code directly, try to use an HTML component that most website creator have and set the Url to the Url of the embed code. The Url of the embed code is inside the src attribute. src="" If you don't like the way the gallery looks on your website, just go back to the editor and create a new gallery.

Secured pages:

If your page is secured (unlikely) then you can check the "I need SSL (https) support" check box and an additional embed code will show up beneath the check box. This code is secured to support secured pages. It is recommended to be used only on secured pages (https://) since the gallery and the images inside will take more time to load.

Mobile view:

Create a smaller gallery to fit your page on mobile view or use the responsive Instagram gallery , optimized for mobile device and desktop (see the #SWEETDOGS gallery below)

That's it :)
Have fun

Click to resize the gallery and watch the responsive behavior