MENU

Add your Instagram Feed to WordPress

My Instagram feed sends a lot of traffic over to my blog + in return my Instagram feed on my blog sends traffic back to my Instagram feed. It’s a perfect match + as well as being a good source of visitors to your blog, it also looks pretty – right?

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

So let’s crack on + walk you through the few simple steps that it takes to add your feed to your Sidebar widgets. I’ll go through the following with you to ensure you are up + running in a matter of minutes:

  • Finding, installing + activating the plugin
  • Configuring your account
  • Customising your feed
  • Displaying your feed

Installing an Instagram Feed Plugin

You need to be logged in to your WordPress dashboard to start with + from there, in your left hand menu navigate to Plugins > Add New. In the search box on the right hand side, type ‘Instagram feed‘ + hit enter. You will then be shown the following search results + the one you require is the one I have highlighted by ‘Smash Balloon’:

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

Click the Install Now button + when this has finished installing, click ‘Activate‘.

Upon activation, in your dashboard side menu, click where it should now say Instagram Feed + this will take you to the settings page for that plugin.

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

On this page you now need to configure your account in order for your images to show on your blog.

Click the big blue button labelled ‘Log in and get my Access Token and User ID‘. This should take you to the Instagram login page where you will need to enter your username + password. Do this + click ‘Login‘.

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

You will then be directed back to the configuration page + should have a unique Access Token + your User ID. You will need to copy + paste each of these into the corresponding boxes underneath if they haven’t done so automatically.

Once you have done that. Hit ‘Save Changes‘.

Add instagram into a sidebar widget

Still in your Instagram settings page, click the tab at the top that reads ‘Display Your Feed‘ + this will load a new page. This page shows all the shortcode options you require to display your feed in various ways. You can display more than one feed using multiple shortcodes, so it helps to customise differently depending on how you would like it to be displayed. For example, the feed in my footer, is a different layout than my feed in my sidebar; that is all thanks to this page.

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

For the feed in my footer, I uses this shortcode layout: [ instagram-feed num=8 cols=8 imagepadding=0 ]

The feed in my sidebar widget uses this shortcode: [ instagram-feed num=6 cols=2 imagepadding=5 ]

You can also just use the default theme code which is [ instagram-feed ]

To use these shortcodes, make sure to delete the spaces I have entered before + after the [ + the ].

Whichever you decide to go for, copy your shortcode + then in your dashboard navigate to Appearance > Widgets to open up your Widget admin area.

In this page, you will need to drag a ‘Text Widget’ over to your sidebar menu + give it a title. I’ve simply called mine ‘Instagram‘. In the text box that opens, paste your Instagram shortcode that you chose in the previous step + hit the ‘Save‘ button.

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

Now if you go ahead + refresh your blog page, you should see your Instagram Feed in your sidebar.

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

Depending on your themes styles will depend on how your Feed styles will look, but if you want to make some changes, like I do, we can do that ourselves in the next step.

Styling an Instagram Feed Widget

Ok so now that our feed is installed + displayed, let’s go ahead + change how those ugly blue links look (if your theme doesn’t include styles for this particular plugin – if they do, lucky you!)

In your dashboard menu, click the ‘Instagram Feed‘ link + at the top of the page click the ‘Customize‘ tab to open a new page.

This page is where you can play around with your settings to set the “default feed” which will be displayed just by using this shortcode: [ instagram-feed ]. Any changes you make here will affect the default styles, but wont change any complex feeds like: [ instagram-feed num=6 cols=2 imagepadding=5 ].

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

Go through the page + add your own styles to your feed.

I always make sure that my feed is set to 100% + leave the height field blank.

The background colour depends on your opinion, but I leave mine transparent / blank so that it matches my theme.

I also like to remove the header + load more button. If you are using one of my WordPress Themes, styles for all the IG feed buttons are included to match your theme.

Head on over to your blog + refresh your page to see your changes.

Add Instagram Feed to WordPress Blog | Howto Guide Tutorial | PIXEL BOUTIQUE | WordPress tutorials

That’s it. You’re done + you should now have a pretty Instagram feed on your blog. If you have any questions, please do drop me a comment, email or even follow me on Instagram + I will be happy to help.

COMMENTS: 4

Leave a Comment!

You must be logged in to post a comment.