Search code examples
jqueryajaxapisearchinstagram

How To Search Instagram via API Query?


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.


Solution

  • 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 :)