This time I will share jQuery Plugin and tutorial about An Instagram API Plugin For jQuery and Bootstrap – Pongstagr.am, hope it will help you in programming stack.
Pongstagr.am is an awesome jQuery plugin using the Instagram API to display recent, user or liked photo feeds on your web page. Twitter’s bootstrap framework is required for the modal box effect that displays the details (large image and comments) of the photo in a popup window.
Important Note:
This plugin is broken since Instagram has changed its API. You can now use the jQuery instagramFeed plugin instead.
How to use it:
1. Include necessary javascript library files at the bottom of your web page.
2 |
<script src="js/bootstrap.min.js"></script> |
3 |
<script src="js/pongstagr.am.js"></script> |
2. Include required CSS files in the head section of your page.
1 |
<link rel="stylesheet" href="assets/css/docs-bootstrap.css" /> |
2 |
<link rel="stylesheet" href="assets/css/pongstagr.am.css" /> |
3. Create a container for displaying your Instagram photos.
1 |
<div id="recent"></div> |
4. Get the User ID and Access Token from Instagram and place them in the javascript.
02 |
$(document).ready(function(){ |
04 |
$('#recent').pongstgrm({ |
05 |
accessId: YourAccessID, |
06 |
accessToken : YourAccessToken, |
Change log:
2016-01-02
2015-12-29
2015-07-26
2014-01-10
- improved docs, modal window and its responsiveness, added a cover photo option (for profile)
2014-01-04
- updated: bootstrap v3.0.3 and jquery v2.0.3
2013-12-08
- fixed: Image overlaps and cover the post caption
This awesome jQuery plugin is developed by pongstr. For more Advanced Usages, please check the demo page or visit the official website.
