How to add an Instagram feed to your WordPress website

You’ve probably heard of the social media giant Instagram. It is only one of the biggest social media platforms on the web today.

In this article we will show you a number of ways to instantly push your Instagram feed to your website automatically.

Instagram is a social media platform for influencers and consumers and is a great way to drive traffic to your website. Although social media platforms like Instagram are useful in business, they can take a lot of time to utilize. That is why it is a good thing that Instagram has the ability for you to automate interactivity between your Instagram account and website.

Instagram is a platform that allows you to discover new users accounts or interests based on what you already like. Your profile can be discovered from a keyword that you include with your post (a hashtag) or from your location or what your friends recommend.

According to statista, Instagram has grown to over 700 million by the end of 2017 and it is not slowing down.

No matter whether you have a strong Instagram following or not, you will likely want to share you latest Instagram posts to help build your brand and continue with pushing future user engagement back to your site.

Instagram helps keep your audience engaged and is also a way to help continue selling after they leave your website.

We will be showing you 3 ways to get your social media feed to your website. The three ways we will be showing are:

Using an Instagram WordPress plugin to pull the latest posts from your Instagram feed.
Using IFTTT to create a post on your website when you post on Instagram.
Manually creating an Instagram feed using PHP code in your theme.

Method 1: Using an Instagram WordPress plugin on your WordPress website

This is by far the simplest method to adding your Instagram feed to your website.

This way will allow you to simply display your latest Instagram posts using a shortcode or widget on your website. You do not need to create any posts or any additional data on your website, the images will be pulled from your Instagram feed and displayed. Each time a new image is uploaded, it will be displayed in place of another.

Instagram Feed WordPress Plugin — This is what the Instagram Feed plugin looks like when output on your page.

You will need to install an Instagram feed plugin. There are many to choose from on the WordPress plugin directory but for this tutorial, we will be using the most popular one aptly called Instagram feed.

Your site will now be displaying all of your newest Instagram photos automatically. This option should have been the most straightforward way to automatically display Instagram posts on your website.

If you are a little bit tech-savvy and would like to control the output of your feed then you can do so by following method 3 below. We will be coding a custom shortcode to display your Instagram feed anywhere on your site.

IFTTT Homepage — We will be utilizing IFTTT to do the heavy lifting for method 2

Method 2: Creating a new website post when an Instagram post is created

This method is for people who want to automatically create a post on your website whenever an image is posted on your Instagram account. The post will be populated with the same content you post on Instagram.

We will be using the third party app called IF This Then That (IFTTT) to do the heavy lifting for us.

If you successfully linked both your Instagram and WordPress accounts and setup the Applet then your automation is now complete.
Post an image on Instagram to see your newly created post automatically get created on your website.

If you set the post to automatically get published then it should now be published on your site.

Method 3: Manually coding an Instagram feed shortcode

There may be a time when you need to customize the layout of your Instagram feed further than what is available from a plugin or you just want to get your hands dirty.

This option is a completely manual process that we will be custom coding using PHP as a plugin for our website.

Because we control the entire process, the output can be coded to exactly fit our website layout and design.

This will be a very simple plugin to demonstrate how simple it is to retrieve posts from your Instagram feed.
[highlight type=”note”]You an download the complete file to work along with in our downloads section.

[purchase_link id=”1000″ style=”button” color=”inherit” text=”Download Instagram Feed Plugin” direct=”true”][/highlight]

