1. 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)

Discussion in 'Styling and Customization Questions' started by TheBigK, Jan 25, 2012.

  1. TheBigK

    TheBigK Well-Known Member

    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?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    quocuy likes this.
  3. TheBigK

    TheBigK Well-Known Member

    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.
     
  4. MagnusB

    MagnusB Well-Known Member

    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.
     
  5. TheBigK

    TheBigK Well-Known Member

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

    MagnusB Well-Known Member

  7. StRonK

    StRonK Active Member

    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>
     

    Attached Files:

    Jake Bunce likes this.
  8. Shakir

    Shakir Member

    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

    [​IMG]
     
    ge66, ปีโป้, ARSamo and 4 others like this.
  9. StRonK

    StRonK Active Member

    Hi Shakir,
    just like I wanted, worked properly.
    thank you :)
     
  10. Deepmartini

    Deepmartini Well-Known Member

    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.
     
  11. akia

    akia Well-Known Member

    Its a Arabic site and the go RTL rather than LTR
     
  12. ge66

    ge66 Active Member

    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?
     
  13. ge66

    ge66 Active Member

    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?
     
  14. fly

    fly Active Member

    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: May 22, 2014
  15. Phillip

    Phillip Active Member

    It would be great to see this implemented into a plugin. ;)
     
    Rudy and The Forum Heroes like this.
  16. RyanC

    RyanC Active Member

    agreed!
     
  17. Rudy

    Rudy Well-Known Member

    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...
     
  18. Recep Baltaş

    Recep Baltaş Well-Known Member

    I would also like to see this as a plugin.
     
  19. RoldanLT

    RoldanLT Well-Known Member

Share This Page