Replace Default Search With Google Custom Search (Adsense)

TheBigK · Jan 25, 2012

I've searched the forum but haven't been able to find an answer. What I'm trying to do is replace the quick search that appears in the navbar with Google search. I'm unable to find which template to edit and what changes should I make so that the search results are displayed on XF page.

Can someone help?

Jake Bunce · Jan 25, 2012

This is close:

http://xenforo.com/community/threads/google-custom-search.20944/#post-266718

Otherwise this is the template for the search bar (aptly named

):

Admin CP -> Appearance -> Templates -> search_bar

TheBigK said:
...so that the search results are displayed on XF page.

I think I have seen this done but I can't find any docs for it.

TheBigK · Jan 25, 2012

Jake Bunce said:
This is close:

http://xenforo.com/community/threads/google-custom-search.20944/#post-266718

Otherwise this is the template for the search bar (aptly named ):

Admin CP -> Appearance -> Templates -> search_bar

I think I have seen this done but I can't find any docs for it.

I did check that thread, but I want to make it work with the default search engine. I've been able to place the search box now; but struggling with the styling

. Also displaying results in a page is still a problem.

MagnusB · Sep 18, 2012

TheBigK said:
I did check that thread, but I want to make it work with the default search engine. I've been able to place the search box now; but struggling with the styling . Also displaying results in a page is still a problem.

I see you managed to do this, got any tips on it? Been thinking about doing this my self, but never got around to it.

TheBigK · Sep 18, 2012

MagnusB said:
I see you managed to do this, got any tips on it? Been thinking about doing this my self, but never got around to it.

Bambua did it for me, haven't spotted him around for a long time.

MagnusB · Sep 18, 2012

StRonK · Sep 18, 2012

Jake Bunce said:
This is close:

http://xenforo.com/community/threads/google-custom-search.20944/#post-266718

Otherwise this is the template for the search bar (aptly named ):

Admin CP -> Appearance -> Templates -> search_bar

I think I have seen this done but I can't find any docs for it.

hi jake.
it is told in a vb forum. I will quote here if you would translate into xenforo:
if you want it to be opened like here in the website. open the zip file in the addition. upload the files inside the zip to google.php ftp
then add a new template called GOOGLE and copy the following code here and save it.
dont forget to change the google search in navbar to siteadress/google.php
before savin
g; change as your need htt p://ww w.vbulletin-turko.com/google.php ve partner-pub-0843343258209554:mwbl4l-uams

Code:

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
  <head>
    <title>{vb:raw vboptions.bbtitle}</title>
    {vb:raw headinclude}
 
  </head>
  <body>
   
    {vb:raw header}
   
    {vb:raw navbar}
<form action="http://www.vbulletin-turko.com/google.php" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="partner-pub-0843343258209554:mwbl4l-uams" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="ISO-8859-9" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Ara" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com.tr/cse/brand?form=cse-search-box&amp;lang=tr"></script>
 
 
<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 800;
  var googleSearchDomain = "www.google.com.tr";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
 
   
    {vb:raw footer}
  </body>
</html>

search navbar

Code:

<vb:if condition="$vboptions['enablesearches']">
    <div id="globalsearch" class="globalsearch">
        <form action="search.php?do=process" method="post" id="navbar_search" class="navbar_search">
            <input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
            <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
            <input type="hidden" name="do" value="process" />
            <span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" /></span></span>
            <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search.png" name="submit" onclick="document.getElementById('navbar_search').submit;" /></span></span>
        </form>
        <ul class="navbar_advanced_search">
            <li><a href="search.php{vb:raw session.sessionurl_q}">{vb:rawphrase advanced_search}</a></li>
        </ul>
    </div>
    </vb:if>

Change

Code:

<vb:if condition="$vboptions['enablesearches']">
    <div id="globalsearch" class="globalsearch">
        <form action="http://www.google.com/cse" id="cse-search-box">
 
    <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxxx:xxxxxxxxxxxxx" />
    <input type="hidden" name="ie" value="ISO-8859-9" />
    <span class="textboxcontainer"><span><input type="text" name="q" class="textbox" /></span></span>
 
                        <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search.png" name="sa" value="Ara" onclick="document.getElementById('navbar_search').submit;" /></span></span>
                </form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=tr"></script>
        <ul class="navbar_advanced_search">
            <li><a href="search.php{vb:raw session.sessionurl_q}">{vb:rawphrase advanced_search}</a></li>
        </ul>
    </div>
    </vb:if>

Shakir · May 13, 2013

