Saturday, 10 October 2015

How To: Add A Scrolling Instagram Widget To Your Blog

Instagram is an app that I can scroll through for hours, so I thought why not add this scrolling prettiness to my blog. A few weeks ago I made a few tweaks to my blog, which included adding a scrolling banner Instagram widget to the top of my blog, under my header. I personally prefer this to one that I used to have in my sidebar as it adds more colour to my blog and is instantly seen by the reader without them having to scroll down my blog or look in my sidebar. A few people tweeted me asking how I added it, so I thought I would write a post as it might be helpful to a few people.

How To: Add A Scrolling Instagram Widget To Your Blog

I used Snapwidget to create my Instagram widget, and it is so incredibly easy to use. I was so shocked at how simple it was to make and import onto my blog. It took a few tries to get all the sizes correct and get it exactly how I want it, but now I am so happy with it. I feel like it makes my blog look more professional when in reality I am so clueless about HTML and blog design.

To get the scrolling banner Instagram widget, log onto Snapwidget. You'll be asked to log into your Instagram, and then you'll have to fill out a form. The first option is the Widget Type, you can play around with all the options to see which fits your blog, but if you want a scrolling banner then click the 'Scrolling' widget. I found that 150px was the perfect size for each image, and then just type in a figure for how wide you'd like your widget to be. I chose mine to be 1000px wide, as my blog is about 1050px wide, so this fits perfectly for me. It did take some time experimenting to find the perfect size, so again put in a few values and see what looks best to you. I set my banner to Auto Scroll as I just love how simple and effortless it looks, and I chose the photos to Fade Out when you hover on them. I just really like the effect it gives, again this option is up to you.

If you sign up to Snapwidget Pro you can link your widget to your Instagram; or any other page of your choice, to give your viewers an easy click through link. For $7 a month I found this pretty pointless to me as I already have an Instagram button on my blog, but I will be finding a free way to add some HTML which will link it to my Instagram. I will keep you updated on that when I find something that works.

After you're completely happy with your widget you can preview it, and then add it to your blog by clicking 'Get Widget' and then pasting the HTML code into your blog layout in your desired spot.

I am so happy with my Instagram widget, it's such a simple addition that just adds so much to the design. I hope this helps answer all the questions I've been asked about my banner! If you use this tutorial to add an Instagram widget to your blog, please let me know I'd love to see them.

Check out: Lisa's Beauty

No comments

Post a Comment