Merging and sorting two Instagram feeds #6
Description
I wanted to say thank you for sharing your work and share what I created based on it. I needed to merge and sort two Instagram feeds. You code gave me the jump start I needed. Hopefully what I came up with is of some use to you.
My final solution also requires http://cherne.net/brian/resources/jquery.hoverIntent.html and http://isotope.metafizzy.co/
The HTML
The Javascript
/*
- @author Ryan Williams / http://ryancw.com https://github.com/ryancw/instagram-scroll
- @author Michael Spredemann / http://jigsawllc.com - modified original script by Ryan Williams
*/
function InstagramScroll(opts) {
this.opts = opts;
if (!(this.opts.tag || this.opts.user1 || this.opts.clientID1 || this.opts.imageContainer)) {
throw "Error: tag/user1, clientID1, and imageContainer must be passed to InstagramScroll.";
}
var tag = this.opts.tag;
var clientID1 = this.opts.clientID1;
var clientID2 = this.opts.clientID2;
var imageContainer = this.opts.imageContainer;
var includeCaption = this.opts.includeCaption;
var includeUsername = this.opts.includeUsername;
var imageQuality = this.opts.imageQuality || 'standard_resolution';
var imageSize = this.opts.imageSize || 200;
// options: low_resolution (300 x 300)
// standard_resolution (600 x 600)
// thumbnail (150 x 150)
var scrollDistance = this.opts.scrollDistance || 350;
var user1 = this.opts.user1;
var user2 = this.opts.user2;
var url1;
var url2;
var callback1;
var callback2;
var next1;
var next2;
var next = false;
var max_id_1;
var max_id_2;
var userID;
var feed1;
var feed2;
function _createRequests() {
if (user1 === undefined) {
url = 'https://api.instagram.com/v1/tags/'
+ tag
+ '/media/recent?client_id='
+ clientID1;
_loadResults(next);
} else {
_loadResults(next);
}
}
function getUserFeed(user, clientId) {
// need to look up user id using username in order to gather user posts
return $.ajax({
dataType: 'jsonp',
url: "https://api.instagram.com/v1/users/search?q="
+ user
+ "&client_id="
+ clientId,
success: function(response){
userID = response.data[0].id;
url = 'https://api.instagram.com/v1/users/'
+ userID
+ '/media/recent/?client_id='
+ clientId;
}
});
}
function mergeResults(response1, response2) {
var combined = response1[0].data.concat(response2[0].data);
var sorted = sortObject(combined);
_processData(sorted)
}
function sortObject(obj) {
var arr = [];
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
arr.push({
'key': prop,
'value': obj[prop]
});
}
}
arr.sort(function(a, b) { return a.created_time - b.created_time; });
return(arr);
}
function _loadResults(next) {
$.when(
$.ajax({
dataType: 'jsonp',
url: "https://api.instagram.com/v1/users/search?q="
+ user1
+ "&client_id="
+ clientID1,
success: function(response){
userID1 = response.data[0].id;
if (next == true) {
url1 = next1;
} else {
url1 = 'https://api.instagram.com/v1/users/'
+ userID1
+ '/media/recent/?client_id='
+ clientID1;
}
}
}),
$.ajax({
dataType: 'jsonp',
url: "https://api.instagram.com/v1/users/search?q="
+ user2
+ "&client_id="
+ clientID2,
success: function(response){
userID2 = response.data[0].id;
if (next == true) {
url2 = next2;
} else {
url2 = 'https://api.instagram.com/v1/users/'
+ userID2
+ '/media/recent/?client_id='
+ clientID2;
}
}
})
).done(function( feed1, feed2 ) {
$.when(
$.ajax({
dataType: 'jsonp',
url: url1,
success: function(response){
next1 = response.pagination.next_url;
max_id_1 = response.pagination.next_max_id;
getResponse(response);
}
}),
$.ajax({
dataType: 'jsonp',
url: url2,
success: function(response){
next2 = response.pagination.next_url;
max_id_2 = response.pagination.next_max_id;
getResponse(response);
}
})
).done(function( response1, response2 ) {
mergeResults(response1, response2);
});
});
};
function getResponse(response) {
return response;
}
function _getUserId(name) {
$.ajax({
dataType: 'jsonp',
url: "https://api.instagram.com/v1/users/search?q="
+ name
+ "&client_id="
+ clientID,
success: function(response){
return response.data[0].id;
}
});
}
function _processData(response) {
if(response != null){
var container = $('<div class="instagram-posts" />');
$(response).each(function(index,obj){
var post = $('<div class="'+obj.value.user.username+' item item'+index+'"></div>');
var postmeta = $('<div class="instaMeta" style="display:none"></div>');
postmeta.append('<div class="instaName">'+obj.value.user.username+'</div>');
if(obj.value.caption){
try {
postmeta.append('<div class="instaComment">'+twitterify(obj.value.caption.text)+'</div>');
} catch(e) {
}
}
postmeta.append('<div class="instaLikesAndComments"><i class="fa fa-heart"></i> '+obj.value.likes.count+' <i class="fa fa-comment"></i> '+obj.value.comments.count+'</div>');
postmeta.append('<a class="fancybox instaView" href="#instagram'+index+'">view</a>');
post.append(postmeta);
var postmodal = $('<div class="instaModalsWrapper" style="display:none"></div>');
var postmodalCounter = $('<div id="instagram'+index+'" class="instaModal"></div>');
postmodalCounter.append($('<div class="instaHero"><img src="'+obj.value.images.standard_resolution.url+'" width="520" height="520" alt="'+obj.value.user.username+'"/></div>'));
var postmodalContent = $('<div class="instaContent"></div>');
postmodalContent.append($('<div class="instaThumb"><img src="'+obj.value.user.profile_picture+'" width="60" height="60" alt="'+obj.value.user.username+'"/></div>'));
postmodalContent.append($('<div class="instaName">'+obj.value.user.username+'</div>'));
postmodalContent.append($('<div class="clear"></div>'));
if (obj.value.caption) {
postmodalContent.append($('<div class="instaComment">'+twitterify(obj.value.caption.text)+'</div>'));
}
postmodalContent.append($('<div class="instaLikes"><i class="fa fa-heart">'+obj.value.likes.count+'</i></div>'));
if (obj.value.comments.data) {
var postmodalComments = $('<ol class="instaCommentThread"></ol>');
$.each( obj.value.comments.data, function( i, val ) {
postmodalComments.append('<li><a class="commenterUsername" href="https://instagram.com/'+val.from.username+'" target="_blank" title="See '+val.from.username+'\'s Instagram feed">'+val.from.username+'</a> '+twitterify(val.text)+'</li>');
});
postmodalContent.append(postmodalComments);
}
postmodalContent.append($('<div class="instaFollow"><a href="http://www.instagram.com/'+obj.value.user.username+'" target="_blank">Follow Us on Instagram</a></div>'));
postmodalCounter.append(postmodalContent);
postmodal.append(postmodalCounter);
post.append('<img src="'+obj.value.images.standard_resolution.url+'" width="223" height="223" alt="'+obj.value.user.username+'"/>');
container.append(post);
container.append(postmodal);
});
$(imageContainer).append(container);
next = true;
var isotopeContainer = $('#instagramGalleryWrapper .instagram-posts');
isotopeContainer.imagesLoaded( function(){
$('#instagramGalleryWrapper .instagram-posts').isotope({
itemSelector : '.item',
layoutMode : 'fitRows'
});
});
$('.instaMeta').hide();
$( "#instagramGalleryWrapper .instagram-posts .item" ).each(function( index ) {
console.log(index);
$(this).hoverIntent(
function(){
console.log("hover!");
//$(this).find('.instaMeta').slideDown('fast', function() { });
$(this).find('.instaMeta').fadeIn('fast', function() { });
},
function(){
//$(this).find('.instaMeta').slideUp('fast', function() { });
$(this).find('.instaMeta').hide();
});
});
$('#filterFeed a').click(function(e){
e.preventDefault();
var selector = $(this).attr('data-filter');
isotopeContainer.isotope({ filter: selector });
$('#filterFeed a.selected').removeClass('selected');
$(this).addClass('selected');
});
}
};
var loadingImages = false;
function _loadNext() {
if (loadingImages || (url1 == next1 && url2 == next2)) {
return false;
}else{
loadingImages = true;
_loadResults(next);
loadingImages = false;
}
}
function getParameterByName(url, name) {
name = name.replace(/[[]/, "[").replace(/[]]/, "]");
var regex = new RegExp("[?&]" + name + "=([^&#]*)"),
results = regex.exec(url);
return results === null ? "" : decodeURIComponent(results[1].replace(/+/g, " "));
}
$(window).scroll(function() {
if(
$(document).height() - scrollDistance) {
_loadNext(next);
}
});
_createRequests();
}
function twitterify(text) {
return text
// URLS
.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,
"<a href='$1' target='_blank'>$1</a>")
// Hashtags
.replace(/\B#([^ ]+)\b/ig,
"<a href='https://instagram.com/explore/tags/$1' target='_blank'>#$1</a>")
// Users
.replace(/\B@([^ ]+)\b/ig,"<a href='http://instagram.com/$1' target='_blank'>@$1</a>");
}