Posted by gerdami on 08 May 2007 12:43, last edited by GoVegan on 09 May 2010 05:28
: gadget google search search_engine
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
(1) Make a new page in your site called: "yoursitename.wikidot.com/code-blocks
(2) Enter this code inside:
[[code type="html"]]
<html>
</html>
[[/code]]
(3) Save then clear your browser cache and refresh the page.
Step 2: Get the Google CSE Code
(1) Go to the web site of your search engine
(2) Log in
(3) Click on "Edit Search Engine":
(4) Click on "Control Panel":
(5) Click on "Code":
(6) Click once in the code box - the code gets automatically selected. Copy it (Ctrl + C) and paste it (Ctrl + V) into the code block you created in "Step 1" - just between the "<html>" and "</html>" tags.
Step 3: Select how to display results
(1) Look up the code for something like "<form action="http://www.google.com/cse" id="cse-search-box">;
(2) Change it to <form action="http://www.google.com/cse" id="cse-search-box" target="_top"> if you want the results to display in the same page;
or change it to <form action="http://www.google.com/cse" id="cse-search-box" target="_blank"> if you want the results to display in a new window/ tab.
If you want the results to display on your Wikidot page instead of a Google hosted page, the procedure is a little bit different. Look here.
(3) Save the page
Step 4: Final
(1) Go to the page where you want to put the search field
(2) Enter this:
[[iframe http://yoursitename.wikidot.com/code-blocks/1 align="middle" frameborder="0" scrolling="no" width="360px" height="40px"]]
You can choose if you want to have a border or not, and how thick it should be, and change the value of "frameborder="0" respectively.
Same holds for "align", "scrolling", "width" and "height". Note that different browsers display the frame with slight differences so test the page before settling on "width" and "height".
(3) Save and you are ready! :)
Additional Instructions: Results hosted on your Wikidot page
(1) From the Google custom search control panel, choose the code function:
(Have a look at this howto:use-html-scripting to understand how to embed the above copied code.)
(2) If everything is done correctly it should work like this (perform a search to see it in action):
Google Search
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 enginesstep1.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&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 gerdami . Please visit his/her userPage.
maki maki . Please visit his/her userPage.
RobElliott RobElliott . Please visit his/her userPage.
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!
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…
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 ?
<scriptsrc="http://www.google.com/jsapi"type="text/javascript"></script><scripttype="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?
This is a workaround, but it should work…
Open notepad or some other text editor and add this to the editor:
<html><body><scriptsrc="http://www.google.com/jsapi"type="text/javascript"></script><scripttype="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 :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Not directly. Only as described above by embedding it a code block or uploading it to a page and then iframing it.
-Ed
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.
[[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
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
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.
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.
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
Uh… since when do you need to log out to get iframed html to work? :S
Am I misunderstanding something here.. ?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
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.
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! :)
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?
Related articles
Comments
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!
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…
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 ?
<scriptsrc="http://www.google.com/jsapi"type="text/javascript"></script><scripttype="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?
This is a workaround, but it should work…
Open notepad or some other text editor and add this to the editor:
<html><body><scriptsrc="http://www.google.com/jsapi"type="text/javascript"></script><scripttype="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 :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
Not directly. Only as described above by embedding it a code block or uploading it to a page and then iframing it.
-Ed
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.
[[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
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
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.
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.
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
Uh… since when do you need to log out to get iframed html to work? :S
Am I misunderstanding something here.. ?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server
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.
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! :)
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?