Add a Custom Google Search Engine

Posted by gerdamigerdami on 1178628200|%e %b %Y|agohover, last edited by RobElliottRobElliott on 1257323692|%e %b %Y at %H:%M |agohover

rating: +13+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

show



Step 2: Get the Google CSE Code

show



Step 3: Select how to display results

show



Step 4: Final

show



Additional Instructions: Results hosted on your Wikidot page

show


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: +13+x

Authors

gerdamigerdami. Please visit his/her userPage.

makimaki. Please visit his/her userPage.

RobElliottRobElliott. Please visit his/her userPage.


fold
Pictures
gerdamigerdami 1178628708|%e %b %Y, %H:%M %Z|agohover

Could not upload pictures due to page restrictions. So I linked to another wikidot location.

lowkarma.pnggerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
reply | options
unfold Pictures by gerdamigerdami, 1178628708|%e %b %Y, %H:%M %Z|agohover
fold
Re: Pictures
hartnellhartnell 1191469561|%e %b %Y, %H:%M %Z|agohover

Er, gerdami, you are an admin, right? —hartnell

reply | options
unfold Re: Pictures by hartnellhartnell, 1191469561|%e %b %Y, %H:%M %Z|agohover
fold
Get an error when adding
devvikidevviki 1191444186|%e %b %Y, %H:%M %Z|agohover

Get an ajax error when putting this embed statement into a page…
"The ajax request failed. Please check your internet connection or report a bug if the error repeats during your work". Keeps repeating…

reply | options
unfold Get an error when adding by devvikidevviki, 1191444186|%e %b %Y, %H:%M %Z|agohover
fold
Re: Get an error when adding
hartnellhartnell 1191469630|%e %b %Y, %H:%M %Z|agohover

Do you have your own google search coop code to embed? —hartnell

reply | options
unfold Re: Get an error when adding by hartnellhartnell, 1191469630|%e %b %Y, %H:%M %Z|agohover
fold
Adsense Search
SamProofSamProof 1230875565|%e %b %Y, %H:%M %Z|agohover

Hey does this work with the adsense search automatically (as it's set up in wikidot) or would you have to go set up an adsense search specifically?

reply | options
unfold Adsense Search by SamProofSamProof, 1230875565|%e %b %Y, %H:%M %Z|agohover
fold
Re: Adsense Search
Helmuti_pdorfHelmuti_pdorf 1230881928|%e %b %Y, %H:%M %Z|agohover

Not sure what you mean with "specifically adsense search"?

This has nothing to do with wikidot!

1. You have an account at google and can
2. setup your OWN search machion for specific sites & or sub pages…
3. The adsense coming ( if allowed by you) on such search machine output has nothing to do with wikidot or YOUR adsense setup on wikidot account / site manager.

This is only a search machine limited to specified domains…
Try our search machine on the Search Center and you will see the outcome…

Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)

Wollen Sie Wikidot helfen im deutschen » Handbuch ?

reply | options
unfold Re: Adsense Search by Helmuti_pdorfHelmuti_pdorf, 1230881928|%e %b %Y, %H:%M %Z|agohover
fold
Adding Google Custom Search error
splashpointsplashpoint 1256392177|%e %b %Y, %H:%M %Z|agohover 
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
    new google.search.CustomSearchControl('013549970210526421991:uywkjw_znii').draw('cse');
}, true);
</script>

This is the snippet I got from google. When I pasted onto my webpage I get an error message ' sorry no match for the embedded content'. I use the [[embed]] code block. Can anyone tell me what's wrong? Do I need to specify code type?

last edited on 1256433770|%e %b %Y, %H:%M %Z|agohover by leiger + show more
reply | options
unfold Adding Google Custom Search error by splashpointsplashpoint, 1256392177|%e %b %Y, %H:%M %Z|agohover
fold
Re: Adding Google Custom Search error
leigerleiger 1256434244|%e %b %Y, %H:%M %Z|agohover

This is a workaround, but it should work…

Open notepad or some other text editor and add this to the editor:

<html>
<body>
 
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
    new google.search.CustomSearchControl('013549970210526421991:uywkjw_znii').draw('cse');
}, true);
</script>
 
</body>
</html>

Then save the file as code.html, and upload the file to the wikidot page you're adding it to.