Hi StRonK,

Thank you very much for your tip from VB.

I have tried to modify the code and got the results without any php file. Below is the procedure I followed:

1. Make a template called: googlesearch and add the following code:

Code:

<fieldset id="GoogleSearch">
<form action="pages/search" id="cse-search-box" class="formPopup">
 
    <input type="hidden" name="cx" value="xxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx" />
    <input type="hidden" name="ie" value="utf-8" />
<div class="primaryControls">
            <span class="textboxcontainer"><span><input type="search" name="q" id="googlesearchquery" class="textCtrl" /></span></span>
</div>
                </form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</fieldset>

2. Then Creat New Page : Admin CP -> Applications -> Creat New Page
3. Add in "Url Portion" : "search" (this will be your result page)
4. In Page_Options Tab under "HTML Template" add the following code:

Code:

<div id='cse' style='width: 100%;'>Loading....</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.SHINY});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  var customSearchControl =  new google.search.CustomSearchControl('xxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.enableSearchResultsOnly();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
  function parseParamsFromUrl() {
    var params = {};
    var parts = window.location.search.substr(1).split('&');
    for (var i = 0; i < parts.length; i++) {
      var keyValuePair = parts[i].split('=');
      var key = decodeURIComponent(keyValuePair[0]);
      params[key] = keyValuePair[1] ?
          decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
          keyValuePair[1];
    }
    return params;
  }
  var urlParams = parseParamsFromUrl();
  var queryParamName = 'q';
  if (urlParams[queryParamName]) {
    customSearchControl.execute(urlParams[queryParamName]);
  }
}, true);
</script>

5. Open a Template "search_bar" and search for "</xen:hook>" and add the following code after "</xen:hook>":

Code:

<xen:include template="googlesearch" />

6. Finally in Extra.css add the following code to show the google search bar just next to the xenforo's default search bar:

Code:

#GoogleSearch{display: block;
 
        position: absolute;
        right: 300px;
        top: -18px;
 
        margin: 0;
 
        background-color: @content.background-color;
        border-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
        z-index: 7500;
}

Hope the above will work for you as it is working fine for me.

Note: xxxxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxx is your API from google custom search. You have to get this from : http://www.google.com/cse.

Thanks and Regards,
Muhammad Shakir

StRonK · May 13, 2013

Hi Shakir,
just like I wanted, worked properly.
thank you

Deepmartini · Feb 9, 2014

So this will work on any Xenforo site? It's confusing because you have the search box in the images on the left hand side.

akia · Feb 9, 2014

Deepmartini said:
It's confusing because you have the search box in the images on the left hand side.

Its a Arabic site and the go RTL rather than LTR

ge66 · Apr 3, 2014

Shakir said:
Hope the above will work for you as it is working fine for me.

Thank you for this working fine in 1.3.

I wonder if anybody could help me to hide the google search box at lower resolution, as it overlaps navigation links, or change it to an image as the internal search box does?

ge66 · Apr 3, 2014

I placed the following below the previous code in EXTRA.css

Code:

@media (max-width: @nonResponsiveMinWidth) {
  #GoogleSearch {
  display:none !important;
  }
}

It sort of works, anyone have a better solution?

fly · May 22, 2014

This works with the latest version? I get a 404 error when trying to search.

edit: Seems to be a problem with how the pages are called. It looks like it won't work if I use forum.com/pages/search

Phillip · May 26, 2014

It would be great to see this implemented into a plugin.

RyanC · Aug 15, 2014

Phillip said:
It would be great to see this implemented into a plugin.

agreed!

Wildcat Media · Dec 8, 2014

I'd like something similar to this as an add-on also. I'd prefer it be integrated into the existing search bar, though, maybe just as an option when you do an advanced search, or perhaps as an added text entry field in the search fly-out so I don't have clutter (and it would solve the responsive view problem as well).

For now I might see about adding it elsewhere in the forum...

Recep Baltaş · Apr 24, 2015

I would also like to see this as a plugin.

rdn · Apr 24, 2015

Works great

https://xenforo.com/community/resources/reckons-team-google-custom-search.4165/

gxd · Nov 12, 2017

Now in Xenforo 2.x you can create a Widget (Widget definition: HTML). Paste Google Search code (cse.google.com) into that. After that you just choose to show in where you want.

Replace Default Search With Google Custom Search (Adsense)

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Active member

Attachments

Member

Active member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Active member

Active member

Well-known member

Well-known member

Well-known member

Member

Similar threads

We value your privacy