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!)

4 comments:

Tom Hutchison said...

Could you elaborate on the above. I don't see your reference to the https://apis.google..... Call for the script location in your hook. Thanks

Nishant Modak said...

Hello Tom,

Thanks for pointing that out.

The code got garbled up because it was interpreted as an HTML content.

I have rectified that - hope this helps.

Scott said...
This comment has been removed by the author.
Scott said...

Fantastic, thanks for sharing!!