Buy at Flipkart

Flipkart.com

Monday, July 4, 2011

Embedding +1 (Google Plus) on MediaWiki sites

Here are the steps that I followed for embedding +1 button on a MediaWiki Site that I administer - called as GeetShabda - which is a place for sharing lyrics for Marathi songs.

See this Page to see it working!

As per the code provided by Google on the Webmasters site - I started exploring options to include it in the MediaWiki site. However, I could not find any ready steps - so I decided to share this with everyone.

1. <!-- Place this tag in your head or just before your close body tag -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

2.  <!-- Place this tag where you want the 1 button to render -->
     <g:plusone></g:plusone>


Steps for MediaWiki installations:
(I am a newbie to Mediawiki and hence this might not be the *best way* to achieve this)
  1. Go to LocalSettings.php
    1. Add the following code
 $wgHooks['BeforePageDisplay'][]  = 'MyExtensionJavaScript';
function MyExtensionJavaScript( $out ) 
{
  # -----------------------------------------------
  #  Merge JavaScript into OutputPage
  # -----------------------------------------------
  $script = '<script type="text/javascript" language="javascript" src="https://apis.google.com/js/plusone.js">'
                    . '</script>';
  $out->addScript( $script);
  return true;
}    
 --- This ensures that the step (1) above happens correctly. and the plus one API is loaded and referenced from the HTML head.

              2. Go the the .php file . In my case the site uses the Vector template and hence I edited the Vector.php
                          1. In Vector.php add the below code after

<!-- firstHeading -->
<h1 id="firstHeading" class="firstHeading"><?php $this->html( 'title') ?>
<g:plusone size="medium" href="/"></g:plusone>
</h1>
<!-- /firstHeading -->

And voila - You would have a +1 Button on all your pages.

Update: 14-July: Rendering of code update (as per comment by Tom. Thanks!)