|
|
How can I add a Google search box to my Web site?Dave, I keep visiting sites and seeing these cool search boxes that let you either search their entire site or search the entire Google database, all without leaving that page! I want to have something like this and would appreciate your helping me figure out the code needed.
This is a question that's going to result in some HTML listings. You know that, so there's no reason to panic! First off, the good news. Google itself actually has a nice page offering you HTML code you can just cut and paste onto your own Web pages to produce the search box you seek, and some variants beside. Just check out Google Free. Instead of relying on the bright sparks at Google, though, let's go through the steps of building our own search box instead, so you'll be able to see how it works. Also, not to pick on Google because I think the world of those folk, but their HTML samples could be cleaned up a bit, usually, so I've also recast it as proper XHTML rather than somewhat sloppy HTML. Just don't tell Larry and Sergey, okay? The basic technique involved here is to be able to manipulate one of the variables handed to the Google search engine, a variable called sitesearch. Set it to a null value and you're searching the entire World Wide Web, but set it to a specific domain and it's constrained exactly as if you had typed in the Google special notation site:domain. In addition to that, you need an input field and a submit button. Put them all together and here's the minimalist Google search form that lets the user alternate between just your site (well, in this case just my site) or the entire Web: <form method="get" action="http://www.google.com/search"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> <input type="radio" name="sitesearch" value="" /> The Web <input type="radio" name="sitesearch" value="askdavetaylor.com" checked /> Ask Dave Taylor<br /> </form>There are some additional tweaks we can apply to make it a bit more fancy, including changing the radio buttons to a single check box, and aligning things a bit more nicely using a table and some simple CSS: <form method="get" action="http://www.google.com/search"> <div style="border:1px solid black;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="askdavetaylor.com" checked /> only search Ask Dave Taylor<br /> </td></tr></table> </div> </form>Here's how that renders when included on an HTML page: If you'd like to use this on your own site, simply change the occurrences of askdavetaylor.com as appropriate. Not too hard at all!
Related HTML, JavaScript and Web Site Programming articles:
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔ Can I embed a Facebook search box on my blog site?I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔ Can I use CSS for drop shadows on my blog?I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔ How can I embed interactive photo panoramas on my site/blog?I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔ How can I create a Twitter search URL shortcut?I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Categorized:
HTML, JavaScript and Web Site Programming
(Article 3802,
Written by Dave Taylor)
Tagged: Previous: Selling jewelry on eBay, does it need to be appraised? Next: Should students use Google for research? Reader Comments To Date: 817اعلانات مبوبه said, on July 7, 2010 9:18 AM:
i luv u.....u solve my search problem for about 6 months now i have no problem for search in ma blog....bye and god bless u ...angel Geoff said, on July 11, 2010 8:52 AM:
Thanks this code works really well on my site. You've helped me solve a problem. Dave Taylor said, on July 11, 2010 9:12 AM:
Going wayyyy back here, Bradley, the code you list (which I just tweaked so it'd show up, btw) has a huge problem: the "action" attribute to the FORM tag needs to be the URL of the script that is going to get the query and process it. By having it as action="#" what you're telling your Web browser is that the current page (e.g., your own page) is going to process the search query, which is, of course, incorrect. Go back to my original code and you'll see that I have a URL that's the Google search back end. Try that! hamid sayyed said, on July 13, 2010 11:39 AM:
very good script. send me more scripts like this . good work kep it up.......... Angela said, on July 17, 2010 10:21 AM:
Dave Thank you for your wonderful html code for adding a google search box. I have added this to the Website which I administer. I have only just started and understand very little HTML code. The search box is wonderful, but does not clear the search automatically. What other code should I use to clear the box for another search. priya said, on July 27, 2010 5:57 AM:
hi,, konteyner said, on July 27, 2010 1:32 PM:
I have only just started and understand very little HTML code. steve said, on July 29, 2010 6:01 PM:
Hi Dave - first off, thanks!! One question...how could I set this so that part of the search phrase was predetermined, with the users entry filling in part of it? i.e. - The user types in "rules", and the search is done for ["table tennis" "australia" "rules"]? Maged said, on August 4, 2010 9:44 PM:
thnx for the code i wanna ask if i can make the results appear in my websites not in google is this possible or not John Rock said, on August 5, 2010 11:49 PM:
thank to giving me right direction. Fhernkenstein said, on August 5, 2010 11:56 PM:
tnx very much dude,it helps to our computer project. Roger Lapin said, on August 8, 2010 9:56 AM:
Thanks for the info I have always wondered how people did this - will be trying this out later tonight. Roger Goeff said, on August 8, 2010 9:59 AM:
This is great - always wondered how to do it but what if I want to move the search box. Oh - don't worry i have seen some other comments about this - will try it out and see what happens Geoff. ken said, on August 9, 2010 1:10 PM:
Just what I was looking for. Chris Kayt said, on August 12, 2010 9:48 PM:
Hello! Thanks much for the info. I"m trying at the moment to put in a site search BUT I don't want to include the check box or the radio button. In other words I would like the default search to be my website without having to make the selection for my site or google at large. Is this easy to do. THANKS MUCH!!! Marcelo said, on August 15, 2010 2:06 PM:
GREAT code! I WAS TRY TO FOUND 3 DAYS, a code like this!!!!!!! thank yu SO MUCH Pascal said, on August 16, 2010 6:44 AM:
Great code. Pascal said, on August 16, 2010 2:39 PM:
To replce the submit button by an image, just do : input type="image" src="picture.gif" name="optional" instead of input type="submit" value="Google Search" / Leo said, on August 17, 2010 11:18 AM:
Hi everyone, thanks! ashu said, on August 19, 2010 8:08 AM:
sir,here form method="get"..is it possible in "post" Irena said, on August 20, 2010 8:01 AM:
Thanks, Dave Amarjs24 said, on August 21, 2010 1:44 AM:
Thanks, Dave Ravi said, on August 24, 2010 6:51 AM:
Hi.Dave i am visiting ur site.its very useful me for google code.and i also use it.its really working good.so i wil be thank for you.I wil be visit next time. Asiri Gayan said, on August 24, 2010 9:37 PM:
I need to modify my search bar only to view pdf files. please can you say how can I do that? Liz Purcell said, on August 26, 2010 5:13 PM:
Dave, Great search box! I recently signed up through Google, but am having great trouble understanding it so far. Yours is so nice and simple. taj1 said, on August 29, 2010 10:33 PM:
please whow clearly that how to submit url to google id your site is very useful for me i am using your site since last three years and i found all the time it very useful please improve it Rob said, on August 30, 2010 1:42 PM:
Does this work with a subsite? Like I am currently using a school lab website so for example it might be: http://lab.school.edu/classroom5/1a/johnsmith/ Being that this is the URL and its not a simple www.name.com will google search this site? Dylan said, on August 30, 2010 5:43 PM:
hey dave i've added this google code to my website but i dont know how to format it, like move it around my webpage, its currently stuck in one place and i cant move it. do i need to create a div class or what? Reg Whelan said, on September 3, 2010 5:23 PM:
Hi Dave Taylor, Mabry said, on September 7, 2010 7:53 AM:
Greetings! Your advice is so often spot on... Mohammad Muaaz said, on September 8, 2010 8:35 PM:
very good jennifer said, on September 9, 2010 8:40 PM:
Awesome!!! The code worked flawlessly. mike lesser said, on September 10, 2010 9:36 AM:
Dear Dave, Prakash said, on September 14, 2010 2:46 AM:
Hi Dave, Regards, Annie said, on September 17, 2010 8:22 PM:
Hi Dave can you please tell me if the above coding etc for a google search box will work on a flash template? Surya said, on September 20, 2010 12:15 PM:
Hey Dave, is it possible to make the search box give the suggestions google gives in realtime? wahyuwin said, on September 23, 2010 1:30 AM:
nice... vitali said, on September 23, 2010 9:05 PM:
I am looking some tech. help to install in my web side search box and propuce same search results using google or any another search eng. Any one from this board wanna joint this project? Asim Usta said, on September 29, 2010 8:38 AM:
Hi Dave. Great info thanks very much. I really benefited and now a regular of your site. Bless you. Elia said, on October 7, 2010 7:42 AM:
That is what I need for my site. Thank you! humniz said, on October 12, 2010 4:42 AM:
thank you so much....... Mugisha Leonard said, on October 20, 2010 1:38 AM:
This is very helpful..thanks to you Dave. I saw what i wanted. Justs said, on October 24, 2010 1:00 PM:
thanks for usefull info Mark said, on October 24, 2010 8:18 PM:
Can you change the text colour to white? My website has a black background. Thanks Kulvinder Singh said, on October 26, 2010 7:52 AM:
Tell me how can I display the google search results on my website's page. Ramkumar said, on October 26, 2010 11:15 AM:
HI DAVE.. please tell me how to add search engine to my webpage(website)? I don't need google search page to my website.. Search should be only with in my website.. So Please give me the basic ideas about adding search engine to my website?
Marin said, on November 8, 2010 6:41 AM:
Hi dave, I am having problems with adding "Google text input assistant" to my search.. Please help, thnx Dave Taylor said, on November 8, 2010 7:49 AM:
Uh oh, not sure what you're talking about, Marin. Are you talking about the auto-complete feature that Google now has on its search box? I think there's a fair amount of JavaScript behind making that work, and it's definitely not code that's included in this simple snippet. If that's what you're talking about, drop me a note and I'll see if I can figure out what's involved. ;-) Marin said, on November 8, 2010 10:05 AM:
Hi dave, I am having problems with adding "Google text input assistant" to my search.. it is virtual keyeboard which you can open by pressing image inside input tag.. Please help, thnx Sumit said, on November 9, 2010 8:49 AM:
Hey Dave, steven said, on November 15, 2010 7:10 PM:
Hi i'm trying to add a code or tag? to my website for an seo trial. but i have no clue how to do so. thanks in advance.. Help said, on November 20, 2010 4:03 AM:
Thanks for this, *Display search results in the same page; no pop-up to the Google Page Please help, am nearly done :D Help said, on November 20, 2010 4:09 AM:
Sorry for Double posting, Quote from: "Sumit" Thats what i mean Miguel said, on November 26, 2010 7:25 PM:
can i create a site just with google search? Nicson said, on November 27, 2010 8:26 AM:
Thank you Dave for your posts, they help me a lot. njb said, on November 29, 2010 12:35 PM:
Hi Dave, kalalloo said, on December 5, 2010 7:28 AM:
How do I embed a pandora media player into my website jada said, on December 11, 2010 4:20 PM:
Hi Dave i have a little problem concerning code that i can use to my website search box, so that if the visitor type the word on the search box he or she can able to get a reply Thank you Teo said, on December 16, 2010 8:54 AM:
Dave, I have an embarrasing question. I have installed your code but it's stuck on the left hand side of the page. How do I align it so that the google search box is in the center of the page? I have spent the last hour trying and nothing is working. also I created a search results page for my website. How do I go about getting the google search results to appear on my .html page? Sorry if those two questions have already been answered. Teo said, on December 16, 2010 9:23 AM:
Dave, I was able to center my google search box. I saw that you provided an answer to someone else. How do you make the text box longer in length? Charles said, on December 17, 2010 12:39 PM:
Dave, You have got to be one of the most patient guy I have ever come across. Thank you. Benjamin said, on December 20, 2010 1:52 AM:
Hi Dave, How can I add multiple websites and not just one. I want to tell the search engine to search a specific websites which I listed for my own used. How can I made the code like;- [[ input type="checkbox" name="sitesearch" Daniel said, on December 21, 2010 3:29 PM:
Thanks. It was so much easier then I thought. Dan said, on January 3, 2011 12:10 AM:
This list of comments has been alive for 7 years. It could be the longest comments list ever in the history of the web. ;-) Dan_ said, on January 3, 2011 12:15 AM:
oops. I meant 6 years. i need sleep. ;-) Benjamin said, on January 3, 2011 6:51 AM:
Hi Dave, How can I add multiple websites and not just one. I want to tell the search engine to search a specific websites which I listed for my own used. How can I implement this in php? Cathy Stanford said, on January 4, 2011 2:23 PM:
Your code worked beautifully! I had an old Google search box on the site and just discovered today that it was no longer functioning. Your code worked well and it seems to be able to search beautifully. Jeff said, on January 8, 2011 2:27 PM:
Hi Dave, Syamdersh said, on January 9, 2011 11:57 PM:
I have to integrate my site with google custom search.during this search only return pdf of the records from my site. Tell me about the solution? Harry Potter said, on January 10, 2011 2:47 PM:
Does you website have to be on Google for it to find it? bryonz said, on January 11, 2011 10:54 AM:
Dave, When I put in the code for the Google Search in my website which is currently under development, where on the site page would the Search Field appear? Is there some way I can control the location of the search field on the page? Thank you!! Vesna VK said, on January 11, 2011 1:49 PM:
Thanks so much for this tutorial and code, Dave! I didn't want to give readers the option of broadening their search to entire Web. It took me a while, but I figured out that instead of the line about the checkbox, I needed to use this instead: < input type="hidden" name="sitesearch" I saw other questions about this in this thread, so I thought I'd post the code for anyone else who wants to do that. Katie said, on January 11, 2011 6:49 PM:
Dave, I managed to get code on my site. It looks real nice, my name is checked but I can't seem to get any searches on my site, just google and the web if I uncheck my name. Katie said, on January 12, 2011 7:01 AM:
Please ignore my post. I got the code to work. Thank you very much Katie said, on January 12, 2011 8:08 AM:
Dave, I thought it was working. I won't comment again until you have had time to get back to me. It will only search the last post of whatever I'm trying to search for. If I try to hit on older posts,it states the same reason as up on top next to the embedded search from blogger that my permission settings make it this way. Thanks Tattoo said, on January 12, 2011 8:17 AM:
How can I change the color of the "only search blbla.com" text??? tattoo said, on January 12, 2011 8:52 AM:
Nevermind! Got it! Thanx for this! Baker said, on January 21, 2011 6:06 AM:
Hi dave am really happy i added the search google tool bar on ma site but next i would like the result searched content to be returned in ma web page thanks Nate said, on January 31, 2011 11:10 PM:
NM.... I got it. I had a screwed up nesting of and tags. somewhere I had an extra tag without the closing tag. Thanks for the code. Works Great mike dorl said, on February 6, 2011 6:34 AM:
my web site is a large set of pages at the UW at domain/user/AAWEB where domain/user is a place holder for where my files are stored. I'd like to add a search for one file there. I tried replacing askdavetaylor.com with domain/user/AAWEB and the name of the file I wished to search domain/user/AAWEB/IDXD.htm. If I type domain/user/AAWEB I do get a directory so it looks like google could know what files reside there. So far it looks like the search is constrained to my site but doesn't find anything. Is it possible to have google search a specific file? Dave Taylor said, on February 6, 2011 7:44 AM:
Before you try to use the Google search on your own site, it seems to me a good idea to go to Google.com and search for your domain with the notation site:yourdomain.com Then look at how many matches there are. For example, I might use "site:askdavetaylor.com" and see how much Google has matched. If it's 11 pages of the thousands I have online, well, then having that search on my site won't be useful. How do you get Google to see more of your site? One big thing is to ensure that you have a proper sitemap. Google has some good info about it: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184 Hope that helps people out! anouthone said, on February 6, 2011 5:07 PM:
HI, I would like to add search to my site that search only for my site return with only my site, ex: my page, my files, link, data and never get out of my site. ? i will be appreciate for your help. steven - web design said, on February 6, 2011 5:33 PM:
Very nice and clean code, however to validate as XHTML you'll have to change a bit the final line: Dany said, on February 10, 2011 12:50 AM:
Nice for that support!Thx.But I still have a problem about how to customize search results to be displayed in my web.I'm using target but not working. liz said, on February 11, 2011 11:29 AM:
When I paste the code into my site, the search box appears but if I enter a search and click, nothing happens- a new page won't open and the search goes nowhere. Help! Thanks. liz said, on February 11, 2011 1:06 PM:
To expand after further reading your previous answers: Thanks. Dave Taylor said, on February 11, 2011 2:50 PM:
Liz, can you share a URL of a page where you have added the code so I can have a quick peek? Thanks! liz said, on February 11, 2011 11:48 PM:
Thanks, Dave. It's www.auroracollege.nt.ca or www.auroracollege.com (both go to the site) ashish said, on February 17, 2011 3:12 PM:
i want to implement search option and want the result on the same website page. who it is possible becasue when i have implement it is showing result on google page. please help. thanks Trevor Clibery said, on February 19, 2011 1:55 PM:
Thanks, Dave. Works nicely. Eric said, on February 21, 2011 7:55 AM:
If I were to add Google search to my website, does it search just the published content or can I get it to search any databases attached to the website as well? Gautam said, on February 24, 2011 11:23 PM:
Hey Dave, DJ Jaffe said, on February 26, 2011 1:26 PM:
Hey, while you're having that coffee I just bought you, I have a question (grin)....On your code to add a search engine box, I want the box to ONLY search my site., i.e, I don't want, need the radio button. I tried and tried but couldn't figure how to eliminate it. Dan said, on February 28, 2011 7:03 PM:
Is there a way to return the first 5 results from google without leaving your page. If so, can you post the code :) Thanks. Sally said, on March 1, 2011 6:51 PM:
Worked really well for us. Thanks for taking the time to help out. Sally Henry Armitage said, on March 4, 2011 11:32 AM:
This is tremendously useful and you are a tremendously useful person for posting it. Thank you so much. :D Riju said, on March 5, 2011 9:32 AM:
thanks dave.. baruk said, on March 8, 2011 3:01 PM:
big heap thanks dave. and again! Mateen Yousuf said, on March 10, 2011 7:29 AM:
Dave
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
All Our Categories
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and Blogging Building Web Site Traffic Business and Management Computer and Internet Basics d) None of the Above Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Kindle Fire Help Mac OS X Help Pay Per Click (PPC) Advertising Pinterest Help Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help Find Me on Google+ ADT on G+ |
Dave,
Many, many thanks for this very clean search script. It works like a charm and I appreciate your efforts! Well done, great work!