Beberapa waktu yang lalu Dwohoo.com menambahkan fitur untuk menampilkan daftar foto yang berkaitan dengan destinasi yang sedang dibahas dalam suatu artikel. Foto-foto tersebut diambil secara langsung dari Instagram.
Instagram memiliki API bagi para developer yang hendak mengembangkan aplikasi lanjutan, tapi kali ini saya tidak menggunakan API tersebut. Selain ribet, tahapannya juga cukup banyak (auth, token, dll) sehingga memerlukan beban waktu yang lebih untuk memuat foto-foto yang diinginkan.
Untungnya halaman Explore / Search Instagram tidak tertutup, dapat diakses secara publik. Hal ini yang dapat dimanfaatkan untuk melakukan parsing halaman dan mengambil bagian-bagian element yang diperlukan.
Dan kebiasaan para web developer…
Semua data item disimpan dalam variabel window._sharedData dalam format JSON, dengan menggunakan regular expression (preg_match() di PHP) kita dapat melakukan filter hanya mengambil value dari variabel tersebut.
/<script type="text\/javascript">window._sharedData =(.*)\;<\/script>/
Sebagai contoh, berikut script PHP untuk mendapatkan array yang berisi ID dan URL thumb.
$_ig_tag = 'senggigi';
$_ig_tag_url = 'https://www.instagram.com/explore/tags/';
$_ig_post_url = 'https://www.instagram.com/p/';
$lines_string = file_get_contents($_ig_tag_url . $_ig_tag);
/**
* format pengecekan tanggal 11 maret 2017
* sewaktu-waktu dapat berubah tergantung developer Instagram
*/
preg_match('/<script type="text\/javascript">window._sharedData =(.*)\;<\/script>/', $lines_string, $matches);
if(count($matches) > 0):
$_json_data = json_decode($matches[1], true);
$_ig_photos = array();
if (isset($_json_data['entry_data']['TagPage'][0]['tag']['top_posts']['nodes'])) {
foreach ($_json_data['entry_data']['TagPage'][0]['tag']['top_posts']['nodes'] as $_post)
$_ig_photos[$_post['code']] = $_post['thumbnail_src'];
}
endif;
Dari script diatas kita sudah mendapat array $_ig_photos yang berisi ID dan thumb foto, tinggal dikombinasikan dengan $_ig_tag_url dan $_ig_post_url saat di-render dalam bentuk HTML.
