Fetch / Embed instagram images in your website
- Create a client and get client id
Go to following url and click on 'Register a new client' on top
https://www.instagram.com/developer/clients/manage/
Fill in the form
Don't forget to enable implicit authentication - Retrieve your access token
Go to https://instagram.com/oauth/authorize/?client_id=YOURCLIENTIDHERE&redirect_uri=HTTP://YOURREDIRECTURLHERE.COM&response_type=token
You will be redirected to HTTP://YOURREDIRECTURLHERE.COM#access_token=XXXX
Copy the access token from url - Find user id corresponding to client
Your access code will be of following structure
userid.somethingelse.somethingelse
First portion of your access token will be your user id - Insert following javascript code
$(document).ready(function() {
var clientid = $('#INSTAGRAM_CLIENT_ID').val(); // learn how to obtain it below
var num_photos = 8; // how much photos do you want to get
var acces_token = $('#INSTAGRAM_ACCESS_TOKEN').val();
var userid = $('#INSTAGRAM_USER_ID').val();//'2214764568';
if (clientid != '' && acces_token != '' && userid != '') {
$.ajax({
url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent?access_token=' + acces_token,
dataType: 'jsonp',
type: 'GET',
data: {client_id: clientid, count: num_photos},
success: function (data) {
console.log(data);
for (x in data.data) {
$('ul#footer_insta').append('<li><a href="' + data.data[x].link + '" target="_blank"><img src="' + data.data[x].images.low_resolution.url + '"></a></li>'); // data.data[x].images.low_resolution.url - URL of image, 306Ñ…306
}
},
error: function (data) {
console.log(data); // send the error notifications to console
}
});
} else {
alert("here");
}
})
var clientid = $('#INSTAGRAM_CLIENT_ID').val(); // learn how to obtain it below
var num_photos = 8; // how much photos do you want to get
var acces_token = $('#INSTAGRAM_ACCESS_TOKEN').val();
var userid = $('#INSTAGRAM_USER_ID').val();//'2214764568';
if (clientid != '' && acces_token != '' && userid != '') {
$.ajax({
url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent?access_token=' + acces_token,
dataType: 'jsonp',
type: 'GET',
data: {client_id: clientid, count: num_photos},
success: function (data) {
console.log(data);
for (x in data.data) {
$('ul#footer_insta').append('<li><a href="' + data.data[x].link + '" target="_blank"><img src="' + data.data[x].images.low_resolution.url + '"></a></li>'); // data.data[x].images.low_resolution.url - URL of image, 306Ñ…306
}
},
error: function (data) {
console.log(data); // send the error notifications to console
}
});
} else {
alert("here");
}
})
Replace 'INSTAGRAM_ACCESS_TOKEN', 'INSTAGRAM_CLIENT_ID', 'INSTAGRAM_USER_ID' with corresponding value.
<input type="hidden" id="INSTAGRAM_ACCESS_TOKEN" value="INSTAGRAM_ACCESS_TOKEN" />
<input type="hidden" id="INSTAGRAM_CLIENT_ID" value="INSTAGRAM_CLIENT_ID" />
<input type="hidden" id="INSTAGRAM_USER_ID" value="INSTAGRAM_USER_ID" />
<ul id="footer_insta"></ul>
<input type="hidden" id="INSTAGRAM_CLIENT_ID" value="INSTAGRAM_CLIENT_ID" />
<input type="hidden" id="INSTAGRAM_USER_ID" value="INSTAGRAM_USER_ID" />
<ul id="footer_insta"></ul>
No comments:
Post a Comment