Next, edit the wikidot page, and type this:
[[iframe http://SITENAME.wikidot.com/local--files/PAGENAME/code.html width="100%" height="500px" frameborder="0"]]

Remember to replace the "SITENAME" with your wiki's name, and "PAGENAME" with your wikidot page's name.

I've done the exact same thing here with different code and that method worked fine :)

— Shane | Blog | CycloDS Revolution | Compatibility List | Get your free Wiki! | XBL: leiger40

last edited on 1256434355|%e %b %Y, %H:%M %Z|agohover by leiger + show more
reply | options
unfold Re: Adding Google Custom Search error by leigerleiger, 1256434244|%e %b %Y, %H:%M %Z|agohover
fold
HTML in Wikidot?
RealG187RealG187 1257303008|%e %b %Y, %H:%M %Z|agohover

Can you use HTML in Wikidot?

reply | options
unfold HTML in Wikidot? by RealG187RealG187, 1257303008|%e %b %Y, %H:%M %Z|agohover
fold
Re: HTML in Wikidot?
Ed JohnsonEd Johnson 1257304683|%e %b %Y, %H:%M %Z|agohover

Not directly. Only as described above by embedding it a code block or uploading it to a page and then iframing it.

-Ed

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

reply | options
unfold Re: HTML in Wikidot? by Ed JohnsonEd Johnson, 1257304683|%e %b %Y, %H:%M %Z|agohover
fold
Re: HTML in Wikidot?
RealG187RealG187 1257305058|%e %b %Y, %H:%M %Z|agohover

I can't get it working :(

reply | options
unfold Re: HTML in Wikidot? by RealG187RealG187, 1257305058|%e %b %Y, %H:%M %Z|agohover
fold
NOT WORKING!!
RealG187RealG187 1257304956|%e %b %Y, %H:%M %Z|agohover

http://bestwikiever.wikidot.com/code-blocks

It's not working for me

I want the search to appear on this page:
http://bestwikiever.wikidot.com/mpglinks

last edited on 1257305005|%e %b %Y, %H:%M %Z|agohover by RealG187 + show more
reply | options
unfold NOT WORKING!! by RealG187RealG187, 1257304956|%e %b %Y, %H:%M %Z|agohover
fold
Ed JohnsonEd Johnson 1257305397|%e %b %Y, %H:%M %Z|agohover

You're missing the [[iframe ...]] piece of the puzzle.

[[iframe http://bestwikiever.wikidot.com/code-blocks/code/1 width="400px" height="75px" frameborder="0" scrolling="no"]]

yields this result from your page:

You should also surround your code block with comment tags to hide it on the page:

[!--
[[code type="html"]]
<html>
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#000000;color:#FFFFFF">
  <div class="cse-branding-form">
    <form action="http://operation420.net/search" id="cse-search-box">
      <div>
        <input type="hidden" name="cx" value="partner-pub-3003393768631515:x62wrv-ofyc" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" name="q" size="31" />

        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" />
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>

</div>
</html>
[[/code]]
--]

-Ed

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

reply | options
unfold by Ed JohnsonEd Johnson, 1257305397|%e %b %Y, %H:%M %Z|agohover
fold
RealG187RealG187 1257305640|%e %b %Y, %H:%M %Z|agohover

No one mentioned I had to add "/code/1" after the URL…

Anyways, thank you for your quick help…

last edited on 1257305699|%e %b %Y, %H:%M %Z|agohover by RealG187 + show more
reply | options
unfold by RealG187RealG187, 1257305640|%e %b %Y, %H:%M %Z|agohover
fold
Ed JohnsonEd Johnson 1257305982|%e %b %Y, %H:%M %Z|agohover

You should have a look at this:
http://community.wikidot.com/blog:html-within-wikidot-type-2

Techniques for iframing code blocks are all over the forums, help and how-to pages. I think RobElliott spends 3/4 of his time responding to "How do I embed xxx?" and the answer is always about the same. Once you understand how html code blocks and iframes work together, you'll have added an excellent weapon to your Wikidot arsenal (pun intended!)

-Ed

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

reply | options
unfold by Ed JohnsonEd Johnson, 1257305982|%e %b %Y, %H:%M %Z|agohover
fold
pieterhpieterh 1257339089|%e %b %Y, %H:%M %Z|agohover

I think RobElliott spends 3/4 of his time responding to "How do I embed xxx?" and the answer is always about the same.

Rob's patience is legendary. We're planning a new tag, [[html]] that will make this work instantly.

The Wikidot Blog | My other works

options
unfold by pieterhpieterh, 1257339089|%e %b %Y, %H:%M %Z|agohover
fold
[[html]]
David MarseillesDavid Marseilles 1257473939|%e %b %Y, %H:%M %Z|agohover

We're planning a new tag, [[html]] that will make this work instantly.

You probably already know this, and it's probably the reason you are planning the tag, but just so I'm on the record, that sounds fantastic.

last edited on 1257481108|%e %b %Y, %H:%M %Z|agohover by David Marseilles + show more
options
unfold [[html]] by David MarseillesDavid Marseilles, 1257473939|%e %b %Y, %H:%M %Z|agohover
fold
Re: [[html]]
rhombus prhombus p 1257474875|%e %b %Y, %H:%M %Z|agohover

Rob's patience is legendary. We're planning a new tag, [[html]] that will make this work instantly.

so no more logging out and logging back in to get html to work? that would be sweet!

Rhombus_Productions-3Blackn.png
Rhombus Productions main | My Current Projects | Jokes!| Battle Ground
options
unfold Re: [[html]] by rhombus prhombus p, 1257474875|%e %b %Y, %H:%M %Z|agohover
fold
Re: [[html]]
leigerleiger 1257526710|%e %b %Y, %H:%M %Z|agohover

Uh… since when do you need to log out to get iframed html to work? :S

Am I misunderstanding something here.. ?

— Shane | Blog | CycloDS Revolution | Compatibility List | Get your free Wiki! | XBL: leiger40

options
unfold Re: [[html]] by leigerleiger, 1257526710|%e %b %Y, %H:%M %Z|agohover
fold
Re: [[html]]
RobElliottRobElliott 1257539182|%e %b %Y, %H:%M %Z|agohover

Rhombus, you should never need to log out and back in to get a codeblock to work. It just needs the browser cache clearing then a refresh. So on Firefox it's ctrl+shift+delete then in the details section of the popup window make sure the cache (only) is checked, then click OK. Then ctrl+r to refresh.

ad5.png
last edited on 1257539215|%e %b %Y, %H:%M %Z|agohover by RobElliott + show more
reply | options
unfold Re: [[html]] by RobElliottRobElliott, 1257539182|%e %b %Y, %H:%M %Z|agohover
fold
Ed JohnsonEd Johnson 1257315992|%e %b %Y, %H:%M %Z|agohover

Anyways, thank you for your quick help…

You're welcome. Sometimes it works out that way. I was posting responses almost as fast as you were asking questions! :)

Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog

reply | options
unfold by Ed JohnsonEd Johnson, 1257315992|%e %b %Y, %H:%M %Z|agohover
fold
Security risk?
RealG187RealG187 1257560639|%e %b %Y, %H:%M %Z|agohover

Wouldn't allowing HTML be a security risk?

last edited on 1257614812|%e %b %Y, %H:%M %Z|agohover by gerdami + show more
reply | options
unfold Security risk? by RealG187RealG187, 1257560639|%e %b %Y, %H:%M %Z|agohover
fold
Re: Security risk?
James KanjoJames Kanjo 1257562268|%e %b %Y, %H:%M %Z|agohover

Not if it is iframed on a different domain. That is what the planned HTML block will do.

λ James Kanjo | blog | photos | contact

last edited on 1257614832|%e %b %Y, %H:%M %Z|agohover by gerdami + show more
reply | options
unfold Re: Security risk? by James KanjoJames Kanjo, 1257562268|%e %b %Y, %H:%M %Z|agohover
fold
RealG187RealG187 1257565771|%e %b %Y, %H:%M %Z|agohover

What do you mean? How is that so?

reply | options
unfold by RealG187RealG187, 1257565771|%e %b %Y, %H:%M %Z|agohover
fold
Re: Security Risk?
James KanjoJames Kanjo 1257595079|%e %b %Y, %H:%M %Z|agohover

Well, all web browsers have inbuilt security which prevents a webpage from controlling a different webpage in your browser.

If you create code on Wikidot.com, then you can use it to control Wikidot.com. However, if you create code on Google.com, you will not be able to control Wikidot.com with it. Google code can only control the Google website. Wikidot code can only control the Wikidot website.

So the HTML module will put your code on a different website so that it can't control Wikidot.com. Does this make more sense now?

λ James Kanjo | blog | photos | contact

reply | options
unfold Re: Security Risk? by James KanjoJames Kanjo, 1257595079|%e %b %Y, %H:%M %Z|agohover
Add a new comment
Page tags: gadget google _interface _l4 search search_engine
page_revision: 65, last_edited: 1257323692|%e %b %Y, %H:%M %Z (%O ago)
EditRate (+13)Tagsdiscuss (25) History Files Print Site tools+ Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.