How I added a working Instagram display to my Blogger website

by - Thursday, October 01, 2020

Boy Photographer

Since Glamumous' conception in 2007, this site has undergone many changes. The landscape of blogging has changed considerably over the years, and so has our ability to design and present content from additional sources. 

I have no doubt that many Glamumous readers use Instagram (among other forms of social media). I'm not quite yet devoted to social media as an alternative to my own site, though I do appreciate being able to draw visual content from other sources to enhance your experience. 

Including an Instagram feed in your main website provides additional content and value to your readers and helps enhance your site "brand". Various methods for including an Instagram feed widget in a Blogger-powered blog have come and gone, though I hope I've finally discovered one which works. Take a look at the bottom of the page to see my most recent Instagram photographs.

For those of you who still use Blogger to publish your website, here is a short tutorial, using a free account with SnapWidget:

1. Sign up to SnapWidget.com (or log in if you already have an account).

2. In your dashboard, choose to create a new widget, and click the "Create a new widget" button. For this example, we'll select the Free Instagram Grid widget.

3. Click the "Username" field, and you'll find a pop-up screen from which you can log into Instagram to retrieve your photo feed. 

4. (Optional) Write a brief description for your feed.

5. Set the thumbnail size you would like to display. Note: if you choose to make your widget responsive (see step 7), this option will be the maximum display size, and will adapt to smaller thumbnails for different screen sizes. 

6. Select your preferred layout, columns and rows. For example, I've chosen to display a 5x1 grid in my blog's wide footer section. If you want to display the widget in your sidebar, you might opt for a different configuration. 

7. Select other options as appropriate to your needs. I would advise for most modern Blogger templates that you set the "Responsive" option to "Yes". This will automatically resize your widget for the screen size on which your blog is displayed. 

8. Update the preview as required, and when finished, click "get widget". This will present a code snippet which you will need to copy to your clipboard.

9. Log in to your Blogger dashboard and select "Layout" from the menu. 

10. Choose to create a new "HTML/Javascript" widget in the area of your blog layout where you would like to display your Instagram feed. 

11. Paste the code snippet into the text box and click "save".

12. Refresh your blog to see your new widget in action!


I hope this simple tutorial will prove useful for those of you using Blogger to publish your site! I'm aware that other platforms (such as Wordpress) offer much simpler solutions or plugins, but have personally found support for Blogger users to be a little more tricky! Please feel free to share your thoughts and suggestions in the comments section below.

Image credit: Scarlizz, via Flickr

You May Also Like

0 comments