Google News Search Component / Module
Written by kksou   
Friday, 08 August 2008

This Google News Search component / module pair allows you to add Google News Search to your Joomla site.

Just like the googleSearch component, 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!

Live Demo

You can see the Google News Search component/module live in action in this demo page.


Latest Version

v1.0.1 (for Joomla 1.0) and v1.5.1 (for Joomla 1.5)
Released January 12, 2009

Fixed the warning messages:

  • Notice: Undefined variable: val in googlenewssearch.lib.php on line 145
  • Undefined property: stdClass::$searchfield_padding_left in googlenewssearch.lib.php on line 317
  • Undefined property: stdClass::$searchfield_padding_right in googlenewssearch.lib.php on line 317
  • Undefined property: stdClass::$searchfield_padding_top in googlenewssearch.lib.php on line 317
  • Undefined property: stdClass::$searchfield_padding_bottom in googlenewssearch.lib.php on line 317
  • Undefined index: q in googlenewssearch.lib.php on line 296
  • Notice: Undefined index: q in googlenewssearch.lib.php on line 265

Unique Features

Since Google did not release any API for searching its Google News, I have used the method similar to mod_wrapper to include the Google News Search through iFrame. However, unlike some other iFrame implementations, this component/module pair has some unique features:

  • The accompanying module allows you to add a search form as a module. This means that you can place the search form in any module position you like.
  • You can define your own watermark text in the search field.
  • You can add two Google Ads - one above and one below the search results!

Download

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

How to install

First take a look at the demo page so that you have an idea of what the component/module looks like. The search result appears in the main body of the Joomla page. Also note the two Google ads just above and below the search result.

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

  1. First install the component.
  2. Then install the module and select your desired module position for the module. Make sure you publish/enable the module.
  3. Go to Component, select "Google News Search - Configure", and enter your desired width and height of the search result.
  4. Create a menu item for the component. Although this is not necessary, but I would strongly encourage you to do so -
    so that there is an ItemID associated with the component.

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

For advanced settings, please refer to Customizing the Component/Module.

Customizing the Component

  • Log on as Administrator, from the Component Menu, select "Google News Search" for Joomla 1.5, and "Google News Search - configure" in Joomla 1.0.
  • The config options are very similar to that of googleSearch component. Please refer to the page for details.
  • Only the first two are required. The rest are optional settings that allow you to finetune the component to suit your needs.
  • For the Google ads, please set up the ads in your Google Adsense account, and then copy and paste the entire codes given by Google in the two boxes in the config page. Make sure you copy the entire code - everything from <script type="text/javascript"> to </script>. An example is given below:
  • <script type="text/javascript"><!--
    google_ad_client = "pub-1234567812345678";
    /* sample ad 468x60, created 8/6/08 */
    google_ad_slot = "1234567812";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    

Styling the Component and Module using CSS

You can set the style of every item within the Google News Search 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.googlenewssearch input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_googlenewssearch input.inputbox {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
  3. Search Button
  4. Component Module
    div.googlenewssearch input.button {
    	font-family: "Arial Bold";
    	font-size: 12pt;
    	margin-left: 4px;
    }
    
    div.mod_googlenewssearch 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.googlenewssearch input.button_img {
    	margin-left: 4px;
    }
    
    div.mod_googlenewssearch input.button_img {
    	margin-left: 4px;
    }
    
  7. Logo
  8. Component Module
    div.googlenewssearch 
    .googlenewssearch_logo { margin-right: 6px; }
    div.mod_googlenewssearch 
    .googlenewssearch_logo { margin-right: 6px; }
  9. Radio Label (the radio buttons to select between search for web or domain)
  10. Component Module
    div.googlenewssearch .radiolabel {
    	font-family: Verdana;
    	font-style: italic;
    }
    
    div.mod_googlenewssearch .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.googlenewssearch input.radio {
    	background-color: #0000ff;
    }
    
    div.mod_googlenewssearch 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.googlenewssearch .radiogrp {
    	border: 1px solid #ddd;
    }
    
    div.mod_googlenewssearch .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.googlenewssearch {
    	background: #33FF66;
    }
    
    div.mod_googlenewssearch {
    	background: #33FF66;
    }
    
  17. The table within the search form (use this if you want to right align the search form)
  18. Component Module
    div.googlenewssearch table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
    div.mod_googlenewssearch table {
    	margin-left: auto;
    	margin-right: 6px;
    }
    
  19. Search Box (method #2)
  20. Component Module
    div.googlenewssearch input{
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    
    div.mod_googlenewssearch input {
    	font-family: Verdana;
    	font-size: 12pt;
    	font-style: italic;
    }
    

 
< Prev   Next >

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