Venus Trapped in Mars

15 April 2015

How To Add An Instagram Feed Widget To Blog That Takes You Straight to Instagram

How to add an instagram feed widget to your blog's sidebar or footer that takes you directly to Instagram. 



I've had an Instagram widget on my sidebar for as long as I've been blogging. I used Snapwdiget to generate the code for the feed, which was very easy, but it drove me bonkers. Why? Because it took you to snapwidget's website rather than Instagram. Here is what I mean.... 





 
When you click on the picture, it doesn't take you to my instagram.com/iamsarahwebb profile. Instead, it takes you to some random snapwidget profile. 




Having a reader say, "Ohhh what a lovely picture" to themselves, at their computer screen is all well and good, but you want them to follow you. You want them to like the photo. Well, I assume you do. Bloggers tend to like numbers, particularly on Instagram! Myself included! If you are sending your reader to snapwidget, it is very unlikely you are going to get them to go click crazy in order to find your Instagram. 

Instead, I want to be sure to send them right to that image they clicked, on Instagram. Like this...




You also might want to put your instagram feed in grid form, on your blog's footer, like shown below from my design site or you can scroll down and see it on this blog.  I'll show you how to do that too!  







 
Let's get started! 



Whether you want to add your feed to your blog's footer, or your blog's sidebar head over to the website Instansive.







 Enter your details: Instagram username or hashtag. If not using a hashtag, which I doubt you are, just leave that blank. Times you might want to use a hashtag? If you have an Etsy site or are participating in a linkup. 

Select "Slideshow"
Number of photos - 60
Select your image hover effect




Hit preview, then click get code


 After you copy that code, proceed to step 3. 



 To post a grid of your instagram photos at the bottom of your blog...
 
Type of widget - choose grid
Number of columns - up to you, I picked 10
Number of rows - up to you, I picked 3
Select your image hover effects


Hit preview, then click get code







Go to LAYOUT in your blogger dashboard.




...For a slideshow on your sidebar... 

// Select Add a Gadget on the sidebar // 

// Add HTML/Javascript // 

//Paste your code, click save // 

// Your new instagram slideshow will appear at the top of your sidebar, move it down by dragging and dropping to exactly where you'd like it to appear // 

// Click Save Arrangement // 
...For a grid on your blog's footer... 

// Select Add a Gadget on your blog's footer // 

// Add HTML/Javascript // 

//Paste your code, click save // 

// Your new instagram grid will appear at the top of your footer, move it down by dragging and dropping to exactly where you'd like it to appear // 

// Click Save Arrangement // 
 



 
 
 
 
And that's how it's done! Any questions, leave a comment for me! 
Want more blog tutorials? 
Check out my Saturday Sessions page

You can also follow me on instagram, as a great big thank you, only if you wanna! 




description

39 comments :

  1. You are such an asset to new bloggers! AMAZING LADY!

    ReplyDelete
  2. You the real MVP, Sarah. Always coming in and writing a post exactly when I need something. Heart you so big.

    ReplyDelete
  3. THANK YOU!!! Keep 'em comin'! I don't have any suggestions, because I don't know what I need to know.

    ReplyDelete
  4. THANK YOU!!!! I really wasn't sure how to do this, and I really needed it! I will say, though, that I made adjustments for Wordpress. I followed your steps EXACTLY on Instansive, but then in Wordpress, the steps are as follows:

    1) Within Dashboard, Click on Appearance
    2) Click on Widgets
    3) Grab and Drag 'text' box to the sidebar or footer sections
    4) Title it 'Follow Me On Instagram'
    5) past HTML into body of box
    6) Click to Save
    Voila!

    SO EXCITED about this!!

    P.S. Totally working on revamping my NEW site, and I am hoping to launch it very soon! YAY!

    ReplyDelete
  5. yassssssssss this is the most handy, thank ya thank ya

    ReplyDelete
  6. Thank you so much for this!! At one point I completely got rid of my instagram widget because it seemed useless if people couldn't actually follow me from there. Thanks again!

    ReplyDelete
  7. Thank you!! I was not happy with the snap widget! This is so much better!

    ReplyDelete
  8. this is the coolest. love it. you're a genius! sharing!

    ReplyDelete
  9. This was great. I had no idea SnapWidget wasn't taking people to my Instagram. This works for Wordpress too, which I love! I already changed mine. You are a genius!

    ReplyDelete
  10. worked perfectly Thank you for an easy fix

    ReplyDelete
  11. Again, your tutorial has saved my life (that may be dramatic, but still...).
    Thank you! I swear if everyone could explain things as well as you can life would be much simpler. You are my blogging hero! :)

    ReplyDelete
  12. I definitely just did this. I've always used Instagme and it's always bothered me that it doesn't go directly to Instagram. Thanks for sharing!

    ReplyDelete
  13. Thank you! I wasn't thrilled with Snapwidget. This is much better!

    ReplyDelete
  14. Andddd now I have an Instagram grid on my blog. Brilliant! Thanks for everything Sarah :)

    ReplyDelete
  15. Yet again, you swoop in with all the answers. Snapwidget makes me twitchy. But I already instafollow you so you'll just have to settle for a big fat T H A N K Y O U !

    ReplyDelete
  16. This is super helpful, thank you so much for posting!

    ReplyDelete
  17. Oh my gosh, YOU ARE THE BEST. Thank you so much for this!

    ReplyDelete
  18. Fabulous post! I gave up on clicking on people's insta pics from their blog and hope people take advantage of your advice and how to. Myself included!

    ReplyDelete
  19. You are the best!!! Keep them coming :D

    ReplyDelete
  20. Oh my, this is great! Updating my widget right now! Thank you! Xo, Stephanie

    ReplyDelete
  21. This is fantastic, thanks for sharing!

    ReplyDelete
  22. Thank you so much!! This is so much better than snapwidget!

    ReplyDelete
  23. done! thank you for this :)

    is it bad to have two? the sidebar and the one on the footer?

    ReplyDelete
  24. You're awesome, thank you for this... I had totally forgotten that I still had that snapwidget on there... oops!

    ReplyDelete
  25. Fab thanks for posting! it works perfectly! :-)

    ReplyDelete
  26. So... For me it says "This is free version of our widget. HTTPS is disabled for free widgets. Please upgrade this widget to enable HTTPS." Any idea how to fix that?

    ReplyDelete
  27. This literally made my day. I have been trying to do this forever and hated both Snap and every plugin I tried for months. THANK YOU!!!!!

    ReplyDelete
  28. Hey Sarah, do you know how i can make the widget full width/screen like yours?? Thank you :)

    ReplyDelete
  29. hi Sarah. thank you so much for sharing this. i recently did it with snapwidg*t and i think your suggestion much much better. thanks

    ReplyDelete
  30. Hi Sarah,

    Thanks so much for this tutorial! It was so helpful. I did not like snapwidget at all but I had no idea what else to use. I just decided to start a blog and I'm loving all of your tutorials!

    ReplyDelete
  31. This was exactly what I was searching for since I hated that snapwidget took you to their page. THANK YOU

    ReplyDelete
  32. Hi, for some reason my pics do not appear square to fill the space, and there is a huge gap even thoguh I chose o pixels between photos... how do I correct that? Thank you!

    ReplyDelete
    Replies
    1. You might need to select "square crop" and you might need to set the padding to 1 or even 0

      Delete
  33. This doesn't show anything on my blog at all! :O
    Instead, it shows texts that says I'm using a free version, etc.

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!