{"id":6518,"date":"2013-06-02T01:13:39","date_gmt":"2013-06-02T07:13:39","guid":{"rendered":"http:\/\/sanuja.com\/blog\/?p=6518"},"modified":"2020-09-21T08:50:39","modified_gmt":"2020-09-21T14:50:39","slug":"integrating-google-custom-search","status":"publish","type":"post","link":"https:\/\/sanuja.com\/blog\/integrating-google-custom-search","title":{"rendered":"Integrating Google Custom Search"},"content":{"rendered":"<p>The Google Custom Search Engine (CSE) is a server side program written in C++ for web developers to improve their individual search results. It comes in few different flavors as advanced as <a href=\"http:\/\/www.google.ca\/enterprise\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Enterprise Search<\/a> servers to Google-hosted search pages. I will go into the deep end with Google Custom Search for personal websites, a free service provided by Google Inc (THANK YOU Google).<\/p>\n<p> <!--more--><\/p>\n<h2>Advantage of CSE<\/h2>\n<p>Unlike a general Google Search or website specific Google Search (search site:http:\/\/sanuja.com\/), CSE allows great deal of control over the behaviors of your site search. The themes, refining filters, AdSense and results page layouts are few examples of customization options. You do not have to use all them, but you can improve the user experience of your visitors utilizing these tools.<\/p>\n<p>Yes it is a free service as long as you allow Google Ads in results pages. I do not have any problem with this and I think it is a good deal for me too. Why do you ask? Because if you have an AdSense account, you can use that for the must have ads. This way if someone clicks on an ad, it will also go to your AdSense revenue. To me this is a win-win situation. If you do not want them to insert ads, Google Inc offer several different packages. They are based on the volume of search requests. Once you signup for an CSE account, you will be able to choose one under the &#8220;Business&#8221; section. NGOs and registered Educational institutions such as University of Calgary, could apply for an ad-free account without any addition cost. Contact Google Inc for more details.<\/p>\n<p>This will also reduce the load on your servers specially during peak search periods. For some users CSE will speed up the search results because it is run on a Google server independent of their web server.<\/p>\n<p>Some claim, which I am not sure about, that the CSE quarries will increase the page ranking of your web pages in Google index. However, I can not seems to find any official information on their website.<\/p>\n<h2 id=\"skip\">Creating a Search Engine<\/h2>\n<p>Google Inc constantly updating their user interface (UI) on all of their products and services. The Google CSE administration section has been changed several times now that if you &#8220;Google search&#8221; information about it, you will see slight variations in instructions. As of 31-May-2013, the following steps would work for sure. Also keep in mind, they have switched from using PHP functions and iframes to JavaScript codes. This is better for most developers working with CMS programs.<\/p>\n<ul>\n<li> Signup for a Google CSE Account or use your existing Google Account (Gmail, Drive, etc) at <a href=\"http:\/\/www.google.com\/cse\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a><\/li>\n<li> Create a Search Engine using admin options using <em>New search engine<\/em>. After creation verify your website ownership (if you haven&#8217;t done that in the past for other Google services such as AdSense). These are very easy to do, so I am not going to explain in depth.<\/li>\n<li> Click on the newly created CSE and go to <em>Setup<\/em>. There you will see a lot of option, which also may appear in other areas such as in the <em>Look and feel<\/em> section. Again, I am not going to touch this today. The only thing we will change right now is the layout under <em>Look and feel<\/em>.<figure id=\"attachment_6553\" aria-describedby=\"caption-attachment-6553\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" data-attachment-id=\"6553\" data-permalink=\"https:\/\/sanuja.com\/blog\/integrating-google-custom-search\/look_feel_layout\" data-orig-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/look_feel_layout.jpg\" data-orig-size=\"600,386\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"look_feel_layout\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Layout tab in Look and feel section. &lt;\/p&gt;\n\" data-medium-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/look_feel_layout-300x193.jpg\" data-large-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/look_feel_layout.jpg\" src=\"http:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/look_feel_layout.jpg\" alt=\"Layout tab in Look and feel section. \" width=\"600\" height=\"386\" class=\"size-full wp-image-6553\" srcset=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/look_feel_layout.jpg 600w, https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/look_feel_layout-300x193.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-6553\" class=\"wp-caption-text\">Layout tab in Look and feel section.<\/figcaption><\/figure> Because most website owners wants to have a search form separated from the results page (almost all default CMS search engines), choose <em>Two page<\/em> layout and click <em>Save and Get Code<\/em>.<\/li>\n<div class=\"alert alert-info\" role=\"alert\"><p class=\"printonly\"><strong>Notice<\/strong><\/p>There are several options on how the results are shown. The two page option allows you to specify the results target URL under <i>Search Results Details<\/i>. Please note the results URL must match exactly what you have on your site. If your site has HTTPS, the results URL must have HTTPS instead of HTTP. How your web server handle the trailing slashes also have an impact on results load time.<\/div>\n<li>Before you copy the code, click on <em>Search Results Details<\/em> button. It will show you an option for your results URL and an option for query parameter. <figure id=\"attachment_6554\" aria-describedby=\"caption-attachment-6554\" style=\"width: 280px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" data-attachment-id=\"6554\" data-permalink=\"https:\/\/sanuja.com\/blog\/integrating-google-custom-search\/query_para\" data-orig-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/query_para.jpg\" data-orig-size=\"280,387\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"query_para\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Search Results Details drop down window.&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/query_para-217x300.jpg\" data-large-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/query_para.jpg\" src=\"http:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/query_para.jpg\" alt=\"Search Results Details drop down window.\" width=\"280\" height=\"387\" class=\"size-full wp-image-6554\" srcset=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/query_para.jpg 280w, https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/query_para-217x300.jpg 217w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><figcaption id=\"caption-attachment-6554\" class=\"wp-caption-text\">Search Results Details drop down window.<\/figcaption><\/figure> Enter the intended search results page location (second red arrow) and change the query parameter to whatever you like. I recommend keeping the query parameter in its default state, q, because most CMS programs use s and other letters for their default built in site search. I found if this parameter is exactly the same as the built in one, it could potentially create a code conflict. But you can use anything you like from one character to several. Examples of custom parameters I came across on well reputed sites, cx, ser, search, s, etc.<\/li>\n<li>After you set up everything by following the steps above, you are ready to copy the code! Make sure you copy and paste both the search form and the search results code.<figure id=\"attachment_6555\" aria-describedby=\"caption-attachment-6555\" style=\"width: 374px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" data-attachment-id=\"6555\" data-permalink=\"https:\/\/sanuja.com\/blog\/integrating-google-custom-search\/get_code\" data-orig-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/get_code.jpg\" data-orig-size=\"374,305\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"get_code\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Get the codes.&lt;\/p&gt;\n\" data-medium-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/get_code-300x244.jpg\" data-large-file=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/get_code.jpg\" src=\"http:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/get_code.jpg\" alt=\"Get the codes.\" width=\"374\" height=\"305\" class=\"size-full wp-image-6555\" srcset=\"https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/get_code.jpg 374w, https:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/get_code-300x244.jpg 300w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><figcaption id=\"caption-attachment-6555\" class=\"wp-caption-text\">Get the codes.<\/figcaption><\/figure> We will make a one simple modification to the results code later&#8230;<\/li>\n<li>Copy and paste the search form at whatever the location you like and the results code in the same per-defined location.<\/li>\n<\/ul>\n<h2>Search form on steroids<\/h2>\n<p>If you want to use all the Google default settings on a simple HTML\/PHP site, then you are done. But where&#8217;s the fun in that? There are few things you can do with a custom written search form. But you have to be careful on certain tags and attributes. You <u>must<\/u> have the <em>name<\/em> is set to the per-defined query parameter. I choose to go with the Google default, q. I will walk you through several different scenarios of integration.<\/p>\n<h2>Integrating CSE to HTML\/PHP site<\/h2>\n<p>The following code will create a simple HTML form.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;form id=&quot;cse-search-box&quot; action=&quot;http:\/\/google.com\/cse&quot;&gt;\r\n  &lt;input type=&quot;hidden&quot; name=&quot;cx&quot; value=&quot;YOUR SEARCH ENGINE ID goes here&quot; \/&gt;\r\n  &lt;input type=&quot;hidden&quot; name=&quot;ie&quot; value=&quot;UTF-8&quot; \/&gt;\r\n  &lt;input type=&quot;text&quot; name=&quot;q&quot; size=&quot;31&quot; \/&gt;\r\n  &lt;input type=&quot;submit&quot; name=&quot;sa&quot; value=&quot;Search&quot; \/&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>But this will not send the results to your custom results page we created. In order to do that, replace the <code>http:\/\/google.com\/cse<\/code> with <code>YOUR_URL<\/code>. On this site it would be <code>\/blog\/gsearch\/<\/code>(from now on I will be using this URL in my examples) or I could also use <code>http:\/\/sanuja.com\/blog\/gsearch\/<\/code>.<\/p>\n<h2>Custom form background image<\/h2>\n<p>The copy\/paste code Google provide for your CSE has a background image, <img decoding=\"async\" src=\"http:\/\/sanuja.com\/blog\/wp-content\/uploads\/2013\/05\/cse_watermark.gif\" alt=\"cse_watermark\" width=\"119\" height=\"16\" class=\"alignnone\" style=\"padding: 0px; border: none; margin: 0px; height: auto; outline: none;\"\/>. But in our custom search form, have the text &#8220;Site Search (type+Enter)&#8221;. If you prefer the original Google CSE look and feel, we can add that using the the same code Google uses. The only change I would make is to load the background image from your own server as opposed to loading directly from Google. This will reduce the load time of your pages with the CSE form.<\/p>\n<p>First we will extract bits of code from Google provided search box and then we will add that to our custom HTML form. Copied the following from the official <a href=\"http:\/\/googlecustomsearch.blogspot.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google CSE Blog<\/a>.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input autocomplete=&quot;off&quot; type=&quot;text&quot; size=&quot;10&quot; class=&quot;gsc-input&quot; name=&quot;search&quot; title=&quot;search&quot; id=&quot;gsc-i-id1&quot; style=&quot;width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background-image: url(http:\/\/www.google.com\/cse\/intl\/en\/images\/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;&quot; dir=&quot;ltr&quot; spellcheck=&quot;false&quot;\/&gt;\r\n<\/pre>\n<p>The part we are interested in is <code>style=\"width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background-image: url(http:\/\/www.google.com\/cse\/intl\/en\/images\/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;\"<\/code> You can add this exact background image code within your input tag. If you took my advice and decided to load the image from your own server, change the <code>background-image: url(YOUR_IMAGE_URL)<\/code> to the appropriate URL.<\/p>\n<h2>Integrating CSE to WordPress<\/h2>\n<p>Let&#8217;s say you want to replace the default search in your CMS with the Google CSE. You can do this by editing the file or the code that contains the default search form. In WordPress it is <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/get_search_form\" target=\"_blank\" rel=\"noopener noreferrer\">searchform.php<\/a> and in Drupal it is <a href=\"http:\/\/drupal.org\/project\/search_files\" target=\"_blank\" rel=\"noopener noreferrer\">search-theme-form.tpl.php<\/a>.<\/p>\n<p>For the WordPress(WP) and Drupal(DP) examples, I am going to strip the search form as much as possible and add items from the barebone code. The following codes are separated with comments in between them. It is very self explanatory; the first one is the most barebone (must have values) and new tags, values and attributes get added as you go down the code.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!--1. Must haves in searchform.php--&gt;\r\n&lt;form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;\/blog\/gsearch\/&quot;&gt;\r\n&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;q&quot; id=&quot;q&quot; \/&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;!--2. Value added attributes--&gt;\r\n&lt;form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;\/blog\/gsearch\/&quot;&gt;\r\n&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;q&quot; id=&quot;q&quot; autocomplete=&quot;on&quot; placeholder=&quot;Site Search (type+Enter)&quot;\/&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;!--3. Adding webkit speech support--&gt;\r\n&lt;form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;\/blog\/gsearch\/&quot;&gt;\r\n&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;q&quot; id=&quot;q&quot; x-webkit-speech\/&gt;\r\n&lt;\/form&gt;\r\n\r\n&lt;!--4. Full blown HTML form--&gt;\r\n&lt;form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;\/blog\/gsearch\/&quot;&gt;\r\n&lt;label for=&quot;q&quot; class=&quot;assistive-text&quot;&gt;Search&lt;\/label&gt;\r\n&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;q&quot; id=&quot;q&quot;\/&gt;\r\n&lt;input type=&quot;submit&quot; class=&quot;submit&quot; id=&quot;searchsubmit&quot;\/&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>Few new items <code>autocomplete=\"on\"<\/code> is one of many Google CSE input tag attributes. &#8220;Google it&#8221; for more information on it. The <code>placeholder=\"Site Search (type+Enter)\"<\/code> is a HTML\/5 input tag attribute for displaying a message to the user within the search box (kind of like the background image). The <code>x-webkit-speech<\/code> or <code>x-webkit-speech=\"x-webkit-speech\"<\/code> is an odd code. It is only utilized by webkit browsers and most specifically Google Chrome. It is speak to text framework. The nice thing about it, when it is not supported by the browser, it will simply disappear.<\/p>\n<p>You can replace the default code in searchform.php with <strong>one<\/strong> of the three codes above in WP. DO NOT save all three sets; it may result in a PHP error. I recommend using a <a href=\"http:\/\/codex.wordpress.org\/Child_Themes\" target=\"_blank\" rel=\"noopener noreferrer\">Child Theme<\/a> with the searchform.php to implement this change to the theme file.<\/p>\n<p>I prefer the second or the third one. On this site we have a combination of the second and the third one. The problem with the forth code set with full blown version is that it may mess up your theme. It will add two extra lines; one on top with &#8220;Search&#8221; and one on the bottom with the button, &#8220;submit&#8221;. However, if your search box is in a sidebar area or placed in a location with lots of room, this last option can be the best one for you. It is all coming down to the styling of the website.<\/p>\n<h2>Integrating CSE to Drupal<\/h2>\n<p>Now I have already introduced all the nuts and bolts of Google CSE, we can jump into custom Drupal module creation. According to the guidelines for Drupal modules, which is like WP plugins, you should create the following files;<br \/>\n&#8211; CHOOSEN_NAME.info<br \/>\n&#8211; CHOOSEN_NAME.module<br \/>\n&#8211; CHOOSEN_NAME.js<\/p>\n<p>The only major difference between DP and WP implementation is that in Drupal, even the integrated search itself is actually a &#8220;module block&#8221;. Therefore, you can simply create a module and install it. All the instructions for this is already well written <a href=\"https:\/\/drupal.org\/node\/1887016\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>. If you have any specific questions, feel free to contact me.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Google Custom Search Engine (CSE) is a server side program written in C++ for web developers to improve their individual search results. It comes in few different flavors as advanced as Google Enterprise Search servers to Google-hosted search pages. I will go into the deep end with Google Custom Search for personal websites, a &hellip; <a href=\"https:\/\/sanuja.com\/blog\/integrating-google-custom-search\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Integrating Google Custom Search<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,34],"tags":[29,19],"class_list":["post-6518","post","type-post","status-publish","format-standard","hentry","category-computer-science","category-cms","tag-css-html","tag-tutorials"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/posts\/6518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/comments?post=6518"}],"version-history":[{"count":0,"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/posts\/6518\/revisions"}],"wp:attachment":[{"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/media?parent=6518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/categories?post=6518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sanuja.com\/blog\/wp-json\/wp\/v2\/tags?post=6518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}