googleSearch component
Written by kksou   
Wednesday, 14 May 2008
Important!!!
Please switch over to the googleSearch (CSE) component as Google is no longer supporting the old google adsense search code.

This component allows you to add Google Adsense Search to your Joomla site.

The search results are displayed right inside your Joomla page!

No more popup page. No more diversion to other pages.

Available for both Joomla 1.0.x and native 1.5.x!


New googleSearch (CSE) component

Please switch over to the googleSearch (CSE) component as Google is no longer supporting the old google adsense search code.

Add more power with googleSearch module

You might also want to complement this component with the googleSearch module: http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,4935/Itemid,35/

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.


Latest Version

v1.0.15 (for Joomla 1.0) and v1.5.15 (for Joomla 1.5)
Released January 12, 2009

Some of you encountered a blank page for search result for v1.5.14. This version fixed the bug. Thanks to Daniel for helping me find the bug and test the solution of the bug fix.

"JFolder::folder: Path is not a folder: /language". For those of you who get this error message, please refer to here for solution.

How to install

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

  1. Install the component
  2. Enter your Google Adsense ID
  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!

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", 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

Important!!!
Please switch over to the googleSearch (CSE) component as Google is no longer supporting the old google adsense search code.

Note: To upgrade to the newer version, simply uninstall the old version and install the new version of the plugin.

Remove the "Powered by" links

If you find the component useful and would like to use the component without the "Powered-by" links, you may do so by purchasing a "Powered-by" removal license for only USD $10.

Secured payment is processed by 2checkout.com. All major credit cards are accepted, including Visa, Mastercard and American Express, etc. You can also pay by PayPal. Once the transaction is completed, you will be given a link to download the version with the "Powered by" links removed.

Version History

  1. Version 1.00: released May 12, 2008.
  2. Version 1.01: released May 15, 2008.
    • Some users have encountered the following error: "404 - An error has occurred: Component Not Found", or the configuration page did not appear. Fixed.

  3. Version 1.02: released May 16, 2008.
    • Added ItemID in the search form so that the respective modules will be displayed correctly with the googleSearch component.
    • Added Search Button Label - Allows you to set your own label for the search button.

  4. Version 1.03: released May 19, 2008.
    • Added Google SafeSearch - filtering of adult sites contents
    • Added support for googleSearch module
    • Added auto-lookup of Itemid in the googleSearch module (so that the various modules are displayed correctly in your googleSearch main page)

  5. Version 1.04: released May 20, 2008.
    • For some reasons, the search result returned by Google always contains quite a big gap of empty spaces at the bottom of the search result. Have managed to resolve this.

  6. Version 1.07: released May 23, 2008.
    • Allow you to freely position and show/hide the Google logo, radio buttons and search button
    • Add Google search watermark or your own-defined watermark in the search field for a more professional look
    • Use your own image as Search button
    • Full support of css for all search components

  7. Version 1.08: released May 24, 2008.
    • Adds independent css style for the googleSearch component and module.

  8. Version 1.09: released Jun 10, 2008.
    • The codes for googleSearch module and components is now valid XHTML! Thanks to Husein and Dalibor who both informed me that there are some invalid XHTML codes in v1.08/1.58.

  9. Version 1.0.10: released Jun 30, 2008.
    • Bug Fix. If you set the option "Display search form in component" to No, sometimes the search form will not display in the googleSearch module too. The bug has been fixed. Thanks to Scott for reporting the bug.

  10. v1.0.11 (for Joomla 1.0) and v1.5.11 (for Joomla 1.5)
    Released June 30, 2008
  11. Search Title Only. This is in response to Fernando's request. There is now an option in the config page to search in title only.

    Unused variables. This is in response to shedyk's feedback of some warning messages he received. It turns out there are indeed some unused variables, and the warning messages appear when you have set PHP to full error reporting ("error_reporting = E_ALL" in php.ini). Have fixed these unused variables in this version.

  12. v1.0.12 (for Joomla 1.0) and v1.5.12 (for Joomla 1.5)
    Released December 23, 2008
  13. Fixed the error "JFolder::folder: Path is not a folder: /language". Please refer to here for more details.

  14. v1.0.13 (for Joomla 1.0) and v1.5.13 (for Joomla 1.5)
    Released January 3, 2009
  15. You can now specify the Ad Location (i.e. the location of the Google Adsense Ads accompanying the search result). The available options are "Top and Right", "Top and Bottom" or "Right".

  16. v1.0.14 (for Joomla 1.0) and v1.5.14 (for Joomla 1.5)
    Released January 6, 2009
  17. Updated the code so that it can now work together with the googleSearch (CSE) component.

Customizing the Component

Log on as Administrator, from the Component Menu, select "googleSearch - configure", you will see the following config page.

