How I added article G+ buttons to my WordPress site

In my last blog post I mentioned that I added G+ buttons to my blog.  Yes, I know there are plugins for WordPress that do this but I felt that it would be a fun experiment.  I was able to do this by only adding two snippets of code.  I’ll note before getting into this that you probably should not be hacking WordPress themes, however, this is a nice example for pedagogical purposes.

The first snippet, which asynchronously includes the JavaScript library for G+ buttons is as follows:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Then, in my theme’s main post php, I identified where in the H2 tag the url and title were being placed and then I added an extra link:

<g:plusone size="small" href="<?php the_permalink() ?>"></g:plusone>

For additional details on how to configure and setup the parameters for making basic and custom buttons for your side, read the developer documentation for adding buttons to your site.

For additional information on how to break WordPress themes (kidding a little bit), read my older post: Simple WordPress theming for matching your site.