How to add an Instagram feed to your blog

on 9.22.2014

How to add Instagram to your blog

What do the above photos tell you? I like stripes, I like flowers, and I like food. Oh, and I like taking pictures of those things and sharing them with others. I can’t be the only one, right? Instagram has more than 200 million users and seems to be pretty darn popular in the blogosphere, so today I’d like to share a quick and easy way to add an Instagram feed to your blog.

Let’s get started!

Go to SnapWidget.com, click on the “Get Your Free Widget” button and fill out the fields.

snapwidget

Username/Hashtag: You can display photos from your Instagram username or a hashtag.

Widget Type: Choose between Grid, Board, Scrolling, Slideshow and Map. You can preview the different styles by clicking “Preview” at the bottom.

Thumbnail Size: The size of each of your photos in the widget. This all depends on the size of your sidebar (or wherever you’re adding the widget). My sidebar is 200 pixels wide (like in most of my blog templates), so I’ve entered a width of 95 pixels per photo.

Layout: How many photos you’d like to display + their layout. If you only want to display one photo, just enter 1×1.

Photo Border: Pretty self-explanatory. Border or no border.

Background Color: The background of the widget. You can leave it blank to get a transparent background.

Photo Padding: The amount of space between each photo. This is why I entered 95 pixels instead of 100 in “Thumbnail Size” — to make room for those 5 extra pixels of space.

Hover Effect: You can choose to apply a Fade In or a Fade Out effect when visitors hover their mouse over a photo. Use the “Preview” button to see this in action.

Sharing Buttons: Add Facebook and Twitter sharing buttons to each photo.

Responsive: This is a new feature, and it’s awesome. If you choose Yes, the size of the photos will automatically adjust to any screen size (if your blog design is responsive), so they won’t exceed the sidebar width, overlap the other content or be cut off by the browser window.

→ All good? Time to insert your widget!

If you’ve previewed your widget and you’re happy with the way it looks, click “Get Widget” and copy & paste the code that pops up.

In Blogger, go to Layout > Add a Gadget > HTML/JavaScript. In WordPress, go to Appearance > Widgets and add a Text widget.

Paste in the code from SnapWidget, and you’re done!

Pin on PinterestTweet about this on TwitterShare on Facebook
by CRISTINA
Web and blog designer who's been designing and developing sites for over 10 years. Lives in Copenhagen, Denmark, but works with clients from all over the world. Get in touch

2 comments:

Leave a Reply

Your email address will not be published. Required fields are marked *