by Raelene Morey on April 19, 2018

How to Add an Instagram Slider to WordPress

Instagram slider

When you post so many beautiful photos to Instagram, why not also share them on your website? Luckily, this is easy to do with Smart Slider 3.

In just a few simple steps, you can create an Instagram slider with Smart Slider 3 that automatically pulls in your latest photos and videos. You can even get fancy with advanced options and incorporate, layers, animations and other design elements.

Instagram sliders are ideal for creatives who want to share their photos with people who might not have an Instagram account. And for bloggers and businesses alike, it enables you to create a visual link between your website and social media activity.

In this tutorial, I’ll walk you through how to add an Instagram slider to your WordPress site. We’ll be using Smart Slider 3 Pro for this tutorial, which allows you to generate dynamic content. So if you don’t already have a copy of this awesome plugin, you can purchase it to follow along.

Instagram has updated its privacy and security settings, and as a result is deprecating its API, limiting what you can display using third-party apps. For more, check out Instagram’s announcement. For a more detailed rundown of how Smart Slider 3 works with Instagram, read the documentation.

Creating an Instagram Slider for WordPress

With Smart Slider 3, you can add a bunch of different dynamic generators to your sliders, including Facebook, Twitter, Vimeo, YouTube and, of course, Instagram.

Before you can start working on your Instagram slider, there are a couple of things you need from Instagram: a client ID and secret. There are four steps involved:

  1. Go to the Instagram Developer site
  2. Log in to your Instagram account
  3. Complete the developer signup process
  4. Register a new client
Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

Let’s take a look at the steps involved and how they work with Smart Slider 3 in more detail.

The instructions and pictures below describe the process of the Instagram API creation at the time of writing. Instagram holds the right of changing the steps or the interface anytime.

Getting an Instagram Client ID and Secret

In the Smart Slider 3 dashboard, click on Settings in the top-right and select Instagram generator from the list on the left. Here, you’ll see the necessary information you need to get in order to automatically display your Instagram photos in your slider.

It’s important that you copy the callback URL as you’ll need it later

Smart Slider 3 settings Instagram

Open the Instagram Developer page in another browser tab and register a new application.

If you’re not a developer, don’t worry – registering an application is just a formality and means you’ll be able to share your content with third-party apps, in this case, your WordPress site.

Instagram register application

Next, you’ll need to log in to your Instagram account, so go ahead and log in.

Instagram login

The next step is signing up as a developer. It doesn’t matter if you’re not a developer. This step just means you want to access the Instagram API. So go ahead and fill in your details.

Instagram developer signup

The Developer page will reload, but don’t worry, your account has been created. Click on Manage Clients at the top of the page and then Register a New Client.

Instagram register client

Next, you need to complete registration in order to get your client ID. So fill in your details and click Register.

Instagram register new client id

The page will then reload with your new client ID.

Smart Slider 3 Instagram client id

To get your client secret, click on Manage and your details will be displayed at the top of the page.

Smart Slider 3 instagram secret

Copy your client ID and secret. Then switch back to the browser tab for your WordPress site. Paste in the details and click Request Token.

Make sure that there aren’t any empty space characters in the ID or secret you just pasted otherwise they won’t work.

Smart  Slider 3 Instagram client id secret

A new window will pop up asking you to authorize Instagram’s access to your account information. Click Authorize to proceed.

Instagram authorize

You’ll see a token appear in your settings. Click Save in the top-right of the page to save your new Instagram API settings.

Editing Your Instagram Slider

Now that you’ve got your Instagram API details sorted, you can start creating your slider.

The following screenshots and instructions describe the workflow for Smart Slider 3.3. The interface and the necessary actions might be different for older versions.

Go to the Smart Slider 3 dashboard and click New Slider.

Smart Slider 3 new slider

A modal will pop up. Give your slider a name, set your dimensions, and choose the kind of preset you want to use before clicking Create.

Smart Slider 3 create new slider

Next, click Add Slide and choose Dynamic from the list that appears.

Smart Slider 3 add dynamic slide

A collection of dynamic sources will appear. Scroll down to Instagram and click on it.

Smart Slider 3 dynamic sources

Next, you’ll need to choose what kind of content you want to pull into your slider from Instagram. For this tutorial, I’m going to create a slider using images from my feed, so I’ll click My feed.

Smart Slider 3 instagram sources

Next, there are a few simple settings to update. You can change how many slides there are in your slider, updates your records, and change the cache expiration (how often your slider looks for new images).

Clicking View Records lets you check which images will initially be pulled into your new Instagram slider. Click Save to move on.

Smart Slider 3 Instagram feed settings

Now you can start editing how your slides will look using the Instagram data for the first slide. You can add layers and use variables to display information pulled from Instagram, such as the titles and captions for your photos, URLs and even how many comments and likes you have.

In the example below, I’ve added a text layer to my image and used the “likes_count” variable to display the number of likes I got for this particular photo. I’ve also added in a red heart and the word “likes” since the variable only pulls in the number of likes.

Clicking on the bucket icon lets you style the text layer, including changing fonts, sizes and even editing CSS.

Smart Slider 3 Instagram like count

Here’s the full list of variables you can use for your slides:

  • caption – The description of the photo.
  • title – The title of the photo.
  • standard_res_image – The standard resolution image of the photo.
  • image – The standard resolution image of the photo.
  • thumbnail_image – The thumbnail image of the photo.
  • thumbnail – The thumbnail image of the photo.
  • description – The description of the photo.
  • url – URL to the photo.
  • url_label – A translatable “View image” text
  • owner_full_name – The full name of the owner of the photo
  • author_name – The full name of the author of the photo.
  • owner_website – URL to the website of the author of the photo.
  • author_url – URL to the website of the author of the photo.
  • low_res_image – A low resolution image of the photo.
  • owner_username – The username of the owner of the photo.
  • owner_profile_picture – The profile picture of the owner of the photo.
  • owner_bio – The biography of the owner of the photo.
  • likes_count – The number of likes on the photo.
  • comments_count – The number of comments at the photo.

There’s no need to remember them all – whenever you see the word Variable highlighted in blue, it means you can click on it to insert a variable.

Smart Slider 3 Instagram variables

When you’ve finished editing your Instagram slider, don’t forget to hit Save. Then you can use the generated shortcode or PHP code in your slider’s dashboard settings to insert your slider into your homepage.

Getting Creative with Advanced Slider Features

In this tutorial, we’ve looked at how to create a simple Instagram slider using Smart Slider 3’s feature for generating dynamic content. Using the dynamic variables available, there’s no limit to what you can create if you have a vision for what you want to create.

The great thing about Smart Slider 3 is that the Content/Canvas editor is easy-to-use and encourages experimentation, so if you wanted to display your captions to sit beside your images, style your author bio to show above your photos or event add different animations and navigation, it’s easy and fun to do.

The best way to get a grasp of all the possibilities is to check out Smart Slider 3’s impressive Examples page, which features 100+ different sliders.

Smart Slider 3 example sliders grid

If you like any of the examples above, you can import them into WordPress and customize them using your own images and text. Each and every one of the 100+ sample sliders is available to import and customize in Smart Slider 3 Pro.

Conclusion

Whether you’re a blogger who wants to show off foodie pics or a photographer who wants to display images from your latest photo shoot, creating an Instagram slider is a great way to build a visual link between your website and social accounts.

With Smart Slider 3, you can easily create an Instagram slider that pulls in your latest photos and includes the information only you want to include, such as captions, comments and like counts.

I hope this tutorial has inspired you to experiment with Instagram sliders. Feel free to share your thoughts and ideas in the comments below!

Raelene Morey

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.