Add a Custom Google Search Engine

Posted by gerdami on 08 May 2007 12:43, last edited by James Kanjo on 09 May 2010 05:28

Tags: gadget google search search_engine

rating: +15+x

This HowTo describes step by step how to add a customised Google search engine to a Wikidot webpage.


Method 1:

(Use the code from Google CSE: "Edit Search Engine" => "Control Panel" => "Code")

Instructions

Step 1: "Html" scripting on a page



Step 2: Get the Google CSE Code



Step 3: Select how to display results



Step 4: Final



Additional Instructions: Results hosted on your Wikidot page


Become a Master

- for Step 1: http://community.wikidot.com/howto:use-html-scripting
- for Step 3: http://www.developingwebs.net/html/targetattribute.php


Method 2:

(Use the code from: Google CSE's main page => "Add this search engine to your blog or webpage"; in other words:"Google CSE gadget + [[embed]]")

Drawbacks of this method

- clutter: the search field looks like this:

Method 1 Method 2
maki_m1.Png maki_m2.Png


- not properly displayed in some browsers:
The gadget does not get properly displayed in Opera:
http://community.wikidot.com/forum/t-126892
http://community.wikidot.com/forum/t-75551/google-cse-widget-in-opera-9-51

Instructions

This gadget uses the [[embed]] function described Embedding help page. However, it is difficult to find it in the Google Gadgets library at http://www.google.com/ig/directory?synd=open

(1) Go to http://www.google.com/coop to create your customised Google search engine

(2) Follow Google's instructions (It's so easy !)

(3) Go back to http://www.google.com/coop/cse/overview and look for My search engines
step1.jpg

(4) Click on homepage
step2.jpg

(5) And then on Add this search engine to your blog or webpage
step3.jpg

(6) Click on the Get the code button

(7) Paste it on your wikidot page as follows:

[[embed]]
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/coop/api/007000168596185870345/cse/daaaga1ewj4/gadget&amp;synd=open&amp;w=275&amp;h=65&amp;title=Wikidot&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
[[/embed]]

(8) And the result is:


About the CSE given as an example above:

This customised search engine currently searches 7 sites:


Google CSE Support

http://www.google.com/support/forum/p/customsearch?hl=en
http://getsatisfaction.com/google/products/google_google_co_op
http://googlecustomsearch.blogspot.com

Method 3:

The method below is slightly easier and allows you to specify whether the search is just on your own site or across the whole internet. It uses a codeblock and iframe combination.

Codeblock

Enter the codeblock below on your page. You can change the presentation, for example remove the border, by altering the CSS properties and values in the div. By using target="google_window" this opens the results in a new window/tab. If you want the results to open in the same page then remove the target=

You will also need to change the url to your own and the text in the value="wikidot.com" checked /> Search Only wikidot.com<br /> line.
As you can see, you can also specify whether the search defaults to your site, in which case you add the word "checked". Or you can search the web by default, in which you enter "unchecked".

[!--

[[code type="html"]]
<html>
  <body>

<form method="get" action="http://www.google.com/search" target="google_window">

<div style="border:1px solid #468259;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text"   name="q" size="25"
 maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="sitesearch"
 value="wikidot.com" checked /> Search Only wikidot.com<br />
</td></tr></table>
</div>

</form>

  </body>
</html>
[[/code]]

--]

Iframe

then underneath the codeblock, on the same page, add an iframe to reference that codeblock:

[[iframe http://YOURSITE.wikidot.com/YOURPAGE/code/1 frameborder="0" scrolling="no" width="350px" height="75px"]]

Replace YOURSITE and YOURPAGE with the name of your site and the page where you have put the codeblock. If it is the first or only codeblock on that page then use /code/1, if it's the second then use /code/2 and so on.

This gives the result below:

About this page

Rate this solution

If you think this solution is useful please increase the rating.

rating: +15+x

Authors

gerdamigerdami. Please visit his/her userPage.

makimaki. Please visit his/her userPage.

RobElliottRobElliott. Please visit his/her userPage.



Add a New Comment

Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.