Return first image source from google images

Google Custom Search API now includes images. You are limited to 100 queries/day before billing, but it is the only legitimate way to use Google to do your searching for you.

If the link misdirects:

Calling styles

There is more than one way to invoke the API:

REST

Representational State Transfer, in the Google Custom Search API is somewhat different from traditional REST. Instead of providing access to resources, the API provides access to a service. As a result, the API provides a single URI that acts as the service endpoint.

You access the Google Custom Search API service endpoint using the GET REST HTTP verb, as described in API operations. You pass in the details of all search requests as query parameters.

The specific format for the single Google Custom Search API URI is:

https://www.googleapis.com/customsearch/v1?parameters

where parameters are any parameters to apply to the query. See Working with search results and and Query parameter reference in the Using REST document for details.

Here is an example of how this works in the Google Custom Search API, which searches a test Custom Search Engine for lectures:

GET https://www.googleapis.com/customsearch/v1?key=INSERT-YOUR-KEY&cx=017576662512468239146:omuauf_lfve&q=lectures

REST from JavaScript

You can invoke the Google Custom Search API using REST from JavaScript, using the callback query parameter and a callback function. This allows you to write rich applications that display Custom Search data without writing any server side code.

The following example uses this approach to display the first page of search results for the query tomato:

<html>
  <head>
    <title>JSON/Atom Custom Search API Example</title>
  </head>
  <body>
    <div id="content"></div>
    <script>
      function hndlr(response) {
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        // in production code, item.htmlTitle should have the HTML entities escaped.
        document.getElementById("content").innerHTML += "<br>" + item.htmlTitle;
      }
    }
    </script>
    <script src="https://www.googleapis.com/customsearch/v1?key=YOUR-KEY&cx=017576662512468239146:omuauf_lfve&q=tomato&callback=hndlr">
    </script>
  </body>
</html>

You would, of course, update the src of the script to include the value of the input from which you are searching.


You can use the Google Image Search API to do this. Unfortunately it has been depracated so you may find the number of queries per day you can make to be limited. I am unsure if there is a new API to replace it.

Tags:

Google

Images

Recent Posts