Create a plugin
Open up your favorite code/text editor and begin your custom Instagram feed plugin by adding the plugins header to the top of the page.
[code type=”php”][/code]
Add the function to retrieve Instagram posts
[code type=”php”]/* Instagram feed function to retrieve your instagram posts
*******************************************************************************/
function wpabsolute_instagram_feed( $count = 8 ) {

// Update to your desired frequency. The longer time to cache the better on performance
$cache_time = 72; // Hours (3 days)

// Access token required to connect to Instagram API and feed to work.
// Retrieve yours here: https://www.instagram.com/developer/authentication/
// Yeah its not very straightforward but once its done you dont need to do it again
$access_token = ”; // Add you Instagram API token here

// Check if transient is not set, otherwise use our transient from database
$feed = ”;
if ( false === ( $feed = get_transient( ‘wpab_instagram_feed’ ) ) ) {
$url = ‘https://api.instagram.com/v1/users/self/media/recent/’;
$url .= ‘?count=’ . $count . ‘&access_token=’ . $access_token;

// Attempt to get access to the instagram API
$response = wp_remote_get( $url );

// Did we got a valid response from Instagram?
if( $response ) {

// Decode the body of the response for use
$body = json_decode( $response[‘body’] );
$feed = $body->data;

// Cache the response in your database so that you
set_transient( ‘wpab_instagram_feed’, $feed, $cache_time * ‘HOURS_IN_SECONDS’ );
}
}
return $feed;
}[/code]
This function accepts one variable of $count which allows you to set the number posts to retrieve from Instagram.

You will need to also update the $access_token variable with your own Instagram access token (see next step).

The function pulls the data from your Instagram profile and stores it in what WordPress calls a ‘transient’. A transient is a useful feature to temporarily store data in your database for a limited time before it getting removed.

This is useful in cases where we do not want to be attempting to retrieve the same content each time the page loads. Instagram and other API providers may limit the number of times you can access their API so will want to make sure you use a transient to cache the content. Its far better for performance if you do use a transient especially when you start to get a lot of traffic to your website each day.
Instagram Access Token
In the previous step we added a variable to our function for our Instagram API access token. In this step we will be walking through creating it.

To access Instagram’s API you need to setup an access token. Information about this can be seen in the Instagram developer docs. This is how we do it:

Log in to Instagram in your browser (if you haven’t already) and go to Manage Clients.
If you are not yet signed up as a developer then you will be asked to do so.
Once you are signed up and logged in, Click on “Register a New Client” in top right corner.

Fill out the Register new Client ID form and click register.

Take note of your redirect URL (usually your sites homepage address) as we will be using it in the next step.
On the next page your will receive your new client id.

Copy that client ID and paste it into the “CLIENT-ID” part of the following URL.
You will need to also replace the REDIRECT-URI to the URL you set in the previous step. I set the URL to be the homepage. https://web3.com.au. Yours will be your website.

[code type=”markup”]https://www.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code[/code]

The final URL you need to copy to your browser should look similar to the following with the client id and redirect URI filled out:
[code type=”markup”]https://www.instagram.com/oauth/authorize/?client_id=abcdefghijklmnopqrstuvwxyz123456&redirect_uri=https://web3.com.au&response_type=code[/code]

The new window will ask you to authorize your Instagram account with your website. Click Authorize to proceed.

If you are now redirected to your website then your authorization is complete. Your URL should look something like:
[code type=”markup”]https://web3.com.au/?code=1234567890zyxwvutsrqponmlkjihgfedcba[/code]
The code=xxx part is what you need. Copy just the code (the bit after the equals sign). We will need it in the next step.

The next part requires you to run a cURL command. If you are on Mac, you can use terminal and there are a number of programs available for download on Windows.
The following code is what you will be executing. Make sure you update the CLIENT_ID, AUTHORIZATION_REDIRECT_URI and CODE parts using the information you received previously.
[code type=”markup”]curl -F ‘client_id=CLIENT_ID’ \
-F ‘client_secret=CLIENT_SECRET’ \
-F ‘grant_type=authorization_code’ \
-F ‘redirect_uri=AUTHORIZATION_REDIRECT_URI’ \
-F ‘code=CODE’ \
https://api.instagram.com/oauth/access_token[/code]
Run the code and it should output something like the following:

It is a very arduous task to retrieve your Instagram Access token but finally you should have it. Copy your access token to your Instagram feeds function.

Once your access key is in, you will be able to use the function to pull recent posts from your feed. The next step wraps the code in an easy to use shortcode.
Create the Instagram feed shortcode
This step we will be incorporating the function that we just made and make it into a simple shortcode so it can be placed in any post, page or widget area.

