How to Integrate Google Custom Search In XenForo

Google custom search helps webmasters add the power of Google search to their website and monetize the search results with Adsense. It not only enhances the user experience with better search results but also helps webmasters monetize the search.

Google custom search as the name suggests allows customization of search results in many ways. Today I will show how to replace the XenForo quick search with Google custom search or have both XenForo quick search and Google custom search simultaneously.

Replace XenForo quick search with Google Custom Search?

Visit https://cse.google.com/. If you want to monetize your search results, make sure you are logged into your Adsense account.

Add a new search engine.

You can only search the XenForo forum by specifying the XenForo forum url instead of the whole domain or if you wish to include other pages from your site, specify the top level domain.

Give a name to the search engine for your reference and click the create button.

Once the search engine is created, visit the custom search home and choose the search engine just created for editing.

In the look and feel option, select overlay.

Save & Get Code.

Inside XenForo admin, head over to edit the search_bar template for your style. Replace the line of code that starts with

<input type="search" name="keywords"

With the code from Google.

Now add the following CSS in the extra.css template.
.gsc-control-cse.gsc-control-cse-en {padding: 0 !important;} #QuickSearch .controlsWrapper {display:none !important;}

If you wish to remove the search button and want to display only the search box like in XenForo, add the following line as well to extra.css
.gsc-search-button {display: none;}
The default quick search is now replaced with Google custom search.

And it is ready to rock and roll with the results powered by Google search.

Use XenForo Quick Search & Google Custom Search

To use both Google and XenForo search, we will use need to show the search results on a separate XenForo page instead of overlay.

Generate the code for “results only” option under look and feel. Grab the code and head to XenForo admin to create a new page node.

Put the code we have from Google in the template HTML under the page options tab.

Note that the url portion of the page under basic information tab is important. Add a custom url portion and remember that url portion. We will need when we edit the search_bar template later.

Tip: One shouldn’t display this page shouldn’t be displayed in the node list either.

Change the search_bar template and make the following changes.

Change from {xen:link ‘search/search’} to {xen:link ‘pages/cse’}. The pages/cse is the url portion used when we created the page.
Change method=”post” to method=”get”
Change name=”keywords” to name=”q”

Add add the following CSS code to extra.css template.

#QuickSearch .controlsWrapper {display:none !important;}

Now we have the Google search results on a separate page using the XenForo search box and still have an option for the user to click more and use the traditional XenForo advance search.