Add-on Google Custom Search

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.

Suggestions:
Some sort of phrasing of "Results from Google Custom Search", "Results from our forum only" and "Loading results from search.tmswiki.org ..." would be nice.
Some reusing of the forum style instead of "<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;">" would also be nice.

A question:
Could you explain what "<xen:if is="{$search.search_query} AND {$page} < 2">" does, is good for? :)
 
Suggestions:
Some sort of phrasing of "Results from Google Custom Search", "Results from our forum only" and "Loading results from search.tmswiki.org ..." would be nice.
Some reusing of the forum style ... would also be nice.
Definitely. I'll add phrases when I release it as a downloadable addon.

Regarding the CSS, I've made a new version with a cleaner look based on the styling of http://xenforo.com/community/members/ . Basically, the old version had a light blue border in it that I think makes things look too busy when mixed with the tabs at the top. Here's the new version:
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 search.tmswiki.org</a></li>
<li><a href="{xen:link search, $search}#xf">Results from our forum only</a></li>
</ul>

<br/>
<ul id="xfgcs_Panes" style="padding-left: 10px; padding-right: 10px;">
<li id="gcs">
<div id="cse" class="section searchResults" style="margin-top:0px;">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>

Could you explain what "<xen:if is="{$search.search_query} AND {$page} < 2">" does, is good for? :)
Sure. That line ensures that the Google CSE results don't show up in two cases when they wouldn't be helpful. In the first case, when {$search.search_query} evaluates to null, there is no search query. This happens when, for example, you search by all posts by a certain user or on a specific day without specifying a search string or when you click on a link to see all posts by a specific user. Google based search results won't be helpful in such a case, so the addon just essentially disappears in that case.

In the second case, when a user is looking through the XenForo search results, perhaps after doing an advanced search, the search_results template is called again, with {$page} >= 2. In this case, we know that the user doesn't want the Google CSE results, so why make them click on the tab for the XF results? At some point I'd love to find a way to make the tabs be displayed but have the XF results selected while still keeping the code simple. However, I have yet to find any documentation of the "Tabs tabs" javascript library that XF uses. If anyone knows how to do this, please let me know.
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.
Unfortunately, this can't be done with a template edit because no template is called when the search results are empty. Therefore, to fix this case, I'll have to override getNoSearchResultsResponse or a related method from Search.php. I'm working on this now.
 
Great job @ForestForTrees i have implemented your search edit, and see that you where missing a few closing tags, </li> on line 48 and </ul> on line 49.

Here's my edit:
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">Resultater fra Google tilpasset søk</a></li>
    <li><a href="{xen:link search, $search}#xf">Resultater fra vårt forum</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;">Laster resultater fra nbfc.no ...</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(
                                        'xxxxxxxxxxxxx:xxxxxxxxxxx',
                                        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"></li>
    </ul>
</xen:if>
 
(If anyone wants me to make a post with complete, start to finish installation instructions, just let me know.)

Heya, @Tommy , thanks for your feedback!

I believe that the closing </li> and </ul> should be at the very bottom of the page so that you don't get the forum only results below the GCS results when you are viewing the GCS tab. I'm a bit under the weather right now, so I haven't tested the following much yet, but a way to implement this would be to add the following at the very end of the template, after the pagenav div:
Code:
<xen:if is="{$search.search_query} AND {$page} < 2">
          </li>
     </ul>
</xen:if>
The following thread is a reference regarding where the closing tags go:
http://xenforo.com/community/threads/how-to-adding-tabs-to-your-pages.7145/
I wish that there was a more recent thread documenting it, but it seems fairly undocumented.

With ragtek's thread as a reference, the macro-structure of the tab portion of the page should like like this:
Code:
<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 forum search</a></li>
</ul>

<br/>
    <ul id="xfgcs_Panes">
        <li id="gcs">
            <!-- All of the template code/HTML specific to the gcs tab goes here -->
        </li>
        <li id="xf">
            <!-- All of the template code/HTML specific to the forum search tab goes here -->
        </li>
    </ul>
</xen:if>

Anyway, that's what I have running now.
 
Ugh, I've been using the code on my site since then, but I'm pretty swamped right now. Have you tried following the directions above?
 
Definitely. I'll add phrases when I release it as a downloadable addon.

Regarding the CSS, I've made a new version with a cleaner look based on the styling of http://xenforo.com/community/members/ . Basically, the old version had a light blue border in it that I think makes things look too busy when mixed with the tabs at the top. Here's the new version:
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 search.tmswiki.org</a></li>
<li><a href="{xen:link search, $search}#xf">Results from our forum only</a></li>
</ul>

<br/>
<ul id="xfgcs_Panes" style="padding-left: 10px; padding-right: 10px;">
<li id="gcs">
<div id="cse" class="section searchResults" style="margin-top:0px;">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>

Sure. That line ensures that the Google CSE results don't show up in two cases when they wouldn't be helpful. In the first case, when {$search.search_query} evaluates to null, there is no search query. This happens when, for example, you search by all posts by a certain user or on a specific day without specifying a search string or when you click on a link to see all posts by a specific user. Google based search results won't be helpful in such a case, so the addon just essentially disappears in that case.

