jQuery Plugin to Embed Instagram Feed on Website

April 2, 2019 admin Social Media 0

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 Preview

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

Plugin Overview

Plugin: hashtagstory.js
Author: Kasper Legarth
Licence: MIT Licence
Published: April 2, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.0.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 10 KB
Demo Download

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,
});

Related jQuery Plugins: