By the way, you might have missed it at Google I/O, but the Custom Search Engine team has made it really easy to add custom search to any site. Google recently introduced Web Elements, which are simple snippets of code you can copy/paste into your site’s HTML.
From the Custom Search Element web page, I copied the code. Then in the WordPress control panel under Appearance->Widgets, I clicked to add a new “Text” widget, changed the title to “Search (CSE)” and pasted the code into the box:
Click “Done” and then “Save Changes” and that’s it! No need to register, sign up for anything, get a user ID, or anything like that. You can see the result on the right-hand sidebar of my blog.
{ 50 comments… read them below or add one }
Cool tool, but can you obtain the keywords typed into the search using Google Analytics, or from another source?
Simple enough (-; ,Worst thing is with Adsense we are not allowed to change look of searchbox,means accept it whether it matches your design/layout or not.I am not getting catch behind,Results are loaded in Google page then what’s google’s problem behind not allowing to modify search box look !!!
Ohh.,.. Great Google Web Elements has really awesome stuff.
BTW, i am using Adsense CSE on my blog, and yes i agree its really powerful search tool for any site.!!
It is really nasty when implemented in a sidebar – you click a pagination link and have to scroll back up the page.
Much better to use it in a widget area either above or below post content.
The other major problem is this doesn’t show the canonical URL, to identify tag pages etc that many be more or less relevant to a searcher. Often I prefer a tag page for a fast overview.
I would love a search where you can optionally search without including comments, or just the comments.
For many bloggers, the revenue from an Adsense based search would make more sense
you could always pay $100/year n completely customize the look n functionality of the search box
What I don’t get is what is Custom Search? I have AdSense for Search which includes the code for a google search box on my website and the little revenue I make from it shows up on my AdSense for Search reports.
The code is different from the code you just posted. It has id=”cse-search-box” and different hidden form elements such as name=”cx” value=”partner-pub-xxxxxxxxxxx” .
Are we talking about the same thing?
Exactly as advertised, it just took few minutes. Previously it took several hours and headaches. This is a neat tool.
Before I go digging through scripts, can you tell me if custom search works on flat file databases? I running an old install of ht/dig.
A blast from the past
2005 You might wish to consider adding a Google Site Search box on your blog.
2006 My wish for 2006, is that you install a google site search box on your blog.
Wow, those web elements look great! I will start to use the conversation element!
Very helpful, I know of several blogs that I could use a custom search like that.
What are the chances that those URLs are going to be crawled since it’s javascript? has google tested that?
@Keniki – :~)
Thanks Matt, how did you know I didn’t have time to check out I/O yet. Going to put some time aside tomorrow to check it out..
Matt, been using many Google CSE from their advent, they are great. However, IMO, nothing has changed as they always offered code to simply copy & paste.
Keniki , I think you are lost.
The tool looks nice in first instance. It has a usability flaw however. If you type a search term that does not lead to any search results you will not get a message at all.
Does this also work with the search box that leads to Adsense income? Currently I do not use the adsense search box because I would llike to keep people on my site. Using Adsense for search this means that I must change the layout of my page to fit the search results.
Hey Matt,
I thought you moderated your comments ????
Paul
Hi Matt,
On your blog, from a usability point of view, the SER’s are not very clear to me.. At first I thought your CSE wasnt working.. Looking more closely it displays the SER in a kinda AdWords style below the search bar.. I suggest guiding people to a seperate page where the results are more easy to look at.
Laters,
Ok Matt, I see the difference, coool
I’d love to use custom search and direct a lot of searchers to it.
Today I bundle a Conduit toolbar with my product which has a Google search box on it. I would *love* to use my own toolbar and link a search box to my own custom box and earn money on ad clicks. However, you don’t allow that traffic is sent to a search page from a toolbar (although Conduit may?!).
Any idea if G is going to remove this limitation?
Looks great to me!
wanna try it out on my blog
thanks Matt!
Cool that’s a good one down the line
Will be using it today
Hi Matt
I though Firefox and IE platforms were displaying different results with the same keywords in google, however I have identified that when I am logged into my Google Account our keywords searches are improved dramatically? Why is this?
Keniki
Just a reminder “Keniki, I’m going to prune some of your comments; if you post 7-8 comments in quick succession, it doesn’t give everyone else a chance to converse as much.”
Matt, I agree with Andy Beard’s comment above: the sidebar is not the best place for search results IMHO. Pagination is awkward, and the SERP is very hard to read in such a narrow space. Poor usability doesn’t do justice to the power of CSE.
Odd question, Matt: with the “other” CSE code, it has a tendency to run interference if it’s placed inside of a nested form in IE (for some reason, FF likes it, though). I just fixed a page two days ago where that exact behavior occurred.
I haven’t tried this yet, but will it interfere as well?
Thank you Matt, i have added Google Custom Search on my blog about french SEO : http://www.iceranking.com
Bad practice to nest a form inside another form.
Question Guys!!!
If i have one main site where I sell my products, and I get another 100 sites that are strictly informational sites with 1 or 2 links to my main site. All of those 100 sites have different C class IP’s will Google Penalize me for Spamming??? Again they are all info sites with relevant information. Please let me know if it will be spamming???
I tried to add this to my blog(blogspot) in text gadget, it added properly, but it is taking lot of for loading when I want to view Blog. Later I noticed that there is HTML/Java Script gadjet, I added there it is working fine. Thanks
Hey Matt,
I have a blog in Wordpress, I have tried to add the above given code in my blog but at the last step when i tried to save the code JavaScript code becomes invisible..
I mean my wordpress blog is not supporting JavaScript code what should i have to do now..
Pls help…
Thanx
matt my google apps hosted blog got hacked by some sort of DNS redirect it is a music blog i have poured my heart and soul into please help! the site is http://www.musicandartsblog.com. it is not a one page spam site
here is the story on my DNS Google apps hijack. i just read your post about wordcamp and how its so great to blog, but it really sucks when all your work gets redirected to an indian spam site. im yelling into the vacuum of space and time that is google (the internet) and hope that someone may hear: please help!
blogger custom domain DNS hijacked
Matt,
Can you either help me or direct me to someone who can solve a strange mystery with my Google placements.
Will Pay
That is pretty cool. It does look a little squished in your sidebar, but then again I’m looking at it in IE 6. Perhaps it will look better in Firefox.
We haven’t used custom search for a while because it was a little difficult to match up the design with your site. Hopefully this improves the ability to customize so we’ll check it out. Thanks
It looks squished in IE7 too.
The script src code did not just show up when I saved it. When I went back to my blog it showed up all the codes (like when I miss a tag).
What’s wrong? I am using Firefox.
Is elements just a marketing name for javascript now? They all seem to follow completely different apis / code styles. I’d expected them to all be opensocial gadgets.
This is great Matt. Now its easier and don’t need to log-in just to get the said search bar. Aside from that I don’t need to mind what appropriate width to use, its auto-resize.
Google teams are really moving the IT further… I keep on tailing you guys.
This information is very helpful. Very feasible for me as a reference. Thanks .. Oops .. Btw, your blog is very good and clean. I really like it:)
that was very helpful I just did mine. And it works great ! but I got a question how do I customize the link color and text to match my website?
Hi,
Offtopic… I see you’re usinf Thesis 1.5 WP theme.
What can you tell about it (for good SEO)?
Do you still use SEP plugins like All in One SEO Pack or HeadSpace2?
Thanks!
Does putting this custom search in your site benefit your rankings or pay you like adsense?
I really like the tool. And the great thing about it is easy to implement, sometime we need to install a blog as a part of our services, we can add it…
wow! This is great. I was looking for Custom Search for one of my websites. This way is much easier for WP users.
Regards.
Hi Matt,
Thank you for your article. I added the same code that you used in your right sidebar (with the exception of adding an enclosing div tag with a width of 208px). However, when I do a search in Firefox half a screen of blank space displays before the search results display. The same thing happens if I remove the enclosing div tag. I don’t have this problem in Internet Explorer. I was wondering if you had any suggestions for how I could fix this.
Here is the code I used:
Loading
google.load(’search’, ‘1′);
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw(‘cse’);
}, true);
Lea
thanks
I made it on my site
it is really helpful, the problem is it is supposed to be associated with my adsense account, however every time I try it says :”We apologize for the inconvenience, but we are unable to process your request at this time. Our engineers have been notified of this problem and will work to resolve it.”
Thanks! I’ll try it on my website soon.
Thank you for the tutorial sir, this information is very useful to me in great, very still new in the world of blogging. It’s just that my writing should be translated with Google Translate .. hahaha …