Post
Ask Question

Using Google Custom Search API in Web API

Introduction

This article explains how to add a Google Custom Search in the Web API.

Google Custom Search API

The Google Custom Search API allows developers to create a search engine created by using the Google core search technology. Developers can search a website or collection of websites according to your needs and interests in the website. Google generates the source code for the search box. You can copy this code and paste the code into your web application.

Procedure for adding the Google Custom Search API:

  1. First we create a Google account.
  2. For integrating the Google Custom Search you need to login with your Gmail id on this link:
    http://www.google.com/cse/manage/create?Get+Started=Customize+Your+Own+Search+Engine

    cg1.jpg
  3. After login in the page of the preceding link a window will open that gets the information about the search engine.

    cg2.jpg
    In the image above there is some information that you can see:
    • Site for search: In this bock you write your site for searching.
    • Language: Select the language for the website.
    • Name: It is based on the website that you fill in the site for search box.
    • Terms of services: This link describes the terms of services of the Google.
    • Create: At last you click on the create button for generating the script.
  4. When you click on the create button code is generated. You copy and paste this code into your web application.

    cg3.jpg

  5. Click on the link "Edit your search settings" to change the setting.

    cg4.jpg
  6. Create Web API application:
    • Start Visual Studio 2012.
    • From the start window select "Installed" -> "Visual C#" -> "Web".
    • Select "ASP.NET MVC4 Web Application" and click the "Ok" button.
      cg7.jpg
    • From the"MVC4 Project" window select "Web API".

      cg8.jpg
    • Click the "OK" button.
  7. Now copy the code and paste it into the "Index.cshtml" file. This file exists in:
    • In the "Solution Explorer".
    • Select the "Home folder".
    • Select "Index.cshtml file".

      cg9.jpg

      The code looks like this:
      1. <!DOCTYPE>  
      2. <html xmlns="http://www.w3.org/1999/xhtml">  
      3. <head>  
      4.     <title>c-sharpcorner</title>  
      5. </head>  
      6.     <body>  
      7. <script>  
      8.     (function () {  
      9.         var cx = '001111315940323651598:b5c5-62jb84';  
      10.         var gcse = document.createElement('script'); gcse.type = 'text/javascript';  
      11.         gcse.async = true;  
      12.         gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +  
      13.             '//www.google.com/cse/cse.js?cx=' + cx;  
      14.         var s = document.getElementsByTagName('script')[0];  
      15.         s.parentNode.insertBefore(gcse, s);  
      16.     })();  
      17. </script>  
      18. <div style="width:350px;"><gcse:search></gcse:search>  
      19. </body>  
      20. </html>  
  8. Now execute the application:

    cg5.jpg

    Enter any topic to search for and click on "Search". It looks like this:

    cg6.jpg 


Similar Articles