Google Custom Search Engine in Joomla integration

More and More people are informed about the fact that Google now offers you the possibility to integrate a Custom Search Engine into you website.

Update 21-12-2006:
I did some heavy testing today to see why te procedure did not work for some people, this is what I found out!
The Integration with Joomla will not work if you have just the standard url, or the standard SEO module active!!

Google places a string behind the page that breaks the Joomla sequince and brings you back to the frontpage or an error page...

With Open-Sef or another SEF component that gives you an .html or .php extenstion it works fine.

Just an extra reason to implement a proper sef component :-)

P.s. The procedure for an external page result, so that is not framed inside your tamplate works wothout a problem, since this is an extrenal link from Google.
Try the Example on  Page three 

Maybe You have seen the effect of such a search engine on this website.
or even tried it, because on the bottom of each page there is a module that says "Google Custom Search".

How does the Google Custom Search Engine work

Actually this functionality of the Custom Search Engine for your website is pretty simple.
You first create your Search engine in Google and take into account a number of websites, you think should get priority in the Search results pages.

For Example, you want like people to get the results that include the results of http://www.pathos-seo.com :-).
Just put the site into the preferred URLS that should be included into the Google SERP.

Advantage of a Custom Search Engine
An advantage for your visitors if they use your Custom search is that you already have found very good informatief websites that fit the subject of your site.

Because you deliver addition value to a better search result on this topic you are helping your visitors.
People are then more inclined to return to you site, because they got better focused search results!

Step by Step instruction on Joomla integration of Google CSE

First thing is, you need a gmail account from Google to login into the webmaster help center.
But you probably know enough people that can invite you to such an account, or you probably already have one.
Otherwise, you even get the opportunity to create on if you follow the link below.

The instruction that you find here, looks very extended and complex, bu I a sure you, it is not !!
Just follow the step, and the result will be a nicely integrated search engine results page on you own Joomla based website.

Just try the result by searching via the field below.

{mospagebreak title=Create the Search Engine}

Create a Google Custom Search Engine for your Website

You start by following the link http://www.google.com/coop/manage/cse/create/1
If you are already logged in to your account, you can proceed right away, otherwise you have to login first.

In the next screen you have to fill in some information, most of it speaks for itself.

At Search engine name: put in the name je want for the search engine on your site.

As for Search engine description: here you can write a fitting description for you custom search engine.

Now at Search engine keywords: here you are beginning to tweak the results and optimize them for you visitors...hte keywords you put in here are taken into account to determine more relevant search results example "Joomla" or even "Joomla seo"

The next items are the Sites to search, here you fill in the websites that should have priority in the results of your search.

Now we come to the option to search just these sites, or the whole Internet.
My preference is the whole Internet, because otherwise I would impose my preferences to much.

Further more you have an option to let other people work with you to put in more preferred sites into the URLs section..

And af course you have to agree to the Terms of Service.

If you click "next" you are ready.....that is with the creation of you special search engine.

How can you integrate the Search engine into your Joomla site

To integrate the Google CSE, we first need to get the coding for the Custom Search Engine.
If you pushed "Finish", than you got a screen with one it the terms that says "control panel".

Choose here "Code"

You could start with the standard code, but this is only for testing purpose.
You can use this code to show the search results outside of your website.
Just try an example down below.

You can even set some simpel layout and logo.
But this is not really what we want, is it?

{mospagebreak title=Search Engine Results Page}

Create the Search Results Page

You want to fit the results page into the layout of your website, as a page that fits perfectly into your Joomla website.

Go back to the control panel , choose code and now choose the second option.
We need these two code sections to make it work.

Now we need to create a new page in Joomla.
I created a separate section and categorie because in don't want the results page to be part of some other content categorie.
You could also make a static page for it if you want to.

Now give this page a smart titel to fit the content, on this site it is called "Pathos SEO Search Engine".

In this page you copy the code that you find in the Second part of the code page, this it the coding for the Search results page.

If you paste the code, take care it is really the inserted as pure HTML code , for me that is easy, because i work with the JoomlaFCK editor.
As for standard Joomla site, you might have to choose for the option"No Wysiwig Editor" in your globalconfig!!

if you get strange results, please check this coding first!

I gave this page a menu link to make sure that I got the right URL to make it easier to copy and past it into the Google code for the results page.

The URL of the page you just created you have to copy into the first coding option
You will see that once you filled this Field the code in the first section changed.
Make sure you press "save changes" !!

You really should see the code change in the first section of the screen.
The coding of the second field is also somewhat different from the previous, so you have to copy and past this again in the results page you created.

This code we are going to use for your Custom Search Module.

{mospagebreak title=CSE Module creation}

Google Custom Search Engine Module

We are going to make a special Search Engine Module for website integration.
This is a simpel as creating any module that contains your own coding.

Go into the administrator section Site Modules , choose "New".
Give the module a name that is logical to you, you don't need to publish the title for the front-end, but you can choose to if you want.

Paste the code into the "Code" field form the first section of the Google screen.
Choose a module position to fit your template, save and publish the module and test the results in the front end.

You will find out that the color layout doesn't fit your site yet, but that the results page in nicely integrated into the template.

Change the Look and Feel Custom of your Search Engine

Go back to the Google "Control panel" and now choose for "look and feel".

Here you can change a number of items to make them fit to your CSS layout items.
if you have made the changes and saved them, they are directly actieve, you don't have to make any alterations to your website template.

If you have done everything the right way, you now have your own Google Custom Search Engine in your Joomla website.

P.s. if you have a Google adsense account, you can attach this to you account.
You will receive a confirmation mail to reply to the Google Co-Op may acces your adsense account.