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:
- Go to the Instagram Developer site
- Log in to your Instagram account
- Complete the developer signup process
- Register a new client
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
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.
Next, you’ll need to log in to your Instagram account, so go ahead and log in.
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.
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.
Next, you need to complete registration in order to get your client ID. So fill in your details and click Register.
The page will then reload with your new client ID.
To get your client secret, click on Manage and your details will be displayed at the top of the page.
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.
A new window will pop up asking you to authorize Instagram’s access to your account information. Click Authorize to proceed.
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.
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.
Next, click Add Slide and choose Dynamic from the list that appears.
A collection of dynamic sources will appear. Scroll down to Instagram and click on it.
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.
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.
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.
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.
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.
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.
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!