blog

HOW TO USE THE INSTAGRAM API

Instagram is widely used, with literally millions of people constantly uploading pictures.

It makes sense, with such a large user base, to create an API. Today we’ll be looking into how to use it.

AUTHENTICATION

The first thing you need to do is to register as a developer with Instagram.

You’ll need to register your application name, a description, your website and a redirect URL.

After you’ve done this you’ll receive your Client ID and Client Secret, but this is where it gets a little tricky; you’ll also need an access token.

To get your access token, you need to go to this URL using your data:

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

You’ll be redirected to a URL that looks something like this:

http://yourredirectwebsite.com/#access_token=806401368.f59def8.e8efe19844fd46238d592f9f20216f88

In this case, your access token would be:

806401368.f59def8.e8efe19844fd46238d592f9f20216f88

RETRIEVING POPULAR PICTURES

When it comes to the actual JavaScript, we just need a simple AJAX call, because the Instagram API returns a JSON response.

Let’s start with the HTML we’ll need:

<h1>Popular Pictures</h1>
<ul class="popular">
</ul>

Now the fun part. To retrieve the most popular pictures we need a GET request to a URL that looks like this (but uses your access token):

https://api.instagram.com/v1/media/popular?access_token=youraccesstoken

So, our code looks like this:

    $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/v1/media/popular?access_token=youraccesstoken",
      success: function(data) {
        // placing the images on the page
        }
      }
    });

As you can see, it’s a standard AJAX call, we first set the type as GET, the dataType is jsonp because we’re loading cross domain, the set the cache to false, and finally add the URL.

Now we just need to populate the success function with the necessary code to display the images on our site:

    for (var i = 0; i < 6; i++) {
          $(".popular").append("<li><a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url + "'></img></a></li>");
    }

In order to do this, I’m using a for loop that will stop after 6 images, then inside the loop appending a list item and image.

GETTING A USER’S INFORMATION

Getting the most popular images is easy, but more commonly we need to get a specific user’s, usually our own.

To get a user’s images, the URL for our GET statement changes slightly:

https://api.instagram.com/v1/users/usert_id/?access_token=youraccesstoken

Then we need the user’s ID.

Now we need to write the ajax call that will handle this:

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "https://api.instagram.com/v1/users/25025320/?access_token=youraccesstoken",
  success: function(data) {
    $('.name').text(data.data.username);
    $('.tagline').text(data.data.bio);
  }
});

As you can see, all we changed here was removing the no cache instruction.

CONCLUSION

Once you get past the rather convoluted authentication process, the Instagram API is incredibly simple to use.

If you have an Instagram account yourself, this is a great way of keeping images on your personal site up to date.

Related posts

7 Replies to “HOW TO USE THE INSTAGRAM API
  1. Restylane乃一系列用於美顏的長效透明質酸產品。 Restylane療程能有效撫平皺紋、美化臉型輪廓及唇部,並可改善膚質及肌膚的彈性。Restylane透明質酸作用原理 Restylane透明質酸均以非動物來源的透明質酸作為原料,獨有的NASHA™專利技術研製而成。微量Restylane透明質酸凝膠到皮膚中,可以讓您的面部肌膚恢復豐盈飽滿。 Restylane透明質酸中的透明質酸與人體內的天然透明質酸十分相似,使用前無需進行皮膚測試,引起過敏反應的機率亦極低。

    http://cosmedicbook.com/treatments/info/Lumenis-LightSheer-Desire真空激光脫毛

  2. 加強優化面部輪廓,可被身體完全吸引,能自然地修飾面部輪廓 功效可長達24個月以上 JUVEDERM的特點: 效果立即可見 非永久性 非手術性 安全有效 效果自然 JUVEDERM獲歐盟(CE)及美國及藥物管理局(FDA)認證 首先及唯一獲得FDA認證在首次療程後能維持長達一年2-4功效 新世代專員Hylacross科技為產品帶來獨特的物理特質,包括凝聚力、支撐力及柔順度 8點提升 這是一套由全球著名醫學美容醫生Dr. Maurício de Maio,以JUVÉDERM®系列透明質酸產品為基礎而研發的面部優化療程,藉著簡單程序便達致面部優化效果,不需進行手術,減低風險。 此療程會根據病人的個別情況,重點針對面部8個最常因流失膠原蛋白及彈性纖維而凹陷的位置,再依據特定的順序,從顴骨至下巴位置配合JUVÉDERM®系列的透明質酸產品進行療程,從而改善這些位置的豐盈度及滑溜度,全面性優化面部輪廓。

    http://cosmedicbook.com/treatments/info/Co2激光脫癦

Leave a Reply