and google search

Add Google Search to has many good built in features and continues to add more and more functionality with each release.  Google offers a custom search service that can be added to websites to give them search functionality.  This article describes how can be configured to use Google’s custom search to provide a search box and search results page for a site.  The first part of the article describes what must be done inside of the Google Control Panel.  The second part describes what must be done in


There are two versions of custom search.  The free version is Custom Search Engine and it doesn’t allow as much visual customization and is ad supported.  The paid version is Google Site Search and it supports more visual customization, can be ad free, and also grants access to an XML API.  The differences between the two are outlined here.  I used the free version for this article, but the same configurations can be done in the paid version.

Once you have an account you can create a search engine and manage it through the Control Panel.

The look and feel must be changed from the default to a two page layout so that the search results are shown on their own page. That can be done by clicking on the Look and feel sidebar menu item and selecting the two page layout.

Google Control Panel Two Page Layout

After the layout selection has been made, the code needs to be generated.  Eventually, you’ll need to copy the code into your site. The Look and feel page has a Save & Get Code button which takes you directly to the page to get the code, or from the Setup page there is a Get Code button.  There are two code snippets to copy.  The first is the code for the search box and the second is the code for the search results page.  The JavaScript for the search box will look something like the following:

Note that the generated element has -only in it: <gcse:searchbox-only>.  Make sure it is not <gsce:searchbox> as that is what is used in a one page layout.  An attribute named resultsUrl which indicates the URL of your search results page needs to be added to the <gcse:searchbox-only> element if it isn’t already there. The above <gcse-searchbox-only> tag would be altered to something like the following, where the search results page for your site would be specified instead.

The code for the search results page will look something like the following:

Note that the element has -only in it just like the <gcse:searchbox-only> element.

More on the searchbox-only and searchresults-only tags can be found in the Google documentation for those elements. Pages

The search box JavaScript should be placed in a Custom Code block in a Page Template so that all descendant pages will automatically have it.  After you create the Page Template, simply add a Custom Code block and paste the first code snippet (i.e., the <gsce:searchbox-only> code snippet) into it. You will get a warning message about badly formed HTML “Inserting badly formed HTML could corrupt your site. If you’re sure you want to continue, click OK.”. You should click OK to ignore it.  The layout of the Page Template is pictured below. Page Template with Search Box

Make sure that the section of the page (e.g., div#content) where the search results Code Block will be placed in the search results page is editable in the Page Template. Create a search results Page from the Page Template and add a Custom Code Block to it. Paste the second code snippet (i.e., the <gsce:search-results-only> code snippet) into it.  The layout of the search results Page is pictured below. Search Results Page


A robots.txt file can be used to let search engines know what should be indexed for search on the site.  You can upload a robots.txt file as an asset to the root directory and it will be used.  Note that you cannot use the robots.txt in a Developer Edition org.  The Developer Edition orgs are not meant to be searched and Salesforce has its own robots.txt at the root that disallows everything.


You may want to configure the look and feel and test everything before you publish and before you want Google indexing the pages on your site.  In the Google Control Panel, you can change the site that is being searched to a different public site.  For example, I changed my custom search to in the Google Control Panel.

Setting the site that gets searched

By changing that, I was able to see actual search results on my search results page in my Developer Edition.

Search Page


Search Results Page



There are many more options offered by Google that allow you to customize the look and feel, the layout, and the search behavior. Google also has an API that allows you to obtain the search results in an XML format for maximum flexibility.  Refer to the documentation from Google for more information.

23 thoughts on “Add Google Search to

  1. Hi Peter,

    I was wondering if you may be able to help me out with a simple question regarding and making sure my site is not searchable by any search engine. The article is great in the instance that you want/need google to find your site but what if we want our site and VF page to remain hidden from all searches, how do we do this? Can we simply not include a robot.txt file or do we have to call something out in the robot.txt file to exclude this page? Sorry i’m an admin not a developer. If this is the wrong forum to ask this question I apologize.


    1. You have to specify Disallow for the page(s) you do not want to be indexed by the search engines. You can use a wildcard to denote more than one page or even the whole site. This webmaster page from Google has more info.

      This will not secure your pages from outside access though. Someone could still go directly to the page if they have the URL for it. The major search engines are programmed to follow these directives, but from a technical standpoint there’s nothing stopping them other than that they are programmed that way.

  2. It’s really a nice and useful piece of info. I’m satisfied that you shared this useful information with us.

    Please keep us up to date like this. Thank you for sharing.

  3. s tidak mungkin bagi perusahaan untuk mengabaikan godaan internet .
    Bisnos ini memiliki lanjutan dibuat informasi dengan membuat semua jenis Dunia jurnal bersih Wide
    yang memfasilitasi perusahaan mempromosikan solousi
    & poduk dan layanan dari sebagian besar ahli lebih lanjut sebagai cara trendi .
    Penghematan saja dapat membantu Anda mendanai proyek-proyek penting lainnya

  4. of course like your web site however you need to test the spelling on several of your
    posts. A number of them are rife with spelling issues and I find it very troublesome to inform the truth however I will surely
    come again again.

  5. Right here is the perfect web site for anybody who hopes
    to find out about this topic. You realize so much its almost
    hard to argue with you (not that I really will need to…HaHa).

    You definitely put a new spin on a topic that has been discussed for many years.
    Wonderful stuff, just great!

    1. To follow up.. was able to achieve the v2 of the Google search by injecting the <gcse: tag into the page at runtime.

      Search Page

      var gcseDiv = document.getElementById(‘gsearch’);
      gcseDiv.innerHTML = ”

      (function() {
      var cx = ‘youGoogleKey’;
      var gcse = document.createElement(‘script’);
      gcse.type = ‘text/javascript’;
      gcse.async = true;
      gcse.src = (document.location.protocol == ‘https:’ ? ‘https:’ : ‘http:’) +
      ‘//’ + cx;
      var s = document.getElementsByTagName(‘script’)[0];
      s.parentNode.insertBefore(gcse, s);

  6. Greate pieces. Keep wwriting such kind of information on your site.
    Im really impressrd by your site.
    Hello there, You’ve done a fantastic job. I will definitely digg it
    and individually suggesxt to my friends. I’m sure they’ll be benefited from this site.

  7. With all thhe new Pixel Gun 3D cheats you’ll be
    able get a carddeck in the matter of no time.
    With this trick you can now obtain the best cards in under a month.
    Normally it could take more than 5 months oor alot of
    money to attain the amount oof cards that you nneed to create a strong deck.
    Thats why we suggest anyokne to utilize this tool.

  8. Pingback: money
  9. Pingback: clock hands kit
  10. This design is incredible! You certainly know how to keep a
    reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!)
    Wonderful job. I really enjoyed what you had to say,
    and more than that, how you presented it.
    Too cool!

  11. When you know what makes a woman tick you can use this knowledge to
    your advantage and make her miss you. If she doesn’t seem to be heading that way as things hot up, just
    ask her: “There’s something you could do that’d give me so much pleasure. What one man might consider a low sex drive, another might consider adequate or excessive.

  12. Undeniably imagine that which you stated.
    Your favorite justification appeared to be on the internet the
    easiest factor to bear in mind of. I say to you,
    I definitely get irked whilst other folks think about worries that they just don’t recognise about.
    You managed to hit the nail upon the highest and also outlined out the entire thing
    without having side effect ,people can take a signal. Will likely be back to get more.


Leave a Reply

Your email address will not be published. Required fields are marked *