jquery - How To Search Instagram via API Query?

Question

I would like to build a small 'instant image search' app powered by Instagram photos. This would be like Google Instant where you start typing and results are displayed/updated as you type more letters.

You can see a live demo app powered by Google Images instead. I know this is possible with larger engines (Google, Yahoo!, Bing) but I have no idea if Instagram will allow this. Can anybody familiar with the API offer help on this?

If it's not possible to search via the API that makes sense. I just wanted to check here first since there are so many knowledgeable programmers.

Answer 1

First of all, and in case you didn't knew, there's already one similar (at least) web app. That being said, let's go to the answer:

You need to get your client_id, since you need it to call the API (More info here). You should be making calls to this endpoint (More info about Instagram's API endpoints here, you should read this :P):

https://api.instagram.com/v1/tags/SEARCH-TAG/media/recent?client_id=CLIENT-ID&callback=YOUR-CALLBACK

Of course, change the SEARCH-TAG with user input, CLIENT-ID with the one you got before and YOUR-CALLBACK with your callback function's name.

The response to this call comes in JSONP and looks like this (Taken from the API's page):

{
    "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
    },
    ...
    ]
}

Then you just need to process this response and do whatever you want with it :)