Introduction
This article explains how to addi 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:
- First we create a Google account.
- 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]()
- 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.
- When you click on the create button code is generated. You copy and paste this code into your web application.
![cg3.jpg]()
- Click on the link "Edit your search settings" to change the setting.
![cg4.jpg]()
- 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]()
- 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:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>c-sharpcorner</title>
</head>
<body>
<script>
(function () {
var cx = '001111315940323651598:b5c5-62jb84';
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style="width:350px;"><gcse:search></gcse:search>
</body>
</html>
- Now execute the application:
![cg5.jpg]()
Enter any topic to search for and click on "Search". It looks like this:
![cg6.jpg]()