まず第一に、ご存じないかもしれませんが、(少なくとも)同様の Web アプリが既に 1 つあります。そうは言っても、答えに行きましょう:
API を呼び出す必要があるため、 client_idを取得する必要があります (詳細はこちら)。このエンドポイントへの呼び出しを行う必要があります(Instagram の API エンドポイントについての詳細はこちら、こちらをお読みください:P):
https://api.instagram.com/v1/tags/SEARCH-TAG/media/recent?client_id=CLIENT-ID&callback=YOUR-CALLBACK
もちろん、SEARCH-TAG
with user inputを、CLIENT-ID
前に取得したものとYOUR-CALLBACK
コールバック関数の名前で変更します。
この呼び出しに対する応答はJSONPで送信され、次のようになります (API のページから取得)。
{
"data": [{
"type": "image",
"filter": "Earlybird",
"tags": ["snow"],
"comments": {
"data": [{
"created_time": "1296703540",
"text": "Snow",
"from": {
"username": "emohatch",
"username": "Dave",
"id": "1242695"
},
"id": "26589964"
},
{
"created_time": "1296707889",
"text": "#snow",
"from": {
"username": "emohatch",
"username": "Emo Hatch",
"id": "1242695"
},
"id": "26609649"
}],
"count": 3
}
"caption": {
"created_time": "1296703540",
"text": "#Snow",
"from": {
"username": "emohatch",
"id": "1242695"
},
"id": "26589964"
},
"likes": {
"count": 1,
"data": [{
"username": "mikeyk",
"full_name": "Mike Krieger",
"id": "4",
"profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_1242695_75sq_1293915800.jpg"
}]
},
"link": "http://instagr.am/p/BWl6P/",
"user": {
"username": "emohatch",
"profile_picture": "http://distillery.s3.amazonaws.com/profiles/profile_1242695_75sq_1293915800.jpg",
"id": "1242695",
"full_name": "Dave"
},
"created_time": "1296703536",
"images": {
"low_resolution": {
"url": "http://distillery.s3.amazonaws.com/media/2011/02/02/f9443f3443484c40b4792fa7c76214d5_6.jpg",
"width": 306,
"height": 306
},
"thumbnail": {
"url": "http://distillery.s3.amazonaws.com/media/2011/02/02/f9443f3443484c40b4792fa7c76214d5_5.jpg",
"width": 150,
"height": 150
},
"standard_resolution": {
"url": "http://distillery.s3.amazonaws.com/media/2011/02/02/f9443f3443484c40b4792fa7c76214d5_7.jpg",
"width": 612,
"height": 612
}
},
"id": "22699663",
"location": null
},
...
]
}
次に、この応答を処理して、必要なことを行うだけです:)