Creating Google Custom Search Engine

1498

Google search engine is the world’s most used search engine. Google search is known for its high quality, relevant results. Google custom search engine works on the core technology used in advanced Google Search, so the result will be similar to that in quality and relevance. Integrating this Custom Search engine to your website make the search more clearer and easier for your website visitors to get the information they need. This Custom search engine comes with a  lot of options including the customization of the look and feel of the search results, making money from the search using Adsense for Search, Linking the Analytics account to find the user behavior.

Creating Google Custom Search Engine for your Website

Sign-in to Google custom Search Engine from this URL using your Google Account. If you are logging-in for the first time you will be landing automatically in the New Search Engine page. Enter the site links where you want to use the custom search, select the language and enter the name for your search engine and click create.

Google-Custom-Search-Engine-GetCoolTricks-1
Enter the details and click Create

You will be taken to a page where you see three options. If you don not want to modify your search engine, you can directly get the code and use it in your website by clicking the Get Code button as shown. Click the control panel button or Edit search engine from the left sidebar to edit your search engine.

Google-Custom-Search-Engine-GetCoolTricks-2
Edit the Search Engine for advanced setup

In the Search Engine setup menu you will see five tabs. play around and choose the options that best suites your website and your needs. If you want to Monetize your search with ads you can link your Adsense account in the Make Money tab. Click the save button at the bottom to save your search engine settings.

Google-Custom-Search-Engine-GetCoolTricks-3
Play with the settings and select the best options that suites you need

To change the look and feel of your search engine click the Look and Feel option from the left sidebar. This has the options and settings to change the layout, themes and customizing the search box, changing the colors of the links and the texts of the search results can be found here. Refer these images for details. The best layout for the website is ‘Two Page‘ layout. Select that and click save. We prefer Two Page layout. If you like other layouts you can choose anything and click save.

Google-Custom-Search-Engine-GetCoolTricks-4
Select Two Page layout and click save

Select a theme that matches your website from the themes tab as shown.

Google-Custom-Search-Engine-GetCoolTricks-5
Select the theme that matches your website

If you feel that the theme is not good, navigate to the customize tab. Colors of almost all the elements like search box, search button, links, etc, can be changed here. Refer the image for details. Navigate to thumbnail tab and turn on thumbnails if you want thumbnails to appear on the results.

Google-Custom-Search-Engine-GetCoolTricks-6
Customize the search engine

Advanced features like Autocomplete, Refinement, Synonyms can be enabled or disabled in the Search features options from the left sidebar. Refer this image for details.

Google-Custom-Search-Engine-GetCoolTricks-8
Advanced search features can be enabled or disabled here

Almost all customizations are over now. You can get the code and integrate it in to your website. You can get the code either from the Setup tab or from the Look and feel tab. Check the image for details.

Google-Custom-Search-Engine-GetCoolTricks-9
Get the code for the search engine

Since we have selected Two page layout you will see two different codes. One is to render the search box and another one is to show the result. The first code you see when you click the Get code button is to render the Search box. Copy it and paste it to the place where you want to show the Search box. Click the Search Result Details at the top to enter the URL, where your results has to appear. Then click the Get code for search result button at the bottom to get the code for search results. Check the image for details.

Google-Custom-Search-Engine-GetCoolTricks-10
Get the codes for the search box
Google-Custom-Search-Engine-GetCoolTricks-11
Get the code for search results

Now check the search box for its proper working. If you don’t feel that the look is good, you can modify the search engine at any time. Here is the sample code for the search engine. Replace the search engine ID with your search engine ID and the http://domain.com/search/ with your search result page URL.

Code to render the Search Box
<script>
  (function() {
    var cx = 'Your-search-engine-ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only resultsUrl="http://domain.com/search/"></gcse:searchbox-only>
Code to show the Search Result along with the search box
<script>
  (function() {
    var cx = 'Your-search-engine-ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
Note

You don’t need to change the code once it is integrated to your website even if you do some customization later. The changes will take effect automatically.

Other People are reading
Hope You liked this Tutorial. For any clarifications and suggestions use the comment box below. Subscribe to our Newsletter for getting the future updates directly in your inbox.
Free Email Updates !
Join the visitors who are receiving our newsletter and receive the Daily Mass Readings, Prayers and other updates directly in your inbox.
We respect your privacy and take protecting it seriously.