[code type=”php”]function wpabsolute_instagram_shortcode( $atts, $content = null ) {
$a = shortcode_atts( array(
‘count’ => 8 // How many images to display
), $atts );

// Get the Instagram feed from our function above
$result = wpabsolute_instagram_feed( $a[‘count’] );

// Set the default return value of and empty string
$return = ”;
if ( $result ) {

// Loop through the results and build up the markup to return.
foreach ( $result as $insta ):

// Modify this markup to your liking
$return = ‘images->standard_resolution->url ) . ‘” class=”col-3’ . $class . ‘” rel=”noopener”>’;
$return .= ‘images->thumbnail->url ) . ‘” alt=”” width=”150″ height=”150″ />’;
$return .= ‘‘;

endforeach;
}

// Return the instagram feed.
return $return;
}
add_shortcode( ‘wpab_instagram_feed’, ‘wpabsolute_instagram_shortcode’ );[/code]
This function creates a shortcode using the WordPress shortcode API. You can use this shortcode with the following code:
[code type=”markup”][wpab_instagram_feed count=”10″][/code]
It has one optional attribute of “count” which you can change to match how many posts you want to show.

The shortcode function is a simple loop that checks if there are any Instagram posts and if so, loops over each one with a link to go to the post. It also displays the post image in thumbnail format.

You can modify the size of the image by changing the images source to one of the following:

[code type=”php”]$insta->images->low_resolution->url
$insta->images->thumbnail->url
$insta->images->standard_resolution->url[/code]
Also, you may want to change the markup to suit your theme in another way. To do so, you simply need to edit the markup within the loop and each image will reflect your changes.
Create a simple loop anywhere in your site (optional)
You may not want to utilize the shortcode we created in the previous step. If this is the case then you can easily utilize the function we made to retrieve the Instagram posts and simply run a loop similar to the shortcode.
[code type=”php”]
<a href="images->standard_resolution->url ); ?>” class=”col-3″ rel=”noopener”>
<img src="images->thumbnail->url ); ?>” alt=”” width=”150″ height=”150″ />

[/code]
Make sure to wrap the code in php tags as illustrated and modify as you need to suit your theme.

If you want to see the code assembled into a very simple plugin then you can download it from here:

[purchase_link id=”1000″ style=”link” class=”aligncenter” color=”inherit” text=”Download Instagram Feed Plugin” direct=”true”]

That is all that is required to custom display Instagram posts on your website. As you can see, the final method is a lot more complicated than the previous two methods however it allows you to have complete control over the code that you are using.

The initial process of creating the access token is a long process but once you have your token, it is rather straightforward.

Conclusion

Instagram is a social network that is rapidly growing with hundreds of millions of people using it. Don’t leave your customers unable to find and connect with you.
Using the Instagram feed to connect to your website is a perfect way for customers to connect with you when they are browsing your website.

How did you go creating your Instagram feed on your website? Let us know in the comments below.

If you need a hand with any part of the code, let us know in the comments as well.

2 responses to “How to add Instagram feeds to your website”

bruce says:

May 2, 2019 at 4:05 am

Hello, the tutorial is great. however i ran into a problem. i was able to get my access token

i added the code to my child theme’s function file. and then added the shortcode to my page the code wil only display 1 post image.

1. WP Absolute says:
  
  November 23, 2019 at 10:11 am
  
  yes that is correct. If your post has multiple images then the user is encouraged to visit your Instagram feed. Or alternatively, the code can be expanded upon to add multiple images if you know how. I’ll leave that for another tutorial.

How to add Instagram feeds to your website

Method 1: Using an Instagram WordPress plugin on your WordPress website

Method 2: Creating a new website post when an Instagram post is created

Method 3: Manually coding an Instagram feed shortcode

Published by Joseph Chesterton

2 responses to “How to add Instagram feeds to your website”

Leave a Reply Cancel reply

Method 1: Using an Instagram WordPress plugin on your WordPress website

Method 2: Creating a new website post when an Instagram post is created

Method 3: Manually coding an Instagram feed shortcode

Published by Joseph Chesterton

2 responses to “How to add Instagram feeds to your website”

Leave a Reply Cancel reply

Claim Your Free Web3 Website Acceleration Plan