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

Discussion in 'Resource and Add-on Requests' started by Tommy, Apr 27, 2012.

  1. Tommy

    Tommy Member


    is there anyone interested in coding a plugin for the Google Custom Search engine?

    Which will replace the default searchbox, and display the results in a integrated page.

    Something like this: http://www.vbulletin.org/forum/showthread.php?t=162072

    jauburn and Digital Doctor like this.
  2. Tommy

    Tommy Member

    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

  3. Phillip

    Phillip Active Member

    Here, here! If implemented cleanly with Xenforo, this would be a great add-on espescially when integrated with Adsense.
    Tommy likes this.
  4. Tommy

    Tommy Member

    Maybe one of the devs of the adsense plugins might want to integrate it into their plugin? :)
  5. Phillip

    Phillip Active Member

    Has there been any progress on implementing an add-on that will use Google search with Adsense in place of the default Xenforo search?
  6. Chris D

    Chris D XenForo Developer Staff Member

  7. jauburn

    jauburn Well-Known Member

  8. TsinJu

    TsinJu Well-Known Member

    You can add the Code wherever you want..
    And with some custom CSS you can surely smaller the searchfield to fit it everywhere?!
  9. ForestForTrees

    ForestForTrees Well-Known Member

    I think that the best Google Custom Search addon, by far is the following on:

    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?
  10. Deepmartini

    Deepmartini Well-Known Member

    Anyone using this on their site?
  11. ARSamo

    ARSamo Member

    Have you seen this post
  12. ForestForTrees

    ForestForTrees Well-Known Member

    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)
    <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 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(
      var options = new google.search.DrawOptions();
      customSearchControl.draw('cse', options);
      }, true);
    <li id="xf">
    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: Feb 10, 2014
    CarlosMST and ge66 like this.
  13. ForestForTrees

    ForestForTrees Well-Known Member

    It's live on my site now. Feedback very welcome.

    Here's the video I used to introduce it to our members:
    jacko and ARSamo like this.
  14. Matthew Hawley

    Matthew Hawley Well-Known Member

    Are you going to release it?
  15. ForestForTrees

    ForestForTrees Well-Known Member

    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?
    ARSamo likes this.
  16. ARSamo

    ARSamo Member

    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.


    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.

    <style type='text/css'>
    /* Use a different font family for search results */
    .gs-title, .gs-snippet {
    /* Add a border between individual search results */
    .gs-webResult {
    border1px solid #eee;
    /* Do no display the count of search results */   
    .gsc-result-info {
    /* Hide the Google branding in search results */
    .gcsc-branding {
    /* Hide the thumbnail images in search results */
    .gsc-thumbnail {
    /* Hide the snippets in Google search results */
    .gs-snippet {
    /* Change the font size of the title of search results */
    .gs-title a {
    /* Change the font size of snippets inside search results */
    .gs-snippet {
    /* Google Custom Search highlights matching words in bold, toggle that */
    .gs-title b, .gs-snippet b {
    /* Do no display the URL of web pages in search results */
    .gsc-url-top, .gsc-url-bottom {
    /* Highlight the pagination buttons at the bottom of search results */
    .gsc-cursor-page {
    padding4px 8px;
    border2px solid #ccc;
    Waiting for your the first and the best addon... :)
    ForestForTrees and ge66 like this.
  17. Phillip

    Phillip Active Member

    Will this work with Google Custom Search if AdSense is enabled in your search results? If not, that would be a great addition.
    ForestForTrees likes this.
  18. ge66

    ge66 Active Member

    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 likes this.
  19. ForestForTrees

    ForestForTrees Well-Known Member

    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.
    ARSamo likes this.
  20. ge66

    ge66 Active Member

    I think that the only thing that is needed is to put the adsense id in there, seems to be working for me ;)

Share This Page