Sebagai bahasa pertukaran data, json memang sangat di butuhkan oleh banyak developer. Tidak terkecuali oleh Instagram, sebagai media social berbasis gambar sudahlah pasti dia di haruskan mempunyai API layaknya Flickr, Picasa dsb. API identik sekali dengan json, oleh karena itu sebagai programmer setidaknya kita bisa mengolah API, lebih baik lagi jika bisa membuatnya :D. Terkait dengan json, sebelumnya ox sudah menulis tentang twitter dengan judul Cara Mengolah Data Json Twitter. Sekarang olah data Instagram ceritanya. Aturan mainnya cukup sederhana karena kita pakai Plugin buatan orang, cek disini.



Kasusnya begini, kita akan mencari photo di Instagram yang mempunyai hashtag #ox69xo.

1. Persiapkan bahan

- Download plugin jquery-instagram di github. File yang dipakai hanya jquery.instagram.js
- Daftar OAuth Client, bagian ini maksudnya untuk mendapatkan client-id. Untuk demo kita pakai client-id ini saja 488ab79d6bcf4238a65addbf4975f0e2

2. Konfigurasi

Panggil jQuery dan Plugin jquery-instagram

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ox69xo.googlecode.com/files/jquery.instagram.js"></script>

Lalu sedikit konfigurasi seperti di bawah:

  <script type="text/javascript">
 $(function() {
   $(".instagram").instagram({
    hash: 'ox69xo'
  , clientId: '488ab79d6bcf4238a65addbf4975f0e2'
   });
 });
  </script>

3. Pemolesan

Berikan sedikit style, seperti ini:

body{width:900px;margin:auto;}
h1{margin:auto;font-size:100%;}
.instagram,h1 {margin-top:20px;}
.instagram .instagram-placeholder{float:left;padding:3px;}
.instagram-placeholder img{border-radius:3px;box-shadow:2px 2px 8px #999;}

Selesai. Sangat mudah untuk awam, happy ngoprek!

Sebagai bahasa pertukaran data, json memang sangat di butuhkan oleh banyak developer. Tidak terkecuali oleh Instagram , sebagai media soci...