
var $container = this;
Settings variable is to overview of your widget, how you wanna look it. Like image size, limit of posts, etc.
settings = $.extend({
get : '',
imageSize: 320,
limit : 12,
links : true,
squareImages: true,
template: ''
});
This place is where you need to build a frame for your widget if you need one.
buildTemplate = function(data, image, link) {
String.prototype.allReplace = function(obj) {
var retStr = this;
for (var x in obj) {
retStr = retStr.replace(new RegExp(x, 'g'), obj[x]);
}
return retStr;
};
var postCaption = data.edge_media_to_caption.edges[0];
postCaption = postCaption == undefined ? "":postCaption.node.text;
var templateCodes = {
'{{caption}}': postCaption,
'{{comments}}': data.edge_media_to_comment.count,
'{{image}}': image,
'{{likes}}': data.edge_liked_by.count,
'{{link}}': link
}
var template = settings.template.allReplace(templateCodes);
return template;
}
This is where you hit the API and get the data as JSON and you will have all the information about their posts.
$.ajax({
url: http://www.instagram.com/<insta_userid>/?__a=1&ig_pr=2,
success: function(data) {
var nodes;
nodes = data.graphql.user.edge_owner_to_timeline_media.edges;
$container.html("");
var RandNum = 0;
var limitPost = 0;
if(nodes.length < settings.limit){
limitPost = nodes.length;
}else{
limitPost = settings.limit;
}
for (var i = RandNum; i < (RandNum + limitPost); i++) {
post = nodes[i].node;
image = $('<img/>');
imageUrl = '';
linkUrl = 'http://www.instagram.com/p/' + post.shortcode + '/';
if(settings.squareImages) {
var size; // is an index in an array
switch(settings.imageSize) {
case 150:
size = 0;
break;
case 240:
size = 1;
break;
case 320:
size = 2;
break;
case 480:
size = 3;
break;
case 640:
size = 4;
break;
}
imageUrl = post.thumbnail_resources[size].src;
} else {
imageUrl = post.display_url;
}
image.attr('src', imageUrl);
if(settings.template == '') {
if(settings.links) {
link = $('<a/>',{
href: linkUrl,
target: '_blank'
}).append(image);
$container.append(link);
} else {
$container.append(image);
}
} else {
$container.append(buildTemplate(post, imageUrl, linkUrl));
}
}
},
error: function(err) {
switch(err.status) {
case 404:
console.warn('Sorry, but there was no results for that ');
break;
default:
console.warn('An unknow error happend');
break;
}
}
});
If you are looking for the only API for instagram RSS feed for a user id:
http://www.instagram.com/<insta_userid>/?__a=1&ig_pr=2
If you are good at coding and stuff just use the above url to create your own feed, for the just play with the code I've given above and leave a comment if you have any queries
You may also like
Other Similar Blog Post:
Google News RSS Feed API with Images
Popular Instagram Hashtags - Category/Alphabet wise
SEO Tags: instagram, widget, jquery, js, api, rss, feed, free, latest, 2020, title, description, date, time, profile, photos, posts,
Post a Comment
Post a Comment
Feel free to ask your queries, happy to discuss with you.