The updated list of jQuery plugins and third-party services of 2021 to display an Instagram feed to your website
01. Instagram Feed without access token
Updates 10-05-2021
The Instagram feed plugin has been deprecated. At the moment you can use only the official API based plugin
A super easy way to add an Instagram feed to your website without Instagram API.
This plugin can be found in Matrix Themes admin menu > Enterprise package and available with two styles: default and full-width.
<!-- style 1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
<div id="instagram-feed" class="instagram_feed cc-clearover">
</div>
<script>
/* <![CDATA[ */
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'unsplash',
'container': "#instagram-feed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_captions': true,
'callback': null,
'styling': true,
'items': 8,
'items_per_row': 4,
'margin': 1,
'lazy_load': true,
'on_error': console.error
});
});
})(jQuery);
/*]]>*/
</script>
All you have to do is to add your own Instagram username (or tag).
The additional options are items (max 12), items_per_row and margin (0 or 1)
- Note:
- At the moment the plugin doesn't always display correctly the Instagram feed. For the latest updates and the most common issues, please visit the official documentation here:
- https://github.com/jsanahuja/jquery.instagramFeed
02. Third-Party services to display an Instagram Feed
The alternative way to display your Instagram Feed are third-party apps that can facilitate your work. Here are the most popular services:
Powr.io
The most popular external Instagram feed provider for Jimdo.
The detailed documentation is available here:
https://support.jimdo.com/faq/how-to-add-an-instagram-feed-to-your-website/
Elfsight.com
Clean and easy-to-use app with user-friendly feed editor and neat dashboard
lightwidget.com
A responsive widget for Instagram. You can embed our widgets on your website, blog, online store etc. This is one-time purchase widget like an activation fee (10$). No monthly/yearly payments:)
03. Instagram feed plugin
Instafeed.js is a simple way to display your Instagram photos on your website. This plugin has been already used in Matrix Themes and now it's available with the latest version 2.
Official documentation:
https://github.com/stevenschobert/instafeed.js
Installation
1. Facebook app and test user setup
To authorize Instafeed.js to fetch your media you'll need to create a Facebook app, and add your Instagram user account as a test user:
- Follow steps 1 - 3 here: Facebook Basic Display API guide
- Use the User Token Generator to create a starting access token.
Hint!
You can generate a Token simply by using Instant Tokens (instant-tokens.com) and logging with the your Instagram account.
2. Adding Instafeed.js to your web page
The next steps assume:
- You have your Facebook app already
- You're using Instagram Token Agent
- You're using a Matrix Theme or Zodiac framework (that include jQuery library and CSS classes)
Style 1 ( 2 rows, 6 images )
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js@2.0.0rc1/src/instafeed.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
var feed = new Instafeed({
accessToken: 'Your instagram token goes here',
limit: 6,
template: '<div class="instamatrix col-4 add-5 cc-box" style="display:inline-block;"><a href="http://instagram.com/{{model.user.username}}" target="_blank">{{model.user.username}}<\/a><a href="{{link}}" title="{{caption}}" target="_blank"><img src="{{image}}" alt="{{caption}}" class="w-100"/><\/a><\/div>'
});
feed.run();
});
})(jQuery);
//]]>
</script>
<div id="instafeed" class="col-12">
</div>
Style 2 ( 1 row, full width )
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/stevenschobert/instafeed.js@2.0.0rc1/src/instafeed.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
var feed = new Instafeed({
accessToken: 'Your instagram token goes here',
limit: 4,
template: '<div class="instamatrix w-100"><a href="http://instagram.com/{{model.user.username}}" target="_blank">{{model.user.username}}<\/a><a href="{{link}}" title="{{caption}}" target="_blank"><img src="{{image}}" alt="{{caption}}" class="w-100"/><\/a><\/div>'
});
feed.run();
});
})(jQuery);
//]]>
</script>
<div id="instafeed" class="is--flex is-flex-block no-padding is-fullwidth is-matrix-block">
</div>
If you're using one of the above plugins or know any other plugins or service to display an Instagram feed, please share your experience here:)
GET INSPIRED
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE
Write a comment