Added Google Blog Bar to Individual Posts

I’ve been wanting to be able to show related posts for each post and have found an answer in Google Blog Bar.

The Blog Bar is a Google AJAX Search API application that lets you easily add application and page-controlled blog search results to your web pages or blog.

It’s pretty cool. I was able to take advantage of a new feature which allows for restriction of site. That way, only results from my blog are shown. I customized the code so that the search terms are based on the post’s categories. If there are no results, the default keyword search seems to be Google.

If you’d like to have a Google Blog Bar in your WordPress blog, create a new file called blogbar.inc.php and save it in the themes folder. Add the following code and replace the variables at the top of the file.

<?php
/* Only edit the variables here */
$key = 'YOUR-API-KEY';
$site = 'http://yoursite.com/blog/';
/* end of editable portion */
function the_category_plain($separator = '', $parents='') {
	echo '"' . strip_tags(get_the_category_list($separator, $parents)) .'"';
}
?>
<div>
<h2>Related Post</h2>
<!-- ++Begin Blog Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual blogbar.
  // You can place this anywhere on your page.
  -->
  <div id="blogBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  //
  // The Key Embedded in the following script tag is designed to work with
  // the following site:
  // http://yoursite.com/blog/
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-blbw&key=<?php echo $key ?>"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Blog Bar Code and Stylesheet -->
  <script src="http://www.google.com/uds/solutions/blogbar/gsblogbar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/blogbar/gsblogbar.css");
</style>

  <script type="text/javascript">
    function LoadBlogBar() {
      var blogBar;
      var options = {
	    siteRestriction : "<?php echo $site ?>",
        largeResultSet : true,
        title : "Related Posts",
		cycleTime : GSblogBar.CYCLE_TIME_LONG,
		currentResult : document.getElementById("currentResult"),
        horizontal : true,
        orderBy : GSearch.ORDER_BY_RELEVANCE,
        autoExecuteList : {
          executeList : [<?php strip_tags(the_category_plain('", "')) ?>]
        }
      }

      blogBar = new GSblogBar(document.getElementById("blogBar-bar"), options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadBlogBar);
  </script>
  <div id="currentResult">Loading</div>
<!-- ++End Blog Bar Wizard Generated Code++ -->
</div>

Then use the include function to include the blogbar.inc.php file in the theme’s single.php file. You will need to use the absolute path to blogbar.inc.php, like so:

<?php include('/absolute/path/to/blog/wp-content/themes/blogbar.inc.php'); ?>

You can also customize the Blog Bar.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>