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
- Go to http://www.instush.com/embed
- 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.
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: Getting the code: 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.
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="http://users.instush.com/collage/?cols=7&rows=7&sl=true&user_id=33045174&username=instush&sid=-1&susername=-1&tag=-1&stype=likes&bg=transparent&space=true&rd=false&grd=false&gpd=6&drp=false&pin=true&t=999999get2b8yxsJwCQ4jENst4kvT-7KN0TbMRr-o5d3CRNUhDSk0oIx0RL_zkWf3Zp4W-yIJh3FeaQCc" If you don't like the way the gallery looks on your website, just go back to the editor and create a new gallery.
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 http://www.instush.com/responsive-instagram-gallery , optimized for mobile device and desktop (see the #SWEETDOGS gallery below)
That's it :)
Click to resize the gallery and watch the responsive behavior