Could not upload pictures due to page restrictions. So I linked to another wikidot location.
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
This HowTo describes step by step how to add a customised Google search engine to a Wikidot webpage.
Table of Contents
|
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 |
---|---|
- 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


(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&synd=open&w=275&h=65&title=Wikidot&border=%23ffffff%7C3px%2C1px+solid+%23999999&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:
- http://wdthemes.wikidot.com,
- http://handbook.wikidot.com,
- http://snippets.wikidot.com,
- http://community.wikidot.com,
- http://www.wikidot.com
- http://www.wikidot.org
- http://skins.wikidot.com
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.
Authors
gerdami. Please visit his/her userPage.
maki. Please visit his/her userPage.
RobElliott. Please visit his/her userPage.
Could not upload pictures due to page restrictions. So I linked to another wikidot location.
Er, gerdami, you are an admin, right? —hartnell
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…
Do you have your own google search coop code to embed? —hartnell
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?
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
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?
This is a workaround, but it should work…
Open notepad or some other text editor and add this to the editor:
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 (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
Can you use HTML in Wikidot?
Not directly. Only as described above by embedding it a code block or uploading it to a page and then iframing it.
-Ed
Community Admin
I can't get it working :(
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
You're missing the [[iframe ...]] piece of the puzzle.
yields this result from your page:
You should also surround your code block with comment tags to hide it on the page:
-Ed
Community Admin
No one mentioned I had to add "/code/1" after the URL…
Anyways, thank you for your quick help…
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
Community Admin
Rob's patience is legendary. We're planning a new tag, [[html]] that will make this work instantly.
Portfolio
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.
so no more logging out and logging back in to get html to work? that would be sweet!
Uh… since when do you need to log out to get iframed html to work? :S
Am I misunderstanding something here.. ?
~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: Wikidot Editor, Official Docs
Other: YouTube (gaming, primarily Minecraft)
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.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
You're welcome. Sometimes it works out that way. I was posting responses almost as fast as you were asking questions! :)
Community Admin
Wouldn't allowing HTML be a security risk?
Not if it is iframed on a different domain. That is what the planned HTML block will do.
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
What do you mean? How is that so?
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 | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript