• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Replace Default Search With Google Custom Search (Adsense)

TheBigK

Well-known member
#1
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?
 

TheBigK

Well-known member
#3
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 :p):

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

Well-known member
#4
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.
 

StRonK

Active member
#7
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 :p):

Admin CP -> Appearance -> Templates -> search_bar



I think I have seen this done but I can't find any docs for it.
vb4-navbarda-google-arama.jpg
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>
 

Attachments

#8
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

 

ge66

Active member
#12
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

Active member
#13
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

Active member
#14
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
 
Last edited:

Rudy

Well-known member
#17
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...
 
#20
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.