Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    30. April 2021

    How to Add An Instagram Feed to Your Website

    How to add an Instagram feed to your website

    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/

     

    bg-grey mid-round add-10 wow animated fadeInUp
    Powr.io content is not displayed due to your current cookie settings. Click on the cookie policy (functional and marketing) to agree to the Powr.io cookie policy and view the content. You can find out more about this in the Powr.io privacy policy.

    Elfsight.com

    Clean and easy-to-use app with user-friendly feed editor and neat dashboard

     

    bg-grey mid-round add-10 wow animated fadeInUp
    visit website

    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:)

     

    bg-grey mid-round add-10 wow animated fadeInUp
    visit website

    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 )

    bg-grey mid-round add-10 wow animated fadeInUp

    <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 )

    bg-grey mid-round add-10 wow animated fadeInUp

    <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:)

    tagPlaceholderTags:

    Write a comment

    Comments: 0

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close