Tuesday, March 1, 2016

Fetch / Embed instagram images in your website

Fetch / Embed instagram images in your website
  1. Create a client and get client id
    Go to following url and click on 'Register a new client' on top
    Fill in the form

    Don't forget to enable implicit authentication
  2. 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
  3. Find user id corresponding to client
    Your access code will be of following structure
    First portion of your access token will be your user id
  4. 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 != '') {
            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) {
                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 {


<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>

No comments:

Post a Comment