A simple jQuery plugin to show a list of Instagram photos.
Import the script
<script src="jquery.instagram.js"></script>
Insert an empty div
in the code
<div class="instagram"></div>
Run the plugin
$(function() {
$(".instagram").instagram({
hash: 'love'
, clientId: 'YOUR-CLIENT-ID-HERE'
});
});
This expects a div with class instagram
and a button
element.
When clicked, the button paginates through the search, allowing you to show more than the API limit of 20 photos.
<div class="instagram"></div>
<button>More</button>
$(function(){
var
insta_container = $(".instagram")
, insta_next_url
insta_container.instagram({
hash: 'hipster'
, clientId : 'YOUR-CLIENT-ID-HERE'
, show : 18
, onComplete : function (photos, data) {
insta_next_url = data.pagination.next_url
}
})
$('button').on('click', function(){
var
button = $(this)
, text = button.text()
if (button.text() != 'Loading…'){
button.text('Loading…')
insta_container.instagram({
next_url : insta_next_url
, show : 18
, onComplete : function(photos, data) {
insta_next_url = data.pagination.next_url
button.text(text)
}
})
}
})
});
You can obtain a client id registering a new Instagram API client app at http://instagr.am/developer/register/
Search recent photos tagged with hash
.
See also http://instagram.com/developer/endpoints/tags/#get_tags_media_recent
Authentication: clientId
required
Type: String
Default: null
Search recent by user userId
.
See also http://instagram.com/developer/endpoints/users/#get_users_media_recent
Authentication: accessToken
required.
Type: String
Default: null
Search recent from location locationId
.
See also http://instagram.com/developer/endpoints/locations/#get_locations_media_recent
Authentication: clientId
required.
Type: String
Default: null
Search for media in a given area. See also http://instagram.com/developer/endpoints/media/#get_media_search
Authentication: clientId
required.
Type: Object
Default: null
OAuth 2 access token. See also http://instagram.com/developer/auth/
Type: String
Default: null
OAuth 2 client application id. See also http://instagram.com/developer/auth/
Type: String
Default: null
Number of photos to show.
Type: Number
Default: null
You can populate this with the next URL object (pagination.next_url
) returned by the Instagram API.
Type: URL
Default: null
Called just before making the request to instagram API.
Type: Function
Default: null
Called after the response from instagram API.
Type: Function
Default: null