Get started with InstaLink 2.1.10

Installation

Learn more about the update 2.0.0 installation in an article How to install InstaLink jQuery 2.0.0 of our blog.


1. Upload InstaLink to your server

Upload the instalink folder to your server.


2. Add files to your website

Add files to your website (usually in <head> section) after jQuery (requires jQuery 1.7+).

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

<link href="/instalink/instalink-2.1.10.min.css" rel="stylesheet">
<script src="/instalink/instalink-2.1.10.min.js"></script>

If you uploaded the folder to another directory, don't forget to set a correct path to the files.


If your website doesn't include jQuery script, please, add it before InstaLink:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

3. Add InstaLink element to a page

Add InstaLink HTML element to the desired page.

<div data-il 
     data-il-api="/instalink/api/"
     data-il-username="elfsight"
     data-il-hashtag=""
     data-il-lang="en"
     data-il-show-heading="true"
     data-il-scroll="true"
     data-il-width="270px"
     data-il-height="350px"
     data-il-image-size="medium"
     data-il-bg-color="#285989"
     data-il-content-bg-color="#F8F8F8"
     data-il-font-color="#FFFFFF"
     data-il-ban="">
</div>

If you uploaded the instalink folder to a non-root directory of your website,
you need to set a correct path to the /instalink/api/ folder in the data-il-api attribute.

Note: This case requires PHP 5.2+ version.

Note: Be sure that the /instalink/api/ directory on your server is writable.


API configuration

You can manage some settings of the plugin's API in the config.json file. You can find it in the /instalink/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 of the plugin performance. We don't recommend you to set more than 100 without real need.
  • cache_time defines how often in seconds the plugin requests Instagram and grabs new photos. The option also influences on 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-il-access-token attribute instead of data-il-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-il-username attribute empty.
  3. Then specify the Access Token to the data-il-access-token attribute.

Info: dependence on PHP and Instagram access token restrictions are related to Instagram API changes.
You can read more about these changes in an article Global update of Elfsight Instagram Plugins 2016.

Options

Option Default Value Description
data-il-api — URL address to the /instalink/api/ folder. InstaLink API requires PHP 5.2+ version. If your hosting doesn't support PHP, use data-il-access-token instead.
data-il-username — Instagram username (without '@' symbol). Leave empty if you use the data-il-access-token attribute.
data-il-hashtag — Instagram hashtag. If "data-il-username" is specified, then images will be selected by the username and filtered by the specified hashtag. Also it supports multiple hashtags separated by comma or space.
data-il-lang en Widget UI language (posts, followers, following and follow button labels). Supports 16 languages: en, id, de, es, fr, it, nl, pl, pt-BR, ru, sv, tr, zh-HK, ja, ko, he.
data-il-show-heading true If this option is specified "false", the heading panel will be hidden.
data-il-scroll true If option is specified "true", it's possible to show more images by scrolling down.
data-il-width 270px Widget width (any CSS valid value: px, %, em, etc.). Set "auto" to make the widget responsive.
data-il-height 350px Widget height (any CSS valid value: px, %, em, etc.).
data-il-image-size medium Size of images (small, medium, large or xlarge).
data-il-bg-color #285989 Header and button background color (any CSS valid value).
data-il-content-bg-color #F8F8F8 Content background color (any CSS valid value).
data-il-font-color #FFFFFF Header and button text color (any CSS valid value).
data-il-ban — List of usernames separated by comma or space. Set any username to hide all photos from this account in your feed. Works only with hashtags.
data-il-cache-media-time 0 It defines how long in seconds the photos will be cached in browsers' localStorage. Set "0" to turn the cache off.
data-il-access-token — If your hosting doesn't support PHP, you need to use this option instead of data-il-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.

Code Generator

It will help you to configure your InstaLink faster and easier.

Configure my InstaLink

Example



Congratulations! You have successfully installed your InstaLink.

Support, questions and offers

Incoming issues and queries are taken care of in 24-36 hours according the receiving order.

Visit Support Center