Add a beautifully clean, customizable, and responsive Instagram feed to your website
|Author:||Smash Balloon (profile at wordpress.org)|
|WordPress version required:||3.0|
|WordPress version tested:||5.0|
|Added to WordPress repository:||23-07-2014|
|Total downloads:||5 414 095|
|Active installs:||700 000+|
Click to start download
Default plugin styling
Your Instagram Feed is completely customizable
Display multiple Instagram feeds from any non-private Instagram account
Your Instagram feeds are completely responsive and look great on any device
Display your Instagram photos in multiple columns, with or without a scrollbar
Just copy and paste the shortcode into any page, post or widget on your site
The Instagram Feed plugin Settings pages
Can I display multiple Instagram feeds on my site or on the same page?
Yep. You can display multiple Instagram feeds by using our built-in shortcode options, for example:
[instagram-feed id="12986477" cols=3].
Can I display photos from more than one Instagram account in one single feed?
Yep. You can just separate the IDs by commas, either in the User ID(s) field on the plugin’s Settings page, or directly in the shortcode like so:
How do I find my Instagram Access Token and Instagram User ID
We’ve made it super easy. Simply click on the big blue button on the Instagram Feed Settings page and log into your Instagram account. The plugin will then retrieve and display both your Access Token and User ID from Instagram.
My Instagram feed isn’t displaying. Why not!?
There are a few common reasons for this:
- Your Access Token may not be valid. Try clicking on the blue Instagram login button on the plugin’s Settings page again and copy and paste the Instagram token it gives you into the plugin’s Access Token field.
- Your Instagram account may be set to private. Your Instagram account may be set to private. Instagram doesn’t allow photos from private Instagram accounts to be displayed publicly.
- Your User ID may not be valid. Be sure you’re not using your Instagram username instead of your User ID. You can find your Instagram User ID by using this tool.
<?php wp_footer(); ?>
If you’re still having an issue displaying your feed then please open a ticket in the Support forum with a link to the page where you’re trying to display the Instagram feed and, if possible, a link to your Instagram account.
Are there any security issues with using an Access Token on my site?
Nope. The Access Token used in the plugin is a “read only” token, which means that it could never be used maliciously to manipulate your Instagram account.
Can I view the full-size photos or play Instagram videos directly on my website?
This is a feature of the Pro version of the plugin, which allows you to view the photos in a pop-up lightbox, support videos, display captions, display photos by hashtag + more!
How do I embed my Instagram Feed directly into a WordPress page template?
You can embed your Instagram feed directly into a template file by using the WordPress do_shortcode function:
<?php echo do_shortcode('[instagram-feed]'); ?>.
My Feed Stopped Working – All I see is a Loading Symbol
If your Instagram photos aren’t loading and all your see is a loading symbol then there are a few common reasons:
1) There’s an issue with the Instagram Access Token that you are using
You can obtain a new Instagram Access Token on the Instagram Feed Settings page by clicking the blue Instagram login button and then copy and pasting it into the plugin’s ‘Access Token’ field.
Occasionally the blue Instagram login button does not produce a working access token. You can try this link as well.
2) Your Instagram User ID is incorrect or is from a private Instagram account
Please double check the Instagram User ID that you are using. Please note that your Instagram User ID is different from your Instagram username. To find your Instagram User ID simply enter your Instagram username into this tool.
If your Instagram User ID doesn’t show any Instagram photos then it may be that your Instagram account is private and that the Instagram photos aren’t able to be displayed.
5) The feed you are trying to display has no Instagram posts
If you are trying to display an Instagram feed that has no posts made to it, a loading symbol may be all that shows for the Instagram feed or nothing at all. Once you add an Instagram post the Instagram feed should display normally
6) The shortcode you are using is incorrect
You may have an error in the Instagram Feed shortcode you are using or are missing a necessary argument.
What are the available shortcode options that I can use to customize my Instagram feed?
The below options are available on the Instagram Feed Settings page but can also be used directly in the
[instagram-feed] shortcode to customize individual Instagram feeds on a feed-by-feed basis.
- General Options
- id – An Instagram User ID – Example:
- width – The width of your Instagram feed. Any number – Example:
- widthunit – The unit of the width of your Instagram feed. ‘px’ or ‘%’ – Example:
- height – The height of your Instagram feed. Any number – Example:
- heightunit – The unit of the height of your Instagram feed. ‘px’ or ‘%’ – Example:
- background – The background color of the Instagram feed. Any hex color code – Example:
- class – Add a CSS class to the Instagram feed container – Example:
- Photo Options
- sortby – Sort the Instagram posts by Newest to Oldest (none) or Random (random) – Example:
num – The number of Instagram posts to display initially. Maximum is 33 – Example:
cols – The number of columns in your Instagram feed. 1 – 10 – Example:
- imageres – The resolution/size of the Instagram photos. ‘auto’, full’, ‘medium’ or ‘thumb’ – Example:
- imagepadding – The spacing around your Instagram photos – Example:
- imagepaddingunit – The unit of the padding in your Instagram feed. ‘px’ or ‘%’ – Example:
- disablemobile – Disable the mobile layout for your Instagram feed. ‘true’ or ‘false’ – Example:
- Header Options
- showheader – Whether to show the Instagram feed Header. ‘true’ or ‘false’ – Example:
- headercolor – The color of the Instagram feed Header text. Any hex color code – Example:
- ‘Load More’ Button Options
- showbutton – Whether to show the ‘Load More’ button. ‘true’ or ‘false’ – Example:
- buttoncolor – The background color of the button. Any hex color code – Example:
- buttontextcolor – The text color of the button. Any hex color code – Example:
- buttontext – The text used for the button – Example:
[instagram-feed buttontext="Load More Photos"]
- ‘Follow on Instagram’ Button Options
- showfollow – Whether to show the ‘Follow on Instagram’ button. ‘true’ or ‘false’ – Example:
- followcolor – The background color of the ‘Follow on Instagram’ button. Any hex color code – Example:
- followtextcolor – The text color of the ‘Follow on Instagram’ button. Any hex color code – Example:
- followtext – The text used for the ‘Follow on Instagram’ button – Example:
[instagram-feed followtext="Follow me"]
For more shortcode options, check out the Pro version.
For more FAQs related to the Instagram Feed plugin please visit the FAQ section on our website.
- Confirmed compatibility with the upcoming WordPress 5.0 “Gutenberg” update
- Fix: Fixed an issue caused by some themes which affected the formatting of the ‘Load More’ and ‘Follow’ buttons
- Fix: Fixed an occassional formatting issue with error messages due to no line-height being set
- Fix: Minor admin UI fixes
- Tweak: Removed mention of some Pro features which will be deprecated due to upcoming Instagram API changes
- Tweak: Automatic image resolution detection setting now works better with wide images. Resizing the browser will now automatically raise the image resolution if needed.
- Fix: Fixed an issue where the Load More button would disappear if all posts for a feed were cached.
- New: We’ve made improvements to the way photos are loaded into the feed, adding a smooth transition to display photos subtly rather than suddenly.
- New: More header sizes; you can now choose from three sizes: small, medium, and large. Change this on the “Customize” tab.
- Fix: Using a percent for the image padding was causing the height of images to be too tall
- Fix: Removed a PHP notice when the Instagram API was blocked by the web host
- Fix: Captions missing as “alt” text for Instagram images.
- Fix: System information was not formatting connected Instagram accounts and user ids correctly
- Fix: “Unauthorized redirect URL” error occurring while trying to connect a new Instagram account due to recent changes from Instagram
- Fix: Using a percent for the image padding was causing the height of Instagram images to be to tall
- New: Retrieving Access Tokens and connecting multiple Instagram accounts is now easier using our improved interface for managing account information. While on the Configure tab, click on the big blue button to connect an account, or use the “Manually Connect an Account” option to connect one using an existing Access Token. Once an account is connected, you can use the associated buttons to either add it to your primary Instagram User feed or to a different Instagram feed on your site using the
usershortcode option, eg:
- Tweak: Disabled auto load in the database for backup caches
- Fix: Fixed an occasional issue with the Instagram login flow which would result in an “Unauthorized redirect URL” error
- Fix: SVG icons caused some display problems in IE 11
- Fix: Removed support for using usernames in the Instagram User ID setting due to recent API changes. Will now default to the Instagram User ID attached to the Access Token.
- Fix: Backup feed not always being used when Access Tokens expire
- Fix: Instagram Access Tokens may have been incorrectly saved as invalid under certain circumstances
- Tweak: Setting “Cache Error API Recheck” enabled by default for new Instagram Feed installs
- Fix: Page caches created with the WP Rocket plugin will be cleared when the Instagram Feed settings are updated or the cache is forced to clear
- Fix: Fixed a rare issue where feeds were displaying “Looking for cache that doesn’t exist” when page caching was not being used
- Fix: Fixed issue where Instagram feeds were displaying “Looking for cache that doesn’t exist” when page caching was not being used
- Fix: Font method setting not working when “Are you using an ajax theme?” setting is enabled
- Important: Due to recent changes in the Instagram API it is no longer possible to display photos from other Instagram accounts which are not your own. You can only display the user feed of the account which is associated with your Access Token.
- New: Added an Access Token shortcode option and support for multiple Instagram Access Tokens. If you own multiple Instagram accounts then you can now use multiple Access Tokens in order to display user feeds from each Instagram account, either in separate feeds, or in the same feed. Just use the
accesstokenshortcode option. See this FAQ for more information on displaying multiple User feeds.
- New: Added feed caching to limit the number of Instagram API requests. Use the setting on the “Configure” tab “Check for new posts every” to set how long feed data will be cached before refreshing.
- New: Added backup caching for all feeds. If the Instagram feed is unable to display then a backup feed will be shown to visitors if one is available. The backup cache can be disabled or cleared by using the following setting:
Customize > Misc > Enable Backup Caching.
- New: Icons are now generated as SVGs for a sharper look and more semantic markup
- New: Instagram carousel posts include an icon to indicate that they are carousel posts
- Tweak: Using the “sort posts by random” feature will include the most recent 33 posts instead of just the posts shown in the Instagram feed
- Fix: links back to instagram.com will use the “www” prefix
- Fix: Fixed a rare issue where the Load More button wouldn’t be displayed after the last update if the Instagram account didn’t have many posts
- Fix: Fixed Font Awesome 5.0 causing Instagram icon to appear as a question mark with a circle
- Fix: Fixed inline padding style for sbi_images element causing validation error when set to “0” or blank space
- Fix: Added a workaround for an Instagram API bug which caused some feeds to show fewer posts than expected
- New: Loading icon appears when waiting for new posts after clicking the “Load More…” button
- New: Added translation files for Dutch (nl_NL)
- Fix: Fixed a potential security vulnerability. Thanks to Magnus Stubman for reporting the issue.
- New: The plugin is now compatible with the WPML plugin allowing you to use multiple translations for your feeds on your multi-language sites
- New: Added translation files for Danish (da_DK), Finnish (fi_FL), Japanese (ja_JP), Norwegian (nn_NO), Portuguese (pt_PT), and Swedish (sv_SE) to translate the “Load More” and “Follow on Instagram” text
- New: Improved tool for retrieving Instagram Access Tokens
- New: Added an option to show/hide Instagram bio text in feed header
- New: Feeds that include IDs from “private” Instagram accounts will now ignore the private data and display a message to logged-in site admins which indicates that one of the Instagram accounts is private
- New: Feeds without any Instagram posts yet will display a message informing logged-in admins to make a post on Instagram in order to view the feed
- New: Added translation files for French (fr_FR), German (de_DE), English (en_EN), Spanish (es_ES), Italian (it_IT), and Russian (ru_RU) to translate “Load More…” and “Follow on Instagram”
- Tweak: Optimized several images used in the Instagram feed including loader.png
- Tweak: Font Awesome stylesheet handle has been renamed so it will only be loaded once if our Custom Facebook Feed plugin is also active
- Fix: Updated the Font Awesome icon font to the latest version: 4.7.0
- Fix: Padding removed from “Load More” button if no buttons are being used in the Instagram feed
- Fix: All links in the feed are now https
- Compatible with WordPress 4.8
- Tweak: Updated plugin links for new WordPress.org repo
- Fix: Minor bug fixes
- Fix: Fixed a security vulnerabiliy
- Tested with upcoming WordPress 4.6 update
- Fix: Fixed an issue with the Instagram image URLs which was resulting in inconsistent url references in some feeds
- IMPORTANT: Due to the recent Instagram API changes, in order for the Instagram Feed plugin to continue working after June 1st you must obtain a new Access Token by using the Instagram button on the plugin’s Settings page. This is true even if you recently already obtained a new token. Apologies for any inconvenience.
- New: When you click on the name of a setting on the plugin’s Settings pages it now displays the shortcode option for that setting, making it easier to find the option that you need
- New: Added a setting to disable the Font Awesome icon font if needed. This can be found under the Misc tab at the bottom of the Customize page.
- Tweak: Updated the Instagram icon to match their new branding
- Tweak: Added a help link next to the Instagram login button in case there’s an issue using it
- Fix: Updated the Font Awesome icon font to the latest version: 4.6.3
- Fix: Fixed an issue caused by a specific type of emoji which would cause the feed to break when used in a post
- Tweak: Added links to our other free plugins to the bottom of the admin pages: The Custom Facebook Feed and Custom Twitter Feeds
- Fix: Important notice added in the last update is now only visible to admins
- New: Compatible with Instagram’s new API changes effective June 1st
- New: Added video icons to Instagram posts in the feed which contain videos
- New: Added a setting to allow you to use a fixed pixel width for the feed on desktop but switch to a 100% width responsive layout on mobile
- Tweak: Added a width and height attribute to the images to help improve Google PageSpeed score
- Tweak: A few minor UI tweaks on the settings pages
- Fix: Minified CSS and JS files
- Fix: Fixed a bug which was causing the height of the Instagram photos to be shorter than they should have been in some themes
- Fix: Fixed an issue where when an Instagram feed was initially hidden (in a tab, for example) then the Instagram photo resolution was defaulting to ‘thumbnail’
- Fix: Fixed an issue which was setting the visibility of some Instagram photos to be hidden in certain browsers
- Fix: The new square photo cropping is no longer being applied to Instagram feeds displaying images at less than 150px wide as the images from Instagram at this size are already square cropped
- Fix: Fixed an issue where Instagram photos wouldn’t appear in the Instagram feed if it was initially being hidden inside of a tab or some other element
- Fix: Fixed an issue where the new Instagram image cropping fuction was failing to run on some sites and causing the Instagram images to appear as blank
- Fix: If you have uploaded an Instagram photo in portrait or landscape then the plugin will now display the square cropped version of the photo in your Instagram feed
- Fix: Fixed an issue with double quotes in photo captions (used in the Instagram photo alt tags) which caused a formatting issue
- Fix: Fixed an issue introduced in version 1.3.4 which was causing theme settings to not be applied in some themes
- Fix: Reverted the ‘prop’ function introduced in the last update back to ‘attr’ as prop isn’t supported in older versions of jQuery
- Fix: Removed the image load function as it was causing Instagram images not to be displayed for some users
- Fix: Used the Instagram photo caption to add a more descriptive alt tag to the Instagram photos
- Fix: Instagram photos are now only displayed once they’re fully loaded
- Fix: Added a stricter CSS implementation for some elements to prevent styles being overridden by themes
- Fix: Added CSS opacity property to Instagram images to prevent issues with lazy loading in some themes
- Fix: Removed a line of code which was disabling WordPress Debug/Error Reporting. If needed, this can be disabled again by using the setting at the bottom of the plugin’s ‘Customize’ settings page.
- Fix: Fixed an issue with the ‘Load more’ button not always showing when displaying Instagram photos from multiple Instagram User IDs
- Fix: Moved the initiating sbi_init function outside of the jQuery ready function so that it can be called externally if needed by Ajax powered themes/plugins
- New: Added an option to disable the Instagram Feed mobile layout
- New: Added an setting which allows you to use the Instagram Feed plugin with an Ajax powered theme
- New: Added a ‘class’ shortcode option which allows you to add a CSS to class to each individual Instagram feed:
- New: Added a Support tab which contains System Info to help with troubleshooting
- New: Added friendly error messages which display only to WordPress admins
- New: Added validation to the Instagram User ID field to prevent usernames being entered instead of IDs
- Tweak: Made the Instagram Access Token field slightly wider to prevent tokens being copy and pasted incorrectly
- Fix: Fixed an issue with the Instagram icon not appearing in the ‘Follow on Instagram’ button or in the Instagram Feed header
- Fix: Addressed a few CSS issues which were causing some minor formatting issues in the Instagram Feed on certain themes
- New: You can now display Instagram photos from multiple Instagram User IDs. Simply separate your Instagram IDs by commas.
- New: Added an optional header to the Instagram feed which contains your Instagram profile picture, Instagram username and Instagram bio. You can activate this on the Instagram Feed Customize page.
- New: The Instagram Feed plugin now includes an ‘Auto-detect’ option for the Instagram Image Resolution setting which will automatically set the correct Instagram image resolution based on the size of your Instagram feed.
- New: Added an optional ‘Follow on Instagram’ button which can be displayed at the bottom of your Instagram feed. You can activate this on the Instagram Feed Customize page.
- New: Added the ability to use your own custom text for the ‘Load More’ button
- New: Added a loader icon to indicate that the Instagram photos are loading
- New: Added a unique ID to each Instagram photo so that they can be targeted individually via CSS
- Tweak: Added a subtle fade effect to the Instagram photos when hovering over them
- Tweak: Improved the responsive layout behavior of the Instagram feed
- Tweak: Improved the documentation within the Instagram Feed plugin settings pages
- Tweak: Included a link to step-by-step setup directions for the plugin
- Fix: Fixed an issue with the feed not clearing other widgets correctly
- Fix: Replaced the ‘on’ function with the ‘click’ function to increase compatibility with themes using older versions of jQuery
- Tweak: Added an initialize function to the Instagram Feed plugin
- Fix: Fixed an occasional issue with the ‘Sort Photos By’ option being undefined
- Fix: Removed stray PHP notices
- Fix: Changed the double quotes to single quotes on the ‘data-options’ attribute
- New: Added an option to display your Instagram photos in random order
- New: A new tabbed layout has been implemented on the Instagram Feed plugin’s settings pages
- New: Added an option to preserve your Instagram Feed settings when uninstalling the plugin
- New: Added a Pro version of the Instagram Feed plugin which allows you to display Instagram photos by hashtag, display Instagram captions, view Instagram photos in a pop-up lightbox, show the number of Instagram likes & comments and more
- Tweak: The ‘Load More’ button now automatically hides if there are no more Instagram photos to load
- Tweak: Added a small gap to the top of the ‘Load More’ button
- Tweak: Added a icon to the Instagram Feed menu item
- Fix: A maximum width is now only applied to the Instagram feed when the Instagram photos are displayed in one column
- Fix: Added a line of code which enables shortcodes to be used in widgets for themes which don’t have it enabled
- Fix: Fixed an issue with the Instagram Access Token and Instagram User ID retrieval functionality in certain web browsers
- Fix: Fixed an issue with the maximum Instagram image width
- Fix: Corrected a typo in the Instagram Feed Shortcode Options table
- Pre-tested for the upcoming WordPress 4.0 update
- Fix: Fixed an uncommon issue related to the output of the Instagram content
- New: Added an option to set the number of Instagram photos to be initially displayed
- New: Added an option to show or hide the ‘Load More’ button
- New: Added ‘Step 3’ to the Instagram Feed Settings page explaining how to display your feed using the [instagram-feed] shortcode
- New: Added a full list of all available Instagram Feed shortcode options to help you if customizing multiple Instagram feeds
- Fix: Fixed an issue with the Instagram login URL on the plugin’s Instagram Feed Settings page
- Fix: Fixed an issue with the Instagram Feed ‘Load More’ button opening an empty browser window in Firefox
- Launched the Instagram Feed plugin!