Custom Google WebSearch for your own web site

How to search the content in your own website using google services?

If you are the owner of the web-site with very good content and you are thinking to place the search feature in your site then now its very easy using the Custom google websearch API.

Custom Google websearch service API give us the option to display the google search results on our own web-site. Google will give the search result of our own site links only, so you can say that its a search feature of your own site. what you need to do is, You need to create a Custom Search Engine using your google account, then just set the below search form and the below script code on the result page. please replace the ClientID with your cx code.

 
Search Form
 
<form id="form1" name="form1" action="">  
    <input type="hidden" name="cx" value="ClientID" />
    <input type="hidden" name="cof" value="FORID:11;NB:1" />              
    <label for="Search">Search </label><input name="q" type="text" id="Search" value="Search" />
    <input class="sbmt_btn" type="submit" value="Go"/>                        
</form>
 
Script Code
 
<!-- Google Search Result Snippet Begins -->
	<div id="results_ClientID" style="background:transparent; overflow:hidden; align:left; height:1100px;"></div>
		<script type="text/javascript">
			  var googleSearchIframeName = "results_ClientID";
			  var googleSearchFormName = "searchbox_ClientID";
			  var googleSearchFrameWidth = 980;                          
			  var googleSearchFrameborder = 0;
			  var googleSearchDomain = "www.google.com";
			  var googleSearchPath = "/cse";			  
		</script>
	<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<!-- Google Search Result Snippet Ends -->

Now there are many question in your mind like,

How to change the background on custom google results page?
How to set background color with custom google results?
How to change the font style of custom google search?
Can we change the designing of the custom google search result page?

When you implement the above custom search then there is some limitation on designing part, as its a iframe provide by the google with their own css, you are not able to change any designing part in this iframe. But if you want to create your own design using the XML API where you need to work out with some programming stuff.

If you are a good programmer then its not as difficult as you think, below is the code through which you get the custom google results set in the XML format and then you can process the xml using the xml parser and display the data in your own designing templates.

	$ClientID = 'Set Your Client ID';
	$url = 'https://www.google.com/cse?cx='.$ClientID.'&client=google-csbe&output=xml_no_dtd&q='.$q.'&num=10&start='.$start;
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$getxmldata = curl_exec($ch);                
	curl_close($ch);

q is the parameter of your search text(search keywords),
num is the parameter to get how many results you need in the XML, maximum you can set 20 results.
start is the paramenter which indicate from where you need results set as its in the SQL statement.
ClientID is the cx code of your custom search engine

when you run the above code then you get the results set in the $getxmldata variable, Data is in the XML format, so you need to manipulate it and display as you need on your custom template.

Please visit below links for more information on XML version of the Custom Search API.
https://developers.google.com/custom-search/docs/xml_results?hl=en