googleSearch (CSE) component

This is the good old googleSearch component with one key difference: it uses Google's new Custom Search Engine (CSE) at the backend.

The latest component for Joomla 3.0 (v3.0.2) has been updated with Google's latest Custom Search Element v2. The new version offers:

  • Custom Search components are rendered based on settings stored on the CSE servers (along with any client-side customization).
  • All JavaScript is loaded asynchronously, so page load time is reduced.

The googleSearch (CSE) Module

There is an accompanying googleSearch (CSE) Module: googleSearch (CSE) module

The module allows you to add an additional Google search box as a module. This means that you can place the search form in any module position you like. When the user clicks the search button, the search result will be displayed in your Joomla main body by the googleSearch component.

Very Important - the Google CSE ID

Please make sure you have set up a Custom Search Engine in your Google's account before you can use this component. Once you have created a Custom Search Engine, Google will assign a unique CSE ID to that engine. You need to enter the CSE ID into the config page to start using this component.

For more details, please refer to the following article: Where to find the Google CSE ID?


Latest Version

v3.0.7 (for Joomla 3.0 and above)
Released Dec 23, 2016

  • Support for https - resolved one more Mixed Content warning in the "Powered by Google" image
  • Changed the installation method back to "Upgrade" so that you now do not need to uninstall before installing the new version. If the 2 new fields are not found, the program will automatically add the 2 new fields.

v3.0.6 (for Joomla 3.0 and above)
Released Dec 14, 2016

  • Added new parameter: use_https. Set this to "Yes" if your site is using https. Default is "No". This resolves the mixed content warning if you are using SSL certificate for your site - "Mixed Content: The page was loaded over HTTPS, but requested an insecure script 'http://maps.googleapis.com/maps/api/js?key=...'. This request has been blocked; the content must be served over HTTPS."
  • Added new parameter: open_link_in_same_window. Set this to "Yes" if you want links to open in the same window. Default is "Yes". If set to "No", links will open in a new window.

Note:

  1. For this new version, you have to uninstall the old version first and re-install the new version - so that the 2 new parameters can be added.
  2. You may want to print or take note of the original settings first before you uninstall.
  3. I find it easier to open the page of the googleSearch Config in the browser, do the uninstall and re-install, open the Config page in a new browser window, and then you can copy and paste the settings from the old to the new page.

What's exciting about Google's new Custom Search Engine (CSE)

There are many exciting new features in Google's new Custom Search Engine (CSE). Here are just some of them:

  • Search multiple sites. If you have set up three different sites, say site1.com, site2.com, and site3.com, the CSE now allows you search only within these three sites.
  • Refinements: Refinements are labels that you apply to websites. They appear as a list of links above search results, offering users a way to narrow their search. When a user clicks a refinement label, the sites that you have labeled are given priority in the results. In addition to labeling sites, you can also specify additional words that are added to users' queries when they click a label, providing even more targeted results.
  • You can see a live demo of refinements on this site. Enter a keyword, say "menu" in the search box at the top-left navigation area. Did you see the 8 refinement labels there: "PHP-GTK2", "Joomla", "PHP-GTK2 sample codes", "Joomla forum articles", etc. Try clicking on any of these refinement labels. It's pretty cool!

There are many other exciting and advanced features in Google's new Custom Search Engine.

You can see the complete official Google document here: http://www.google.com/coop/docs/cse/

Differences between googleSearch (CSE) and googleSearch components

  • googleSearch component: uses the traditional Google Search API.
  • For this component, you can just install and use right away. You do not even need a Google Adsense ID.

  • googleSearch (CSE) component: uses Google's new Custom Search Engine (CSE).
  • For this component, you'll have to first set up a Custom Search Engine in your Google's account. Once you have created a Custom Search Engine, Google will assign a unique CSE ID to that engine. You need to enter the CSE ID into the config page to start using this component.

Demo

The search on this site is using the googleSearch (CSE) component/module. You can test it at the top of this page.

How to install

Set up is as easy as 1-2-3:

  1. Install the component
  2. Enter your Custom Search Engine's unique identifier (cx) - Where to find this?
  3. Enter your desired width of the search result

That's all you need to get started! You'll now have Google Search right inside your Joomla page!

Tutorial

There is a very detailed tutorial on how to setup the googleSearch (CSE) component here: How to Create a Google Custom Search Engine in a Joomla Site

Please make sure you have set up a Custom Search Engine in your Google's account before you can use this component. Once you have created a Custom Search Engine, Google will assign a unique CSE ID to that engine. You need to enter the CSE ID into the config page to start using this component.

For advanced settings, please refer to Customizing the Component.

sh404SEF users

If you are using the googleSearch component together with sh404SEF:

  1. Go to sh404SEF Configuration.
  2. Click the "By Component" tab.
  3. Look for the component "googleSearch(CSE)", and set the first column as "skip".
  4. Don't forget to click "Save".

Please also make sure you read the following article:

Running googleSearch with sh404SEF: fixing the error 'JFolder::folder: Path is not a folder: /language'

