Add a Styled Instagram Widget to Your Blog


My personal blog, MomAndWife.com, is using the Adorable theme. With the increase in popularity of Instagram usage I thought it would be fun to really showcase my photos. I installed the InstaPress plugin, added a little style to it through the Adorable theme’s CSS and voila :)

Add this to your style.css file

.instagram-image {
	background-color: #fff;
	margin: 0 10px 10px 0px !important;;
	padding: 10px !important;
	-moz-box-shadow: 0 0 5px #999;
	-webkit-box-shadow: 0 0 5px #999;
	box-shadow: 0 0 5px #999;
	text-align: center !important;
}

If you’re using the Adorable theme, you’ll then drag the InstaPress widget into your “Featured Top Full Width” widget area. I’m using the Alternate Home Page from the Adorable theme and this is what my widget area looks like..

These settings give you this

more instagram fun

If you would like to add a little style or text to your instagrams check out my post at momandwife.com: The Best Photo Apps For Framing Your Instagram

*NOTE: You can also use this code with Modern Blogger, it is not specific to any theme. You will just want to adjust the size of your Instagrams in the widget settings until they fit within the parameters of your widget area.

Comments

  1. 1

    Hey Lindsey, thank you for the tutorial!

    I’ve been thinking about switching over to Adorable so this came at a great time!

    Question – does it matter where in the CSS file I add this code? Do it just add it to the end or is there a specific place it should sit?

    Thank you!

    • 2
      Lindsey says:

      It does not matter, however, I recommend adding it at the end so you can easily find it :)

  2. 3

    Awesome! I wonder if there’s something similar for Pinterest–that would be awesome!

  3. 5

    Hey Lindsey!

    I love this, and have been hoping that you would come out with an instagram widget!

    Will you be creating one for the Modern Blogger theme?

  4. 8

    Another masterpiece!! Definitely thinking about adding it for my portfolio :)

  5. 10

    I am going to do this for sure. Thank you for sharing with us!

  6. 12

    Can this be put into the sidebar as well? My weekend project is to get this widget and the pinterest widget WORKING on my blog. 😉 thanks for all your great tutorials!

    • 13
      Lindsey says:

      You sure can, you will just want to adjust the amount of thumbnails and their size accordingly. With the adorable theme the max width for the sidebar is 300px :)

      • 14

        Is there an extra bit of code I need to center the images in my sidebar? It’s hugging the left site of the side bar… (but HEY! I installed both the plugins AND edited the CSS and didn’t break my blog. #Success)

  7. 18

    This is awesome! Thank you for sharing this Lindsey! Hugs! :)

  8. 20

    Thanks Lindsey! Did this for my new blog!

  9. 21

    Great instructions you’ve provided Lindsey! Thanks!

    I also wanted to share with you and your readers 1 other tool you may find useful. It’s called Tint, and we let you display any instagram feed into your website, WordPress, Facebook Page, etc.

    You can display your own Instagram feed, other brand’s instagram feed, and even instagram hashtags in a matter of minutes. Visitors can share your photos to their social networks and you can even show different themes with flexible columns.

    Feel free to check it out for more information: http://www.tintup.com/blog/the-best-instagram-widget/

    Thanks,
    Tim

  10. 22

    Hi there!
    I have the modern blogger theme – I followed all the directions and right now all that is showing is “instagram photos” with no photos! Not sure what to do.

    Thanks!

  11. 23

    Wonderful job dude…
    Looks great
    Get more instagram followers

  12. 24

    Hello,

    I installed Instapress on Modern Blogger but I got some error. Do you recommend any other? Right now I am using Tint, as mentioned on the comment above.

  13. 26
    heather says:

    Since instapress is down, is there another instagram plugin that you recommend?

    • 27
      Lindsey says:

      I have not used any specifically, as InstaPress is still working on blogs it was installed on previously for some reason… But if you check the plugin directory for instagram you will find several great options that show you previews prior to installing.

  14. 28

    Thank you, I was looking for this post:)

  15. 29

    :( for some ready the plug in didn’t activate …some fatal error in some line. thank you for this great tut:)

    • 30
      Lindsey says:

      Hi Lisa! This particular plugin has stopped working for some reason, but there are several available if you do a search under your plugins menu for “instagram widget” you can choose which you like best :)

  16. 31

    Hello,

    I have to agree with you guys, this widget looks nice. I just wanted to show the brand new Instagram widget, which becomes very famous;) feel free to check http://www.instget.com/ and write me your opinion:)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>