jQuery Plugin to Embed Instagram Feed on Website

A lightweight jQuery plugin to embed Instagram feed on website without app token client ids.
The plugin makes standard Ajax call to Instagram URL and fetch images related to given hashtag.

Plugin Overview

Plugin: hashtagstory.js
Author: Kasper Legarth
Licence: MIT Licence
Published: 2019-04-02 06:39:05
Repository: Fork on GitHub
Dependencies: jQuery 2.0.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 10 KB

How to Embed Instagram Feed on Website:

1. Load the jQuery and hashtagstory.js into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Instagram Feed Js -->
<script src="hashtaghistory.js"></script>

2. Create a container (a div element) with a unique id in which you would like to embed Instagram feed.

<div id="instagram-feed"></div>

3. After that, initialize the plugin in jQuery document ready (or anonymous) function to activate the feed.

$(document).ready(function(){

$("#instagram-feed").hashtaghistory("hash-tag-name-here");

});

Advance Configuration Options to Embed Instagram Feed

The following are some advance configuration options to create / customize “Instagram Feed”.

hashtag

Define the hash tag where from the images will be fetched. Default: undefined, Type: string

$("#instagram-feed").hashtaghistory({
  hashtag: "beauty",
});
imageSize

This option define the size for the feed’s images. Default: 150, Type: int.
Available options are as Instagram provided image sizes: 150, 240, 320, 480, 640.

$("#instagram-feed").hashtaghistory({
  hashtag: "beauty",
  imageSize: 480,
});
limit

Define how many images you want the plugin to return. Default: 6, Type: int.
Note: The max limit is 64, if limit is higher than 64 the plugin will only return 64.

$("#instagram-feed").hashtaghistory({
  hashtag: "beauty",
  limit: 9,
});
link

This option enable / disable images to be wrapped into links to the post. Default: true, Type: boolean

$("#instagram-feed").hashtaghistory({
  hashtag: "beauty",
  link: false,
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*