Add a Google CSE to a Drupal 7 site without using google_cse module

Date: Thu Jan 23 2014 Drupal »»»» Drupal Planet »»»» Drupal Tutorial »»»» Google Custom Search
The https://drupal.org/project/google_cse module appears to be a dead project - the Drupal 7 port hasn't had any activity in over 2 years. If you want to use a Google Custom Search Engine (CSE) on a Drupal 7 site, what do you do? Turns out it's relatively straight-forward to just generate the CSE over on Google's website, take the code and paste it into a Block, and that's it.

What is Google CSE? Go to http://google.com/cse to find out the details. What it does is let you set up a search box focusing solely on a specific site or group of sites.

One reason a Drupaler should use Google CSE is it reduces the resources required for your site - because you're offloading Search functions to Google's infrastructure.

I'm also interested in it because davidherron.com has several blogs as subdomains, and I'd like the search functions to search all those subdomains. The Drupal Core Search only searches the site itself, and not other sites, of course.

Build the search engine

To build a custom search engine go to their site (link above), while logged in to a Google Account, and the process is pretty simple. Just enter one (or more) domain names to search, then click the button. You can go directly to getting the HTML code snippet for the search engine if you like.

If you are a Google Adsense user, you can integrate your personal Adsense account with the search engine. Click into the Control Panel, then click on the Make Money tab, and click the selector so that it's on. If you've done this, then click on the Basics tab and then half-way down the page is a button marked "Get Code".

Add the CSE to your site

Now you have a block of HTML code.

You can go back to your Drupal site, create a new block, and paste that code into the block body. Ensure you select Full HTML, then save the block definition, and then position the block into one of the regions on your site. But, unfortunately, it's not quite that simple.

The default definition of the Full HTML input format still does a little bit of filtering of the HTML. That little bit of filtering breaks the HTML provided by the Google CSE. What I had to do is create a new input format, I named it Any HTML, and simply make sure that none of the checkboxes are checked. Once you do that, the Google CSE search box shows up.

Next is the placement of the CSE on your site. I tried positioning it in the sidebar but it didn't fit. I've ended up placing it in the bottom of the content area which is suboptimal but is the best I could do with the Garland theme this site is using.

The options for configuring look and feel of a Google CSE are not good.

The CSE website gives you a lot of options to customize the look of a CSE. Unfortunately, these options don't let you customize the layout of the search box.

Wrap up

The whole look of the Google CSE website makes me wonder if this is one of the Google Products that is due to get caught up in a spring cleaning exercise like the one that KILLED GOOGLE READER (!!!ARGH!!!!).

Anyway - by default the Google CSE displays the search results in an overlay page and there's no additional integration required with the Drupal site. It works fine.