Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

How to implement google custom search in any website

Set up a google custom search engine for your website


Do you understand why adding a custom Google search implementation in your website is a good idea ?
Let me give you some scenario to understand "custom search" better.
  • Just think, you got a frequent visitor of your site, user had read some good content on your site during last visit, now visitor has come back to look for that particular information on your site, how do you provide them a quick way to find? One obvious way can be “building a custom content search on your own for your site”, but that’s really not cool idea, when there is something ready to use custom search functionality provided by google, so you can provide the functionality just by adding few lines of ready code.
  • Another thought is, the user may go out of your site just to look for same information, so why to let user go out of your site?
Now let's see how quickly we can add custom search in your site, it's very simple, follow the steps below.

Just log into your google account and
go to developer control panel (https://cse.google.com/cse/all) , as shown picture below

Add your website url and name for custom search, you also can add multiple urls, just think if you have multiple sub domains or any other domain, where you want to find the content

add google custom search in website

Once you click on create button your search code is ready, there are some further customization also can be done, you may also turn on image search (recommended)

Implement custom search box in your website

Once you click on "Get Code" button, then a popup will give your custom code like below.
< script>
(function () {
var cx = '007420403898934477071:ouih7fyyn6i';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
< /script>
< gcse:search>< /gcse:search>
There is another additional object called < gcse:searchresults>< /gcse:searchresults>, this can be used for "custom search result display" customization.

You can implement this code anywhere on your website and enjoy google custom search functionality
 
Google Custom Search
Marketing Tips


Group Training