Get started with InstaShow 3.2.4

Installation

Learn more about the version 3 in our blog at Elfsight Instagram Feed 3 – the most awesome update of 2017.


1. Upload Elfsight Instagram Feed to your server

Upload the instashow folder to your server.


2. Add files to your website

If you've uploaded the instashow folder to the root directory of your website, the code will look like:

<script src="/instashow/elfsight-instagram-feed.js"></script>

Otherwise, you'll need to set the correct path to the file.


3. Initialize the plugin using data-is-* attributes or as jQuery plugin

Initialization using data-is-* attributes (recommended)

Add InstaShow HTML element to the body section:

<div data-is
     data-is-api="/instashow/api/index.php"
     data-is-source="@muradosmann"
     data-is-width="auto"
     data-is-layout="grid"
     data-is-columns="5"
     data-is-rows="3"
     data-is-lang="en">
</div>

Initialization as jQuery plugin

Add InstaShow HTML element:
<div class="my-instashow"></div>
Initialize InstaShow as jQuery plugin:
<script>
    document.addEventListener('appReady.EappsInstagramFeed', function() {  
        $('.my-instashow').eappsInstagramFeed({
            api: '/instashow/api/index.php',
            source: '@muradosmann',
            width: 'auto',
            layout: 'grid',
            columns: 5,
            rows: 3,
            lang: 'en'
        });
    };
</script>

If you've uploaded the instashow folder to the non-root directory of your website,
you need to set a correct path to the /instashow/api/index.php folder in the data-is-api attribute.

Note: This case requires PHP 5.2+ version.

Note: Make sure that the /instashow/api/ directory on your server is writable.


API configuration (advanced settings)

You can manage some settings of the plugin's API in the config.json file. You can find it in the /instashow/api/ folder.

There are 4 available options:

  • media_limit allows you to restrict the number of photos which you get from Instagram. The number of photos influences the plugin performance. We don't recommend you to set more than 100 without real necessity.
  • cache_time defines how often in seconds the plugin requests Instagram and grabs new photos. The option also influences the plugin loading speed and your server load. We don't recommend you to set less than 3600 seconds.
  • allowed_usernames is a security option. You can set the list of available usernames (without '@' symbol) separated by commas to prevent the usage of the plugin by third-parties.
  • allowed_tags is a security option. You can set the list of available hashtags (without '#' symbol) separated by commas to prevent the usage of the plugin by third-parties.

If your hosting doesn’t support PHP

If your hosting doesn't support PHP, you need to use Instagram Access Token and the data-is-access-token attribute instead of the data-is-api attribute. Note: In this case you can display only the latest 20 images from the username, which was added to Sandbox of Instagram API Console for this Client ID. Please, follow these steps:

  1. Get Instagram Access Token with the help of this tutorial.
  2. Leave the data-is-source attribute empty.
  3. Then specify the Access Token in the data-is-access-token attribute.

Info: PHP dependence and Instagram access token restrictions were caused by the changes in Instagram API.
You can read more about these changes in the article Global update of Elfsight Instagram Plugins 2016.

Options

Option HTML data attribute Default Value Description
api data-is-api URL address to the /instashow/api/index.php folder. InstaShow API requires PHP 5.2+ version. If your hosting doesn't support PHP, use data-is-access-token instead.
Content
source * data-is-source null A source list for getting Instagram images.
Use the following variants:
  • @username - Instagram posts from username
  • #hashtag - Instagram posts with hashtag
  • location URL - Instagram posts by location (See tutorial)
  • post URL - specific Instagram posts
It’s possible to specify several sources through the gap or separated by commas.
filterOnly data-is-filter-only null It filters the images to the ones from the specified sources. If this filter is applied, the image will display only if it's posted in each source. The filter accepts @username, #hashtag, location URL or post URL. It accepts a set of values as listed in the source option.
filterExcept data-is-filter-except null It allows to exclude specific images by their URL, by specific hashtags, source usernames or locations. It accepts a set of values as listed in the source option.
filter data-is-filter null It allows to specify custom filter using javascript function or its name. Using it you can define which posts will be shown in gallery. The function will be applied for each post. If it returns true then post will be shown, if it returns false - post will not be displayed. Note: filter function should be defined in global scope (window object) For example:
<script>
        function myInstaShowFilter(image) {
            // returns true if filter equals Sutro
            return image.filter === 'Sutro';
        }
    </script>

    <div data-is
         data-is-filter="myInstaShowFilter"
         data-is-api="/instashow/api/index.php"
         data-is-source="#sunshine">
    </div>
limit data-is-limit 0 Set the required number to restrict the count of loaded posts. Leave this option empty or "0" to show all available posts.
Layout
layout data-is-layout slider Choose one of the two feed layouts: slider or grid.
postTemplate data-is-post-template tile Select one of post templates: tile or classic.
columns data-is-columns 4 Number of columns in the feed.
rows data-is-rows 2 Number of rows in the feed.
gutter data-is-gutter 0 The space between the images in the feed in pixels.
responsive data-is-responsive null Specify the breakpoints to set the columns, rows and space between images in the feed depending on a window width. Accepts Plain Object or JSON string. Use the following format: { "600": { "columns": 3, "rows": 2, "gutter": 10 }}. It means when a window width would be less than or equal to 600px then the number of columns would be set to 3, the number of rows - to 2 and gutter - to 10px. Note: if you specify this option as data-is-responsive attribute, please use single quote ' (data-is-responsive='{ "600": { "columns": 3, "rows": 2, "gutter": 10 }}').
width data-is-width auto Feed width (any CSS valid value: px, %, em, etc). Set "auto" to make the feed full width and responsive.
callToActionButtons data-is-call-to-action-buttons null Set the call to action buttons. The buttons will be displayed on the popup. You can set a specific call to action for each post. Call to action buttons encourage your visitors to perform the actions you need (buy a product, register at your service or contact you). Example: data-is-call-to-action-buttons='[{ postUrl: "https://www.instagram.com/p/Bcz7WwuHu9g/", buttonLink: "https://elfsight.com/", buttonLabel: "Purchase Instagram Feed now"}]'.
postElements data-is-post-elements user, date, instagramLink, likesCount, commentsCount, share, text Choose the post elements to display them in the feed.
popupElements data-is-popup-elements user, location, followButton, instagramLink, likesCount, share, text, comments, date Choose the elements to display in popup.
imageClickAction data-is-image-click-action popup Select the action on image click. Open the image in popup ("popup"), open the image on Instagram in a new browser tab ("instagram") or do nothing ("none").
sliderArrows data-is-slider-arrows true Activate/Deactivate arrows in the slider.
sliderDrag data-is-slider-drag true Activate/Deactivate drag in the slider.
sliderSpeed data-is-slider-speed 0.6 Animation speed of slide switching (sec).
sliderAutoplay data-is-slider-autoplay 0 Autoplay in the slider (in seconds). If this option is set to "0" autoplay is turned off.
Colors
colorPostOverlayBg data-is-color-post-overlay-bg rgba(0, 0, 0, 0.8)
colorPostOverlayText data-is-color-post-overlay-text rgb(255, 255, 255)
colorPostBg data-is-color-post-bg rgb(255, 255, 255)
colorPostText data-is-color-post-text rgb(0, 0, 0)
colorPostLinks data-is-color-post-links rgb(0, 53, 107)
colorSliderArrows data-is-color-slider-arrows rgb(255, 255, 255)
colorSliderArrowsBg data-is-color-slider-arrows-bg rgba(0, 0, 0, 0.9)
colorGridLoadMoreButton data-is-color-grid-load-more-button rgb(56, 151, 240)
colorPopupOverlay data-is-color-popup-overlay rgba(43, 43, 43, 0.9)
colorPopupBg data-is-color-popup-bg rgb(255, 255, 255)
colorPopupText data-is-color-popup-text rgb(0, 0, 0)
colorPopupLinks data-is-color-popup-links rgb(0, 53, 105)
colorPopupFollowButton data-is-color-popup-follow-button rgb(56, 151, 240)
colorPopupCtaButton data-is-color-popup-cta-button rgb(56, 151, 240)
More
widgetTitle data-is-widget-title - Set the feed title. URLs, hashtags (with #) and Instagram usernames (with @) will be automatically displayed as clickable links.
lang data-is-lang en Choose one of the available languages for the feed. 21 languages are supported: de, en, es, fi, fr, it, nl, no, pl, pt-BR, sl, sv, tr, ru, hi, ko, zh-CN, zh-HK, ja, vn, he-IL.
cacheTime data-is-cache-time 300 It defines how long (in seconds) the data from Instagram will be cached in your browser. Set "0" to turn the cache off.
accessToken data-is-access-token If your hosting doesn't support PHP, you need to use this option instead of data-is-api. You can get Instagram Access Token with the help of this tutorial. Note: In this case you can display only the latest 20 images from the username, which was added to Sandbox of Instagram API Console for Instagram Client ID.

Example



Congratulations! You have successfully installed your InstaShow.

Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center