How to add Instagram feeds to your website

You’ve probably heard of the social media giant Instagram. It is 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.

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

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

  1. Using an Instagram WordPress plugin to pull the latest posts from your Instagram feed.
  2. Using IFTTT to create a post on your website when you post on Instagram.
  3. 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.

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.

  1. Install the plugin
    Log into your WordPress website and go to the plugins menu. Search for the Instagram feed plugin or download the pro version here and activate it.
    View our plugin install tutorial for further details on how to install a WordPress plugin on your website.

  2. Configure Instagram Feed
    Go to Instagram Feed in the admin sidebar menu to access the plugin's settings.

Click on the Log in and get my Access Token and User ID button to make the connection between your Instagram account and the plugin in your WordPress website.

A new page will open asking you to Authorize access to your account. Click the Authorize button to proceed.

The page will return back to the Instagram Feed page and will have pre-filled your Access token and User ID in the fields. Your account is now connected and ready to configure your feed.

  1. Configure your Feed Settings
    Scroll down to the Show Photos From section and enter your User ID from the field above. Click the save changes button to save your user ID. You can also retrieve posts from other accounts, but you will need to retrieve their id first.

  2. Customize Feed
    Click on the Customize tab if you wish to configure the look and feel of your Instagram Feed on your site. There are dozens of options that let you change the layout, number of photos, header, load more button among other things. Once you are done, click the save changes button to save your customizations.

  3. Display your feed
    You can display your feed by adding the [instagram-feed] shortcode to any page/post or widget area.
    The shortcode allows you to make a couple of modifications to the layout by setting the number of items to display and how many columns the items should span across the page. You can apply these option like so [code type="markup"][instagram-feed num="9" cols="3"][/code]

If you would like to display more than one set of Instagram profiles' photos then you can do so by adding their ids as the id="" attribute in the shortcode. For example [code type="markup"][instagram-feed id="123456789, 0987654321"][/code]

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.

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.

  1. Sign up to IFTTT
    Go to IFTTT and log in or create an account. IFTTT is the tool that we will be using to connect Instagram and WordPress together.

  2. Connect Instagram and WordPress
    Once you have signed up and logged in, the first step you will need to do is connect to both your Instagram and WordPress accounts.
    To connect to each service you can go to the services page or click on the Instagram link and WordPress link to take you there directly. Follow each step to link your two accounts.

  3. Create a new applet
    Go to the My Applets page and click on the New Applet button.

  4. Create the “this” link
    Click on the +this link to create the Instagram connection. Use the search field to search for Instagram. Once it shows up, select the Instagram App option.

  5. Choose your Instagram trigger
    Select to have it run on every new photo or video you upload.

  6. Create the “that” link
    Click on the +that link to create the WordPress connection. Use the search field to search for “WordPress”. Select the WordPress App option.

  7. Complete action fields
    Fill out the fields to create the skeleton of what IFTTT will create on your website.

  8. Review and Finish
    Review what you have created and give it another description if desired. If you would like, you can also choose to receive notifications when the applet runs. Click the Finish button to create the Applet.

Post an image on Instagram to see your newly created post automatically get created on your website.

Method 3: Manually coding an Instagram feed shortcode

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

  1. Create a plugin
    Open up your favorite code/text editor and begin your custom Instagram feed plugin by adding the plugin header to the top of the page.

  2. Add the function to retrieve Instagram posts

function wpabsolute_instagram_feed( $count = 8 ) {
   // Your code here
}
  1. Create the Instagram feed shortcode
    This step we will be incorporating the function that we just made and make it into a simple shortcode.
function wpabsolute_instagram_shortcode( $atts, $content = null ) {
   // Your code here
}

add_shortcode( 'wpab_instagram_feed', 'wpabsolute_instagram_shortcode' );
  1. Create a simple loop anywhere in your site (optional)
    You can utilize the function we made to retrieve the Instagram posts and simply run a loop similar to the shortcode.

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.

Conclusion

Instagram is a social network that is rapidly growing with hundreds of millions of people using it. 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.