"JFolder::folder: Path is not a folder: /language"

For those of you who get this error message, please refer to the article below for the solution:

Running googleSearch with sh404SEF: fixing the error 'JFolder::folder: Path is not a folder: /language'

Download

Very Important: Please make sure you have set up a Custom Search Engine in your Google's account before you can use this component. Once you have created a Custom Search Engine, Google will assign a unique CSE ID to that engine. You need to enter the CSE ID into the config page to start using this component.

Customizing the Component

Please refer to the googleSearch: Customizing the Component. They are about the same.

Note that for the new Google CSE, many of the options are now stored right on Google's server, e.g. the colors for the title, background, links, etc.

Note also that the Google Adsense ID and channel ID is now encoded right inside the CSE ID.

Styling the Component and Module using CSS

You can set the style of the search field and search button to the exact format you want through CSS, for example, the font family, font size, foreground and background color, margin, border, etc.

I've designed such that the css style for the component is independent of that of the module. So you can have different styles for the component and the module.

For example, if you're using the default Joomla 1.5 template, define the following style in <joomla root folder>/templates/rhuk_milkyway/css/template.css. If you're using the default Joomla 1.0 template, define the following style in <joomla root folder>/templates/rhuk_solarflare_ii/css/template_css.css.

  1. Search Box
  2. Component Module
    div.googleSearch_cse input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_googleSearch_cse input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    

  3. Search Button
  4. Component Module
    div.googleSearch_cse input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-left: 4px;
    }
    
    div.mod_googleSearch_cse input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-top: 6px;
    }
    
  5. The entire search form (use this if you want to set the background or draw a border around the entire search form)
  6. Component Module
    div.googleSearch_cse {
    	background: #33FF66;
    }
    
    div.mod_googleSearch_cse {
    	background: #33FF66;
    }
    

Replacing the Default Search module of Joomla 1.5

Suppose you want to replace the default search module of Joomla 1.5 using the default rhuk_milkyway template, here are the steps:

  1. Log on as administrator and go to Module Manager.
  2. In the input box "Filter:", enter "search".
  3. You should now see two items: Search (the default mod_search), and Google Search.
  4. Make sure Enabled is set to No for mod_search, and Yes for Google Search.
  5. Assuming that you're using the default Joomla 1.5 template, define the following style in <joomla root folder>/templates/rhuk_milkyway/css/template.css
    div.mod_googleSearch table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
    div.mod_googleSearch input {
    	width: 145px;
    	margin: 15px 0 9px 0;
    }
    

You should now see the googleSearch module instead of the default mod_search in module position user4.

FAQ (Frequently Asked Questions)

Q1: googleSearch_cse does not work, and I'm using sh404SEF on my website.

A1: For googleSearch_cse to work on websites using sh404SEF, please refer to the solution here.

Q2: googleSearch_cse returns the error "Google Error: Bad Request. Your client has issued an illegal request."

A2: This error usually occur when you did not enter a correct CSE ID in the config page.

Q3: I got the error message "Fatal error: Cannot redeclare class googleSearch_DisplayForm in googlesearch.lib.php on line 12"

A4: This is because you are trying to run the googleSearch_cse with an older version of googleSearch. To run both together, you need to upgrade googleSearch to v1.0.14/v1.5.14.

Q4: Can I run googleSearch_cse and googleSearch together on the same page?

A3:Yes, you can, as long as you've upgraded googleSearch to v1.0.14/v1.5.14.

Please make sure you have set up a Custom Search Engine in your Google's account before you can use this component. Once you have created a Custom Search Engine, Google will assign a unique CSE ID to that engine. You need to enter the CSE ID into the config page to start using this component.

Version History

  1. v1.0 (for Joomla 1.0) and v1.5 (for Joomla 1.5)
    Released January 6, 2009
  2. v1.6 (for Joomla 1.6), v1.7 (for Joomla 1.7), v2.5 (for Joomla 2.5)
    Released March 15, 2012
  3. v3.0.2 (for Joomla 3.0 and above)
    Released Feb 14, 2015
  4. Support for the latest Joomla 3.3.6!

  5. v3.0.3 (for Joomla 3.0 and above)
    Released Sep 10, 2015
  6. Support for the latest Joomla 3.4.4!

  7. v3.0.4 (for Joomla 3.0 and above)
    Released Sep 15, 2015
  8. This latest version resolves potential Cross Site Scripting as highlighted by joomla.org. Details here.

    If you are using this component (any versions, including Joomla 1,0, 1,5, 1.6, 1.7, 2.6 and 3.0 and above), please MAKE SURE you update to the latest version.

    Special thanks to Eddie Konczal for highlighting this to me.

  9. v3.0.5 (for Joomla 3.0 and above)
    Released Sep 8, 2016
    • Changed: http://www.google.com/coop/intl/$lang/images/google_custom_search_watermark.gif
      To: http://cse.google.com/coop/intl/$lang/images/google_custom_search_watermark.gif
    • Support for PHP7: changed constructor from function googleSearch_DisplayForm() to function __construct()