Google AJAX Search API BBCODE - For phpBB 3

I made a bbcode MOD for my forum that you can use to display Google search results in your posts. This is an example of what it looks like. This is a tutorial on how to modify your forum to do the same. It requires phpBB 3.0 Beta 2 and above.

First register to get your API key: http://code.google.com/apis/ajaxsearch/signup.html

You must have ACP access to continue. Now go to the ACP. Click the Styles tab. Click the templates link. Next to prosilver, click edit. Select template file, Overall_Header.html.

Find:
<script type=”text/javascript”>
// <![CDATA[
    var jump_page = ‘{L_JUMP_PAGE}:’;
    var on_page = ‘{ON_PAGE}’;
    var per_page = ‘{PER_PAGE}’;
    var base_url = ‘{BASE_URL}’;
    var style_cookie = ‘phpBBstyle’;
    var onload_functions = new Array();
    var onunload_functions = new Array();

Before that add:

<link href=”http://www.google.com/uds/css/gsearch.css” type=”text/css” rel=”stylesheet”/>
<script src=”http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=your_key” type=”text/javascript”></script>

Replace your_key with the key you got after registering your site with Google API.

Next find:

    window.onunload = function()
    {
        for (i = 0; i <= onunload_functions.length; i++)
        {
            eval(onunload_functions[i]);
        }
    }

After that add:

function Load() {
      // Create a search control
      var searchControl = new GSearchControl();

      // Add in a full set of searchers
      var localSearch = new GlocalSearch();
      searchControl.addSearcher(localSearch);
      searchControl.addSearcher(new GwebSearch());
      searchControl.addSearcher(new GvideoSearch());
      searchControl.addSearcher(new GblogSearch());

      // Set the Local Search center point
      localSearch.setCenterPoint(”New York, NY”);

      // Tell the searcher to draw itself and tell it where to attach
      searchControl.draw(document.getElementById(”searchcontrols”));
      var x=document.getElementById(”GSearch”)
      // Execute an inital search
      searchControl.execute(x.getAttribute(”value”));
    }
          GSearch.setOnLoadCallback(Load);

Now submit your changes. Now, time to create the bbcode. Click the posting tab. Now click add a bbcode. The bbcode usage is:

[google]{TEXT1}[/google]

The HTML replacement is:

<input type=”hidden” id=”GSearch” value=”{TEXT1}” /><ul id=”searchcontrols” style=”list style:none none;”/>

You can put whatever you want in help line. Check Display on posting page if you want people to be able to use the BBCODE.

Now click submt.  Now people can add Google Searches to their posts. One thing I have noticed, you need to have your comments above the google bbcode in your post or else your comments will be hidden. To use the bbcode. Just do something like this:

[google]search terms[/google]

Where search terms is what to search for.

Have fun!

Leave a comment

You must be logged in to post a comment.