How to Install jQuery Instagram Plugin InstaLink 2.0.0

We’ve prepared an important update for jQuery Instagram Plugin InstaLink and decided to describe in detail the process of installing jQuery version of InstaLink, as it undergoes some changes starting with the version 2.0.0.

Andrey Kozinskiy

1 year ago

How to Install jQuery Instagram Plugin InstaLink 2.0.0

New changes in Instagram website API will come into force on June 1, 2016. By default, these changes strongly restrict users of Instagram plugins. You can learn more about it in our article Global Update of Elfsight Instagram Plugins 2016. We’ve prepared this update for InstaLink in order to guarantee that restrictions won’t apply to our customers.

Installation of jQuery InstaLink 2.0.0

1. Download and unzip the archive with InstaLink files

You have to visit Downloads page after purchasing InstaLink jQuery plugin on codecanyon.org/downloads/.

Download and unzip plugin’s archive.

For plugin’s installation you need the instalink folder from the archive codecanyon-10585662-jquery-instagram-plugin-instalink.zip.

2. Upload InstaLink to Your Server

First of all, you have to upload the InstaLink folder to your server in order to install your Instagram plugin. For that FTP-clients (Total Commander, WinSCP, Filezilla, Cyberduck, Transmit and other) are usually used. You can upload the InstaLink folder to the root directory, any directory, where all plugins for your website are placed or any other directory.

3. Link Your Website with The InstaLink Files

After you uploaded the folder with the InstaLink files to your server, you have to link these files with your website. For that, you need to add the following code with a correct path to the files (this is the example for the situation when you uploaded InstaLink folder to the root directory):

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

Tip 1: Usually this code is added in the <head> section.

Tip 2: The code, which includes links to the Instagram files and which is stated above, should be settled below the connection of the jQuery script.

Tip 3: InstaLink requires jQuery 1.7+.

If your website doesn’t include the jQuery script, then you can use the following code in order to add it:

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

Don’t forget that jQuery script should be added before the InstaLink script. Now let’s analyze several examples of how InstaLink script can be added to your website. Example 1 You uploaded the InstaLink plugin to the root directory and your website didn’t include jQuery script. The code will look like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link href="/instalink/instalink-2.0.0.min.css" rel="stylesheet">
<script src="/instalink/instalink-2.0.0.min.js"></script>

Example 2 Let’s assume that you uploaded the InstaLink files to the directory called “plugins” and your website didn’t include the jQuery script. In this case, you have to set the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<link href="/plugins/instalink/instalink-2.0.0.min.css" rel="stylesheet">
<script src="/plugins/instalink/instalink-2.0.0.min.js"></script>

4. Add Instagram Widget to Any Page of Your Website

The third step relates to the implementation of some specific Instagram widget on the required web page. For that you have to customize this widget as you want and to insert the generated HTML element into the desired place on your website.

Tip 1: This case requires PHP 5.2+. If you hosting doesn’t support PHP, please, proceed to the point 4.1.

Tip 2: Pay attention to the option data-il-api. You can use it in order to specify a correct path to the folder with InstaLink API.

Here are few more examples of codes so that you will be able to complete the implementation faster. Example 1 The Instagram plugin was uploaded to the root directory and you use its standard options:

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

Example 2 The InstaLink script was uploaded, perhaps, to the directory called “plugins” and you use standard options:

<div data-il 
     data-il-api="/plugins/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>

4.1. If Your Hosting Doesn’t Support PHP

If your hosting doesn’t support PHP, then you need to use Instagram Access Token and the data-il-access-token attribute instead of data-il-api attribute. You can get it with the help of the tutorial How to get Instagram Access Token?. After that you need to set the derived Instagram Access Token to the data-il-access-token attribute.

Tip: You have to leave the data-il-username attribute empty. 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.

Example

<div data-il 
     data-il-access-token="Your Access Token"
     data-il-username=""
     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>

Support Is The Answer

If you have any kind of questions concerning InstaLink installation, then submit a ticket in our Support Center. We will make everything clear!