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

Add-on Google Custom Search

#2
I'm amazed that there isn't more interest in this, since there's alot of money to be made from a plugin like this. o_O

Anyone?
 

Phillip

Active member
#5
Has there been any progress on implementing an add-on that will use Google search with Adsense in place of the default Xenforo search?
 

TsinJu

Well-known member
#8
You can add the Code wherever you want..
And with some custom CSS you can surely smaller the searchfield to fit it everywhere?!
 

ForestForTrees

Well-known member
#9
I think that the best Google Custom Search addon, by far is the following on:
http://translate.google.com/transla...2&rlz=1C1LENP_enUS461US461&espv=210&es_sm=122

If I understand it correctly, it makes two tabs on your search results page, allowing people to choose between XenForo's built in search and Google's Custom Search. We've been using Google Custom Search on our site for a long time and I really prefer the results. It's like comparing a 1999 search engine with Google. Google just knows search.

On the other hand, sometimes you just need the XF built in search because it allows you to constrain the search in various very useful ways. It looks like this addon is completely unobtrusive and attractive, but allows users to choose between the two search methods in a very intuitive way.

.... but the page, literally, takes about 5 minutes to load and is all in Vietnamese. Nothing is ever simple, right?
 

ForestForTrees

Well-known member
#12
Anyone using this on their site?
I've cleaned up the code and got it working. I now just add the following to the search_results template: (updated Feb 9, 2014)
Code:
<xen:if is="{$search.search_query} AND {$page} < 2">

<ul class="tabs Tabs" data-panes="#xfgcs_Panes > li">
<li><a href="{xen:link search, $search}#gcs">Results from Google Custom Search</a></li>
<li><a href="{xen:link search, $search}#xf">Results from our forum only</a></li>
</ul>

<br/>
<ul id="xfgcs_Panes">
<li id="gcs">
<div id="cse" style="padding: 10px; margin: 10px auto; border: 1px solid #a5cae4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px;">Loading results from search.tmswiki.org ...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : ''});
  google.setOnLoadCallback(function() {
  var customSearchOptions = {};
 
  var customSearchControl = new google.search.CustomSearchControl(
  '012738456707262399698:srlyqkszdjg',
  customSearchOptions
  );
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
 
  var options = new google.search.DrawOptions();
  options.enableSearchResultsOnly();
 
  customSearchControl.draw('cse', options);
  customSearchControl.execute('{$search.search_query}');
  }, true);
  </script>
</li>
<li id="xf">
</xen:if>
It goes right below the "<xen:require css="search_results.css" />" line.

If anyone wants to try the above code and provide feedback or bug reports, they would be appreciated.
 
Last edited:

ForestForTrees

Well-known member
#15
Yes, I'd like to. It would be my first one, but I put a lot of effort into it, so it would be nice to do. I figured that I'd test it out for a little while and then release it after getting some feedback. Does that sound like a good plan?
 
#16
Yes, I'd like to. It would be my first one, but I put a lot of effort into it, so it would be nice to do. I figured that I'd test it out for a little while and then release it after getting some feedback. Does that sound like a good plan?
Thanks @ForestForTrees
Google Custom Search, by default, uses the classic Google layout – blue titles, green links and black snippets – for styling search results on your site. You do have an option to choose a different color scheme and font family for your search results but that’s pretty much it.

google-custom-search.png

You can write simple CSS rules that will bring the same effect. The idea is simple. As annotated in the above screenshot, every element in the search results page has a class associated with it. You can use set the style for a class as display:none to hide a particular element or use the regular font, color, border properties to stylize that element.

For instance, lets target the info box in search results that displays the result count (class=gsc-result-info). If you would like to hide that particular block, you can add a rule in your stylesheet that says .gsc-result-info { display:none; } and the count won’t show up anymore. Similarly, you can say .gs-snippet {display:none} to only display titles and not snippets.

The Custom Search editor won’t let you change the font size the title and results but with CSS, you can do that easily.

Here are some more CSS rules that you may use to style your Custom Search engine.

PHP:
<style type='text/css'>
   
    /* Use a different font family for search results */
    .gs-title, .gs-snippet {
        font-family: courier;
    }
   
    /* Add a border between individual search results */
    .gs-webResult {
        border: 1px solid #eee;
        padding: 1em;
    }
   
    /* Do no display the count of search results */   
    .gsc-result-info {
        display: none;
    }
   
    /* Hide the Google branding in search results */
    .gcsc-branding {
        display: none;
    }
   
    /* Hide the thumbnail images in search results */
    .gsc-thumbnail {
        display: none;
    }
   
    /* Hide the snippets in Google search results */
    .gs-snippet {
        display: none;
    }
   
    /* Change the font size of the title of search results */
    .gs-title a {
        font-size: 16px; 
    }
   
    /* Change the font size of snippets inside search results */
    .gs-snippet {
        font-size: 14px;
    }
   
    /* Google Custom Search highlights matching words in bold, toggle that */
    .gs-title b, .gs-snippet b {
        font-weight: normal;
    }
   
    /* Do no display the URL of web pages in search results */
    .gsc-url-top, .gsc-url-bottom {
        display: none;
    }
   
    /* Highlight the pagination buttons at the bottom of search results */
    .gsc-cursor-page {
        font-size: 1.5em;
        padding: 4px 8px;
        border: 2px solid #ccc;
    }
   
</style>
Waiting for your the first and the best addon... :)
 

ge66

Active member
#18
Yes, I'd like to. It would be my first one, but I put a lot of effort into it, so it would be nice to do. I figured that I'd test it out for a little while and then release it after getting some feedback. Does that sound like a good plan?
If you search for a word that xenforos internal search can't find you don't get any google search results at all, even if there should be.
 

ForestForTrees

Well-known member
#19
Wow, @ARSamo, your post really made my morning. I will definitely start looking into styling it. @Phillip, I will work toward integrating that. My hunch is that it won't be hard for me to integrate in anything that Google supports. @ge66, many thanks for the bug report. I'll get to work on that.

Many thanks for all the feedback. I'm looking forward to releasing this and am currently planning to use a very flexible open source license.