instagram feed from token
by lemon kazi
HTML
<p>
https://www.findinstaid.com/
https://instagram.pixelunion.net/
The 2 images below should <b>NOT</b> match<br>
if they are, its because Instagram is not honoring "max_id" for public users
</p>
<p>
Url 1: <a id='url1' target="_blank"></a><br>
</p>
<p>
Url 2: <a id='url2' target="_blank"></a><br>
</p>
<div class="container">
<img id="img1">
<img id="img2" >
<div class="contect-img-insta">
</div>
<div class="contect-img">
<div class="owl-carousel owl-theme">
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav"></div>
</div>
</div>
</div>
</div>
SCSS
.container {
img {
display: block;
width: 45%;
float: left;
}
overflow:hidden;
}
JavaScript
var urlPrefix = 'https://www.instagram.com/lemon_kazi/';
var apiUrl = urlPrefix+'?__a=1';
$('#url1').attr('href', apiUrl).text(apiUrl);
function updatepage(id, src) {
$('#img'+id).attr('src', src);
}
/**********************************************************
Public User section
*/
function getFirstImg(json) {
return json.graphql.user.edge_owner_to_timeline_media.edges[1].node.display_url;
}
function getCursor(json) {
return json.graphql.user.edge_owner_to_timeline_media.page_info.end_cursor;
}
function makeNextReqeust(end_cursor) {
var maxIDUrl = urlPrefix+'?__a=1&max_id='+end_cursor
$('#url2').attr('href', maxIDUrl).text(maxIDUrl);
$.getJSON(maxIDUrl, function(json){
var img = getFirstImg(json);
updatepage(2, img);
})
}
$.getJSON(apiUrl, function(json){
var img = getFirstImg(json);
updatepage(1, img);
var end_cursor = getCursor(json);
$('#cursor').text('end_cursor='+end_cursor);
makeNextReqeust(end_cursor);
})
//instagram feed
var token = '3957159322.1677ed0.60175cfe27524f3da51f512f6a67cbe0'; // learn how to obtain it below
var userid = 3957159322; // User ID - get it in source HTML of your Instagram profile or look at the next example :)
if ($(window).width() < 769) {
var num_photos = 6; // how much photos do you want to get
}
else {
var num_photos = 9; // how much photos do you want to get
}
$.ajax({
url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // or /users/self/media/recent for Sandbox
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, count: num_photos},
success: function(data){
for( x in data.data ){
//console.log(data.data);
if(data.data[x].carousel_media){
for( c in data.data[x].carousel_media ){
$('.contect-img-insta').append('<div class="sns-cell"><img...