Did you know that Instagram now has over 1 billion monthly users?
That’s incredible, isn’t it!
Over the years, Instagram has become a massive part of blogging and our online presence. It’s often referred to as a micro-blogging platform with users sharing snippets of their lives in real-time.
With many feeds being super curated and heavily themed these days, users want to showoff their photos in more places than just the app. Many bloggers like to proudly display their Instagram feed on their blogs as well.
If you are a WordPress user then you can easily display your feed on your website using a simple to use free plugin that you can easily customise.
In this post I’ll show you how to display your Instagram feed on your website using a plugin, and I’ll show you how to customise the appearance of your feed.
1 | Install the Instagram Feed plugin
First things first you need to install a plugin called Instagram Feed. This plugin has over 600,000 active installations on WordPress website so you know it’s good!
It is a free plugin but there is a paid premium version of the plugin which comes with additional features. For the purpose of this tutorial, we’re just going to be looking at the free version.
Hover over Plugins in the left hand menu and click Add New.
Then when you are on the Plugins page, search for “Instagram Feed” and you should see a plugin that looks like this:
Click Install Now and when prompted to click Activate.
2 | Connect to your Instagram account
After Activating the Instagram Feed plugin you will see a new item in the left hand menu. It’s called Instagram Feed and it looks like this:
Click on this link. This will take you to the Instagram Feed page.
To connect your Instagram account, click the big blue button that says Connect an Instagram Account.
You will then be asked to sign into the Instagram you want to connect to.
Once you have logged into your Instagram account you will be taken back to WordPress and you will see that your account has successfully been connected.
You’ll noticed on this page that if you have the premium version of the plugin you you can choose to display posts with certain hashtags, posts tagged with a certain location or even choose specific single posts to display.
3 | Display your Instagram feed on your website
To display your Instagram feed on your website, you will need to use a shortcode. This shortcode can be used within a widget, within a post or page, or directly in the PHP code (if you are comfortable with editing theme files).
To obtain this shortcode, click on the Display Your Feed tab on the Instagram Feed page. The shortcode is the small piece of code highlighted below:
Make a copy of this code because you’re going to need this for the next steps.
Now you need to decided where you are going to put your Instagram feed. As I say, you have a number of options:
1 | Display your Instagram feed using a widget
To display your Instagram feed using a widget, head over to the widget page by hovering over Appearance in the left hand menu and clicking Widgets.
On the widgets page, find the Text widget and add it to a widgetised area of your website.
Open up the Text widget and in the content area, paste your shortcode like so:
Save this and then take a look at what your Instagram feed looks like on your website. Here’s what my feed looks like when I add it to the sidebar of the Twenty Seventeen theme:
2 | Display your Instagram feed within a post or page
To display your Instagram feed within a post or page, head over the post or page that you want to add it to (or create a new one) and paste the shortcode into the content area.
Now preview your page to see the feed. This is what my feed looks like on a page using the Twenty Seventeen WordPress theme:
3 | Display your Instagram feed using PHP
You may or may not know that shortcodes can be displayed anywhere on a WordPress website using PHP. The code you would need to display your feed would be:
<?php echo do_shortcode("[instagram-feed]"); ?>
Only edit your theme files if you feel comfortable enough using PHP.
4 | Customise your Instagram feed
Now that you have seen what your feed looks like on your website, it’s time to customise it.
To customise your feed, go back to the Instagram Feed page and click on the Customize tab.
Here you find lots of settings to help you to customise the appearance of your theme. You can customise:
- Width and height of the feed
- Background colour of the feed
- Number of photos
- Number of columns
- Padding around each image
- Order of images (newest to oldest or random)
- Image resolution
- Whether or not to show the header information
- Whether or not to show the “Load More” button and the “Follow” button
You can also add your own custom CSS and JavaScript here if you need. If you need a hand with more complex styling, I can help out.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
