November 5, 2014

How To Install An Instagram Slide Show On Blogger



It may be hard to believe that I am one of those fossils without an Instagram account. As a digital designer and blogger I should know better, right? But right now my life is a bit too busy to use every social media platform out there, so I stick to Pinterest for now ;-)

Of course that doesn't mean that you have to. And if you have an Instagram account there is way to display your Instagram feed in a beautiful little slide show on your Blogger sidebar. I will share how to do this with you today and don't worry, this one is pretty easy! Oh, and before you start to wonder: I used my sweet daughter's account for this tutorial ;-)

Important things to know first
There are two things you need to know and make sure first before we start off with the tutorial:
1. you need to know how wide your sidebar is in pixels (most sidebars are between 200 and 320 pixels in size).
2. you need to have your Instagram account set to Public, otherwise it won't work

Okay, let's start with the tutorial!

Installing an Instagram slide show in the sidebar
Start by going to this site: http://snapwidget.com/

You will see the screen below, now press the 'Get Your Free Widget' button.





In the next screen that opens you will have to add some data. To get the coding for the slide show first fill in your user name and select the slide show option:





Once you've selected the slide show option, the options on your screen will alter a bit, and it will look like this:





Most important is that you fill in how wide your slide show has to be, here you have to fill in the width of your sidebar. Mine is 260 pixels. You can then choose if you want a border around it or not, a background color and if you want a hover effect when someone moves over the slide show with their mouse. I chose the option of no border, no background color and a fade out hover effect.

You can preview your slide show by pressing the 'Preview' button and when you're satisfied with how it looks, press the green 'Get Widget' button. With this action the site creates your code:





Copy this code, open you Blogger Dashboard, select the Layout option in the left sidebar and click the option to add a new gadget to the sidebar:





Add an HTML/JavaScript gadget and paste your widget code in the box:




Save the widget and drag it to the position in your sidebar where you like it to be. Now click the 'view blog' button on top of the screen to see what your slide show looks like:





Notice that my slide show exactly fits the sidebar width. It will now show your Instagram feed in a slow paced slide show mode.

What if your slide show is not centered?
If for some reason your slide show is not centered it is either wider than your sidebar (in that case, try another width), or smaller than your sidebar. In case the slide show is smaller and is displaying on the left side of the sidebar, you can easily center it yourself by adding a little piece of coding.

To do so, go to Blogger Dashboard, choose Layout and click on the HTML gadget that contains your slide show coding. Above the coding you type: <center> and right below the coding you type: </center>. The whole coding should look like this:

<center>
<!-- SnapWidget -->
<iframe src="http://snapwidget.com/sl/?u=ZGFuYWUyNGFtYmVyfGlufDI2MHwzfDN8fG5vfDV8ZmFkZU91dHxvblN0YXJ0fHllc3xubw==&ve=051114" title="Instagram Widget" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:265px; height:265px"></iframe>
</center>


Save this coding and when you view your blog the slide show should be centered in the sidebar now.

I hope this tutorial was helpful and that you are now able to add a gorgeous slide show of all your Instagram images on your blog!

Share if you like:

5 comments

  1. Thank you. I'll see how it goes with my page :)

    ReplyDelete
    Replies
    1. You're welcome Alinta! I hope it will look great.

      Delete
  2. Oh, I need this for my blog but wasn't sure about my sidebar size.. Btw, what is the hashtag mean? Can I just leave it blank?

    ReplyDelete
    Replies
    1. Hi Kawaii, yes you can leave the hashtag box empty. Your sidebar size can be found in the coding of your blog, but of course you would have to know where to look or scroll down all the coding. If you can't find it you can send me the link to your blog and I can see what I can do. Sometimes it's possible to view big parts of the coding by clicking the right mouse button on a page and viewing the source, so that would be the way I could check if the sidebar size is visible for me that way.

      Delete
    2. Oh wait, I found your blog through your name (duhh ;-). You have a blog that won't show the source (clever thing from the designer). But I estimate that your sidebar is 240 or 230 pixels. So try these sizes for the widget and see how it looks.

      Delete

© The Dutch Lady Designs | All rights reserved.
Blogger Theme Created by pipdig