Add Instagram Photos To Your Website - jQuery gramfeed

Add Instagram Photos To Your Website - jQuery gramfeed
File Size: 4.36 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

gramfeed is a replacement for the instafeed.js library that adds Instagram photos from any user to your website by using the Instagram's hidden graph API URL. Without the need of the Instagram access token.

How to use it:

1. Create a container element to display the Instagram photos.

<div id="gramfeed"></div>

2. Download and include the jquery.gramfeed.js script after loading jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="jquery.gramfeed.js"></script>

3. Call the function on the container element and specify the username whose photos you want to fetch.

$("#gramfeed").gramfeed({
  username: 'username'
});

4. Specify the size of thumbnails. Valid sizes: 150,240,320,480,640.

$("#gramfeed").gramfeed({
  username: 'username',
  size: 240 // default: 240
});

5. Set the maximum number of photos to display.

$("#gramfeed").gramfeed({
  username: 'username',
  limit: 12 // default: 12
});

6. The default HTML template for the Instagram feed.

  • {{type}}: image or video.
  • {{width}}: image width
  • {{height}}: image height
  • {{orientation}}: square, portrait, or landscape.
  • {{link}}: url
  • {{image}}: path to image
  • {{id}}: image ID
  • {{caption}}: image caption
  • {{likes}}: image likes
  • {{comments}}: number of comments
  • {{timestamp}}: timestamp
$("#gramfeed").gramfeed({
  username: 'username',
  template: '<a class="gramfeed-img" href="{{link}}"><img src="{{image}}" alt="{{caption}}"></a>',
});

This awesome jQuery plugin is developed by schmoove. For more Advanced Usages, please check the demo page or visit the official website.