Only the first two are required. The rest are optional settings that allow you to finetune the component to suit your needs.

  1. Google Adsense ID: This is your 16-digit google adsense ID. Do not enter any alphabets that precede the number.
  2. Width of Search Result:: This is the width (in pixels) of the search result returned by Google. Match this with the width of your Joomla page.
  3. Size of Search Field:: This is the size of the search field. Default size is 48.
  4. Search Button Label:: Label for the search button. Default size is the English word "Search".
  5. Channel: If you want to track this with a channel that you've set up in your Adsense account, enter the 10-digit channel number here.
  6. Search Domain:: Specify the search domain. If you leave this blank, it will use the domain of your Joomla site by default.
  7. Search Domain Label:: Specify the radio button label that will be displayed in the search form for the search domain. If you leave this blank, it will use the domain of your Joomla site by default.
  8. Search Domain as Default: There are two radio buttons in the search form: The first one to search the entire web. The second one to search your domain. If you want the radio button for your domain to be selected, choose "Yes" from the pulldown menu. If you want the radio button for the entire web to be selected, choose "No" from the pulldown menu.
  9. Site Language: Select your site language here.
  10. Site Encoding: Select your site encoding here. If you're not sure, just choose the first one: West European Latin-1 (ISO-8859-1).
  11. Country:: Select your country. This will determine which Google domain will be used for the search results.
  12. Enable Google SafeSearch:: Select yes if you want to enable Google SafeSearch to filter adult-site contents. Default is no.
  13. Display Last Search Value:: Display the last search value entered by the user. Default is yes.
  14. Title color: Set the color of the title for the Google search result.
  15. Background color: Set the color of the background for the Google search result.
  16. Text color: Set the color of the text for the Google search result.
  17. URL color: Set the color of the url for the Google search result.

The next 5 config options allow you to set the position of the various HTML elements around the search box. Note that the positions are all relative to the search box.

  1. Google Logo Position: The position of the Google logo relative to the search box.
  2. Select Web/Domain Position: The position of the radio buttons (for selecting search web or domain) relative to the search box.
  3. Search Button Position: The position of the Search Button relative to the search box. If you do not want any Search Button, select 'none'.
  4. Google Logo Image: Select the type of Google logo you want. If you have a dark background, you might want to use the third one.
  5. Search Button Image: If you want to use an image as Submit button instead of the standard Submit button, enter the full URL of the location of your image. If you want to revert back to the default Submit Button, just empty this field.

The next 6 config options allow you to customize the watermark text that appears when the use has not enter anything yet in the search box.

  1. Watermark Type: Google provides a pretty cool watermark (it's image based, so you cannot change the text). If you want to set your own string, select "text".
  2. Text Color on blur: The watermark text color.
  3. Text Color on focus: The color of the search string when the user starts typing in the search box.
  4. Background Color on blur: The watermark background color.
  5. Background Color on focus: The background color of the search string when the user starts typing in the search box.
  6. Watermark Text: Your desired watermark text. Make sure you have selected "text" for "Watermark Type".

The following config options are for customizing the googleSearch module. It's exactly identical to its component counterpart, so please refer to the explanations above.

Styling the Component and Module using CSS

You can now set the style of every item within the googleSearch component/module to the exact format you want through CSS. For example, you can set the font family, font size, foreground and background color of the search field, radio label, search button, 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 input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_googleSearch input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
  3. Search Button
  4. Component Module
    div.googleSearch input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-left: 4px;
    }
    
    div.mod_googleSearch input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-top: 6px;
    }
    
  5. Search Button Image (if you're using your self-defined image as search button)
  6. Component Module
    div.googleSearch input.button_img {
    	margin-left: 4px;
    }
    
    div.mod_googleSearch input.button_img {
    	margin-left: 4px;
    }
    
  7. Google Logo
  8. Component Module
    div.googleSearch .google_logo {
    	margin-right: 6px;
    }
    
    div.mod_googleSearch .google_logo {
    	margin-right: 6px;
    }
    
  9. Radio Label (the radio buttons to select between search for web or domain)
  10. Component Module
    div.googleSearch .radiolabel {
    	font-family: Verdana;
    	font-style: italic;
    }
    
    div.mod_googleSearch .radiolabel {
    	font-family: Verdana;
    	font-style: italic;
    }
    
  11. Radio Buttons (note: this only works on some of the browsers such as IE.)
  12. Component Module
    div.googleSearch input.radio {
    	background-color: #0000ff;
    }
    
    div.mod_googleSearch input.radio {
    	background-color: #0000ff;
    }
    
  13. Radio Group (use this if you want to set the background or draw a border around the entire radio buttons group)
  14. Component Module
    div.googleSearch .radiogrp {
    	border: 1px solid #ddd;
    }
    
    div.mod_googleSearch .radiogrp {
    	border: 1px solid #ddd;
    }
    
  15. The entire search form (use this if you want to set the background or draw a border around the entire search form)
  16. Component Module
    div.googleSearch {
    	background: #33FF66;
    }
    
    div.mod_googleSearch {
    	background: #33FF66;
    }
    
  17. The table within the search form (use this if you want to right align the search form)
  18. Component Module
    div.googleSearch table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
    div.mod_googleSearch table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
  19. Search Box (method #2)
  20. Component Module
    div.googleSearch input{
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_googleSearch input {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    

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 does not work, and I'm using sh404SEF on my website.

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

Q2: googleSearch works fine when search the web. But it returns nothing when searching my domain.

A2: Your site has to be indexed by google in order for googlSearch to return something when searching your site. This means that if your site is new, and none of the pages has been indexed by google yet, the search result will be empty. The indexing is controlled by google. So you just have to be a little bit patient for googlebots to pop by and index your site.

To check how many of your web pages have been indexed by google, just type the following in the search field of www.google.com (assuming your domain is called yourmain.com)

site:yourmain.com

The search result returned by googleSearch will be exactly the same as returned by www.google.com.


Last Updated ( Wednesday, 14 May 2008 )
 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2012. kksou.com. All Rights Reserved