I would like to add a Google Search box to our website similar to what the Percussion.com website is using. Can anyone help with this?
Hi Matt,
Have you already procured Google Custom Search?
Yes I have.
Hey Matt,
If you haven’t already, check out the Google Custom Search site here:
Through there you will be able to generate code for a search box that you can include in an HTML widget on as many pages as you like, plus code for your search results that you can include in another HTML widget on a specific results page.
Just a quick tip, by default code is generated so that the search box and results are displayed on the same page. To get an effect similar to what’s on Percussion.com, you can select the “Look and feel” option after creating your custom search and choose the “Two page layout” to have the search box and results page live on two separate pages (or more than two, if you want the search box on multiple pages).
Let me know if you have any trouble setting this up.
Nathaniel,
I wanted to keep my design of my search bar. Can I do that with this Google example?
The styles you are allowed to add depend on your license with google. Our Percussion.com site, for instance, just uses a text box on the Search link being clicked and it redirects you to the results page with Google Search Results code in it. You can take a similar approach or you can use the same approach on Help.Percussion.com where the Google script for the search box and results page is used.
Incidentally, I have some script I think we can post up that shows the stock stuff from google being used.
Well with our current site, we don’t have the branded Google search box so I would like it to stay the same. I like the search on percussion.com. It’s similar to what’s on our www.mwsu.edu site already.
Matt,
The search on Percussion.com is a simple text box with a button that submits the search query to the Google search results page. The only Google piece being used, in this case, is the results page they provide through the Google CSE configuration. For that, you can place it in a HTML widget in the page you want to mark as search results.
Okay. Well I switched it back to the original code that I had for the search which was what you did for the main percussion site. The form works and redirects me to the search result page but Google isn’t returning any data. Hmmmmmm…
Okay so I’ve been beating my head against the wall these last couple of days trying to figure out why my google search is not working. I have the code in the page just like it says along with the script in the header. When I type something in the search field, it directs me to the search page but doesn’t show any results. This is the same code that is on my live site right now and it works there.
Matt, have you found any solutions? I’m having the same trouble- using the two page layout and my results won’t show.
See mine goes to the result page but the <searchresults-only></searchresults-only> displays nothing.
Matt,
Are you using the “gcse:searchbox-only” node or the HTML form code for your search box?
If you’re using the “gcse:searchbox-only” node, in your Google custom search control panel, under the “Get code” page, what URL are you using for the specify URL field?
If you’re using the form HTML for your search box, what is the “action” URL you are using to point to the results page?
In either case, are you previewing the search page and results page, or are you viewing the publishing pages on your embedded Tomcat? I did notice that results won’t render if you are using a relative URL in any of these fields – you have to use a fully-qualified domain (http:// and all) so for testing this URL will have to include the hostname and port of the environment you’re working in, as I indicated in my previous reply.
I have a custom form for the search parameters that on the action point goes to the search page.
You can see the search box here, http://percussion.mwsu.edu:9980
Matt,
I’m not seeing the input element that calls out your unique search engine ID in your code, which should look like this:
<input type="hidden" name="cx" value="xxxxxxx:yyyyy">
And again, replace “xxxxxxx:yyyyy” with the search engine ID found on the “Basics” page of the CSE control panel. Take another look at the full form code I pasted above, which is directly off of Google’s CSE site – I have been able to get that to work with a little toying around.
As another test, can you verify if the search box and results page works using just Google’s pre-formatted methods of “gcse:searchbox-only” and “gcse:searchresults-only”?
Nathaniel you my sir are awesome. I took the code from my old website and copied it over to the new one but evidently it was using v1 of CSE and I was trying to use v2. I appreciate all the help.
Ah, that does make sense. Glad I could help, Matt.
Hello;
We’re in development using www2.dover.nh.gov internally. I have setup www.dover.nh.gov in my local hosts file for testing.
I have added following code.
I do not receive an error when hitting submit, but my results page comes up empty. What am I missing?
Thank you! This post has been very helpful.
Annie
Hey Annie,
I’m not seeing the Google custom search results code on your search results page, just some empty HTML widgets. Can you confirm that this code got properly pasted into a local HTML asset (and if it’s a shared asset, make sure it’s approved) before publishing out?