Here's a simple example of running an image search against google's 'customsearch' api... Getting their API to work, however, is NOT simple.
<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#search").click(function(){
$.getJSON("https://www.googleapis.com/customsearch/v1", {
q: $("#searchterm").val(),
alt: "json",
searchType: "image",
cx: "0001100:ei392xnwj-ee",
key: "Your_Very_Long_CustomSearch_API_Key",
filter: "1",
num: "10",
fileType: "jpg",
imgType: "photo"
},
function (data) {
$.each(data.items, function(i,item){
$("#results").append('<img class="img-responsive" src="' + item.link + '">');
});
});
});
</script>
There are three tricks:
-
Obtain an API key (for the
key
parameter) -
Create a custom search engine (for the
cx
parameter) -
Tell your custom search engine to allow image search.
More detail:
To do this you need to "enable" the API.
Steps:
-
Go to https://console.developers.google.com/ and sign up as a developer if you haven't already.
-
Then create a new project, and give it a name. Then wait for it to be 'created'.
-
On the 'dashboard' for the project you just created, click
+ Enable API
and find the 'Custom Search' API.
4 Click the Enable
button which is up near the top of the screen where you easily overlook it.
-
Click on 'Create Credentials' then click on 'What credentials do I need?'
-
It will then create an API key for you.
This is so ridiculously convoluted.
At this point you can easily add 'restrictions' to the API key to prevent 'quota theft'. So yeh, do that if you want.
You can see your custom search engines here: https://cse.google.com/cse/all
I wanted one that lets me search the entire internet. There's a trick to doing this.
You need to first create one that searches a specific site. (You have not choice here... you must specify a site)
Then edit it so that it searches the entire internet but favors the site you added.
Then remove the site you added.
Steps are:
-
go to: https://cse.google.com/cse/all and click
Add
-
Put some url in the
Sites to Search
box. -
Click 'Create'.
-
go to https://cse.google.com/cse/all and click the custom search engine you just added.
-
Changes 'Sites to Search' from 'Search only included sites' to 'Search the entire web but emphasize included sites'
-
Delete the site from underneath 'Sites to Search'.
-
Click update. (or follow the next few steps before clicking update...)
Now you also need to get the value to put in cx
.
In the Details section click on Search Engine ID
and you will see a small modal popup that says something like:
Your search engine ID:
001100:ei392xnwj-ee
Copy that and use it for the cx
parameter in your search, above.
By default a customer search engine does not allow image search.
If you don't do step 3 you will get a result of "0 records found".
Just below the details section for your custom search engine, there is an 'image search' setting which defaults to Off
.
Turn it On
.
Then click the Update
button at the bottom of the form.