The Best Ways to Add an Instagram Feed to your WordPress Website
The Best Ways to Add an Instagram Feed to your WordPress Website
When most people think about social media, they picture Facebook and Twitter. However, Instagram is quickly becoming one of the biggest social media tools online. It’s a photo-sharing site that has grown to over 400 million monthly active users. It also ranks as one of the top 10 most visited websites in America. Your business needs to be there!
This article will cover a few different methods that you can use to display your Instagram feed on your WordPress powered website.
Instafeed.js is a great option, but it doesn't have all the features you might want. Elfsight's Instagram Widget and Smashballoon Plugin are two other options worth considering if you're looking to create an Instagram feed with more functionality than instafeed.js provides. Keep reading to learn about these three different ways of adding an Instagram Feed to your WordPress Site!
Why Add An Instragram Feed To Your Website?
Instagram is no longer a platform that's just for photographers, and the value of having your Instagram feed on your website isn't to say you're an "influencer" or that you want likes and follows. An Instagram feed shows customers and clients what you're doing, what you care about, and how to connect with you. Your Instagram feed can be an effective customer service channel too.
Instagram has approximately 300 million monthly active users. That's a massive amount of eyeballs for your product or company. Even if your goal isn't to sell things directly, an Instagram feed can be tremendously valuable.
Instagram provides a lot of opportunity for market research, You can see what types of images catch on with your audience and learn about the kind of content that's more likely to do well. That way you can plan posts in advance that are most likely to get engagement or reach the right people. Plus, it makes planning your content easier since you'll have a better understanding of what works and what doesn't.
Instagram is also one of the best ways to build brand loyalty and ensure customers will keep coming back for more. A great example from one of our customers (an online supplements company) shows how their Instagram feed helps them connect with their customers and build brand loyalty, even when they're not actively selling anything.
So... we know now that Instagram is worth it, and showing an Instagram feed on your WordPress website is valuable. Now let's talk about how to do just that.
We will cover three methods. The first method is a free JavaScript Library called Instafeed.js. The second option is Elfsight's Instafeed Widget and the third is Smashballoon Plugin. These vary in terms of complexity and pricing - and as an agency we'll intersperse our thoughts as we've used all of these methods.
Use InstaFeed.js Library
The first method is the InstaFeed.js Library. It works on all the major browsers - including mobile devices -- and doesn't require any server-side code to run. The library is freely available from GitHub, and you can include it in your site's <head> element using a simple script tag.
Recently, they launched the 2.0 version of Instafeed, which now works with the new Instagram API.
Because it's Open Source code, it's free.
Here are some of the key features:
- This is a great way to create a basic Instagram Feed on your website.
- It's simple, easy to use, lightweight and perfect for sites that don't have much traffic or many images (it won't slow down pages).
- Overall we like it a lot as it's lightweight and works well.
- InstaFeed now works with the new Instagram API. This increases your website's chances of not being taken down because it follows the new API guidelines.
This JS library is relatively easy to install if you know what you're doing, but compared to other methods, much more complex. Let's take a look at the installation process.
First, we add the library via CDN.
This is done with a script tag inserted into the head of our WordPress website.
Next we initialize the widget on our site, and add it to a div with an arbitrary ID:
var instaFeed = new InstaFeed("#myInstagramWidget");
Then, we set the various options, such as the Instagram username , amount of photos to display, etc:
The div with the ID of #myInstagramWidget will then be populated with an Instagram Feed.
If you're technical, then you can build out custom views, show hashtags, and do virtually anything you'd ever need in terms of adding an Instagram feed to WordPress (we a actually use this library in our Professional Instagram Feed for Oxygen Builder component). But, you'll need to have a good grasp of JS and this library to do that.
Performance wise, the size of Instafeed is 1.5kb and it will work on all the major browsers and has no server-side dependencies.
The problem with this method is that it offers limited functionality compared to other methods of adding an Instagram feed to your website. The script attempts to simulate Instagram's "Photo Map," but isn't very perfect at doing so. It's also bound to be complicated for somebody who doesn't know JavaScript, making it not perfect for a business owner looking for a dead simple solution.
Luckily, there are other options available to business owners who don't have the time or skills to set it up themselves. We will go through two of those now!
ElfSight Instagram Feed Widget
The ElfSight IG feed is another way to add Instagram photos to a WordPress website. This one's dead simple to configure and install, well designed, and easy to use.
With Elfsight, you can add your Instagram Feed to any part of a WordPress page, including the header, sidebar or footer. You can also style elements like colors and fonts as well as adding custom CSS.
For some, ElfSight is free, but in most instances, you'll want to opt for the basic or pro plan. The pro plan costs $10/mo and comes with:
- Unlimited websites
- 50,000 views
- Premium support
- Free installation service
- Elfsight logo removal
There's a slightly more limited $5/mo basic plan, as well as a free lite plan.
There are 50 different, easy to use customization options as well as templates to choose from. Differing from Instafeed, with Elfsight, you can also display photos from any public Instagram account or by hashtag, location or photo URL and never worry about mixing it all together – any combinations are supported.
This can be filtered or moderated, and displayed as a grid or slider. You can also have a popup!
This solution is interesting because it's actually not a plugin. Instead, you install it by embedding some code on your site, like Instafeed, but for this one, it's just a copy paste. The integration is seamless, and it has a lot of options for displaying content. It's always updated, and everything is managed on the Elfsight website.
Of the three on our list, Elfsight is our favorite. They have awesome features in a usable package, as well as great support. Best of all, their pricing is reasonable for what you get out of it.
As an agency, we like this one because it's the easiest for our clients to use. We set it up for them, and they never touch the code. The social media sharing options are also a nice touch!
Smash Balloon Plugin
The final entry on our list is the Smash Balloon Instagram Feed Plugin. This one's a standard WordPress plugin.
Designed to be compatible with any WordPress theme on your site, the Instagram Feed plugin doesn't require any work for you to get it looking perfect. The plugin comes equipped with tons of customization options so that you can adjust the appearance and layout of your chosen feed. You can display feeds throughout your site and customize them with the shortcode styles. For example, if you want a video feed on one page and a photo carousel on another, not an issue!
The plugin caches the data it receives from Instagram to decrease load time and minimize API requests. It also has a backup caching system in case of API problems, ensuring your feed stays up even if you need it most. You can link your Instagram posts to custom URLs by adding the URL to the caption of your post. This makes it easy for people who click on a specific post in their feed to see products or pages that are relevant at that point in time.
Instagram Feed Pro is a responsive WordPress plugin for your Instagram account that was designed from the ground up to work well on all devices, whether you're using a touch screen or not.
Something that's incredible about the company behind the WordPress plugin, Smash Balloon, is the support they offer. Getting in touch with the team through their website is easy, and it's encouraged that you do just that if you need support or have questions about this plugin. The company also has a great blog where you can find tips and tricks as well as tutorials for using Instagram on your site.
For one site, it comes in at $49 a year, and of course, if you want to make use of the plugin you'll need a license.
A Word About The Instagram API
Something to consider (and an aspect of Instagram that's annoying) is their API and the restrictions that come with it. The problem is that the Instagram API has a cap on requests per user. When your script exceeds this amount, you'll get an error message from Instagram telling you to stop - and Instagram will disable access to your account if it detects excessive use.
This doesn't mean completely disabling your account forever (although they have done that in the past), but you may not be able to pull Instagram data again until you adjust your code or wait hours for your requests to be reset by Instagram. So keep this in mind when building your Instagram feed, and don't abuse the API!
The API is also changing a lot, specifically now that Facebook owns the company. For example, it's impossible to really display an Instagram feed on a WordPress website without a specific API key.
The remaining Instagram Legacy API permission was disabled on June 29, 2020. Now, devs need to use the Instagram Basic Display API and Instagram Graph API. This means that any WordPress plugin now has to be built using the Instagram API.
However, with this development, it's become a bit easier for users of the plugins. You may have noticed, but it's now a relatively easy (though more limited) experience when it comes to making the API key and integrating. In most cases, it's just a button click.
Always keep an eye out for API news associated with Instagram. If they make any future changes and you're in the dark, your WordPress Instagram feed may cease to work!
Which Is The Best Instagram Feed Solution For WordPress?
Elfsight is the best provider right now. They have the best package for the price, and we like their support and product the most. If you're a business owner or web admin looking for a super well featured, cost effective solution that's your guy.
Instafeed.js is good for technical people who want a free solution but absolute control when it comes to WordPress an Instagram feed. If you're a developer and not afraid of tweaking code and building your own stuff, you'll be in heaven. However, there's a current lack of docs that makes accessibility to beginners difficult.
Finally, Smash Balloon is a well respected solution. Instagram Feed Pro helps you display completely customizable Instagram feeds on your website and make them interactive.
However, when compared to Elfsight, some may find it more complex -- but it's cheaper!!
No matter which solution you choose, make sure the plugin/library is regularly updated to avoid any issues or problems with use.
If you have any questions about this article , or any questions about Instagram feed plugins in general, don't hesitate to leave them in the comments section below! Enjoy and happy building.
Bookmark This Post
James LePage
Thanks for such a detailed description of add Instagram to the WordPress website. I was searching for such informative articles for many days. You describe it in a very detailed manner.
Feed not only good for influencers but also for marketers you can embed your instagram feed to your site using these best Instagram widgets tools for websites