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.