In the second case, when a user is looking through the XenForo search results, perhaps after doing an advanced search, the search_results template is called again, with {$page} >= 2. In this case, we know that the user doesn't want the Google CSE results, so why make them click on the tab for the XF results? At some point I'd love to find a way to make the tabs be displayed but have the XF results selected while still keeping the code simple. However, I have yet to find any documentation of the "Tabs tabs" javascript library that XF uses. If anyone knows how to do this, please let me know.

Unfortunately, this can't be done with a template edit because no template is called when the search results are empty. Therefore, to fix this case, I'll have to override getNoSearchResultsResponse or a related method from Search.php. I'm working on this now.

Thank you very much for sharing this. What would I have to change to show the "forum only" results as the 1st tab, and the Google results under the 2nd tab (reverse the tabs)? Thanks!
 
Heya, Kontrabass, the change is fairly straightforward. As before, you just have to add code in two places of a specific template. It's just that you add different code. The biggest change is that a chunk of code from the top part moves to the bottom part.

Try following the instructions above, but when following the instructions in this post, add the following instead:
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}#xf">Results from our forum only</a></li>
<li><a href="{xen:link search, $search}#gcs">Results from search.tmswiki.org</a></li>
</ul>

<br/>
<ul id="xfgcs_Panes" style="padding-left: 10px; padding-right: 10px;">
<li id="xf">
</xen:if>

And then when following the instructions in this post, add the following instead:
Code:
<xen:if is="{$search.search_query} AND {$page} < 2">
          </li>
<li id="gcs">
<div id="cse" class="section searchResults" style="margin-top:0px;">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>
</ul>
</xen:if>
 
Heya, Kontrabass, the change is fairly straightforward. As before, you just have to add code in two places of a specific template. It's just that you add different code. The biggest change is that a chunk of code from the top part moves to the bottom part.

Try following the instructions above, but when following the instructions in this post, add the following instead:
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}#xf">Results from our forum only</a></li>
<li><a href="{xen:link search, $search}#gcs">Results from search.tmswiki.org</a></li>
</ul>

<br/>
<ul id="xfgcs_Panes" style="padding-left: 10px; padding-right: 10px;">
<li id="xf">
</xen:if>

And then when following the instructions in this post, add the following instead:
Code:
<xen:if is="{$search.search_query} AND {$page} < 2">
          </li>
<li id="gcs">
<div id="cse" class="section searchResults" style="margin-top:0px;">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>
</ul>
</xen:if>

Thanks! The tabs are reversed as they should be, and the forum results show up great. But the second tab has google search results AND forum search results under the google results. Hmm... This is what I have:

Code:
<xen:if is="{$search.search_query}">

<ul class="tabs Tabs" data-panes="#xfgcs_Panes > li">
<li><a href="{xen:link search, $search}#xf">TB Search Engine</a></li>
<li><a href="{xen:link search, $search}#gcs">Google Search TB</a></li>
</ul>

<br/>
<ul id="xfgcs_Panes" style="padding-left: 10px; padding-right: 10px;">
<li id="xf">

</li>

<li id="gcs">
<div id="cse" class="section searchResults" style="margin-top:0px;">Loading results from Google ...</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(
                    '013280403045922125518:haxb7n3zepm',
                    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>
</ul>
</xen:if>
 
Last edited:
Its a little odd but when I take the tab code out of the template, results for forum and google show up on the same page (as expected) and my Adsense displays, when I add the tab code back in, Adsense disappears.

Is there something restricting the output?
 
I don't like the idea of it replacing the default search, you need both IMO.

I've already done this (sort of) by adding a link to a dedicated Google search page within the default xenforo search dropdown.

See:

http://cafesaxophone.com
 
Would any of you kind folks be willing to convert this to an add-on with AdSense integration? It would also be nice if the admin could choose which tab is visible by default, either the forum search or Google search.
 
Dressed up the tab a bit with an image (.png with transparent background)

Screenshot from 2015-01-31 18:43:01.webp

I followed the above instructions (which could really be cleaned up a bit :) ) to get this far.


Upload an image (example attached below) to your /images/ directory.
In template search_results, find:
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}#xf">Results from our forum only</a></li>
     <li><a href="{xen:link search, $search}#gcs">YOU PROBABLY CUSTOMIZED THIS TEXT</a></li>
</ul>

and replace it with this:
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}#xf">Results from our forum only</a></li>
<li><a href="{xen:link search, $search}#gcs"><img src="/images/google-cse-logo.png" alt="Google Custom Search" style="width:120px;height:21px"></a></li>
</ul>

You can see how it looks live with this sample search: https://www.survivalmonkey.com/search/1385414/?q=water&o=date

edit: I just realized my image looks pretty rough on retina screens. I'd tried to optimize it to be small but may have ruined it. If any graphics folks can do better, please share :)
 

Attachments

  • google-cse-logo.webp
    google-cse-logo.webp
    2.3 KB · Views: 13
Last edited:
Top Bottom