Description:

In this tutorial i will show you how to include a google plus one button into your wordpress blog, and how to customize it.

There are one necessary spet, that allow wordpress to load the Google +1 Javascript in your blog’s header, and another step to include the real button in your pages and articles.

There are also some customization you can to modify your embedded button.

The Code:

Step one: Javascript in header

In this first step you need to load the Google plus one button’s javascript in your blog’s header, and let google find your content; to do this add to your function.php following snippet of code


function wpc_googleplusone_header() { ?>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<?php }

add_action('wp_head', 'wpc_googleplusone_header');

Step Two: The Button

Now it’s time to call the real button code. This is the basic Google +1 button, see above for customization. You just copy and past following snippet into your function.php file.


function wpc_embed_plusone() { ?>
<g:plusone></g:plusone>
<?php }

Step three: Embed the button

Ok well done, you have call the javascript in header, and created a function to call the button, now just need to embed the function wherever you want, adding this snippet in your post or article pages; for example single.php or page.php, or searchresults.php

<?php if ( function_exists('wpc_embed_plusone')) {wpc_embed_plusone()} ?>

Customizations:

function wpc_embed_plusone() { ?>
<g:plusone size="#SIZE" count="true/false" href="<?php the_permalink(); ?>" lang="#chooselang"></g:plusone>
<?php }

And now Some Explanation:

size=”#Size”:

Replace #Size with:

  • standard (38  x 24 px)
  • small (24 x 15 px)
  • medium (32 x 20 px)
  • tall (50 x 60 px)

    • With this parameter the attribute count is set on true, you can’t disable it, so this attribute must be “true”

Note: there size are about the button with the attribute count=”false”. Dimension for the count=”true” can be found here.

count=”true/false”

This is a boolean value:

  • true = show the counter
  • false = don’t show counter

Choosing a value between one of them, according with your blog’s style; choosing true the dimension can be edited.

Lang:

You can choose a valid language from the table published on the google code reference guide.

Google Plus One actually works only on Google.com.

Entire code:

You can copy and paste this code in your function.php file:

// Embed Javascript and add to header

function wpc_googleplusone_header() { ?>
<!-- Powered by Wpcode.net -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<?php }

add_action('wp_head', 'wpc_googleplusone_header');

//add the button

function wpc_embed_plusone() { ?>
<g:plusone size="tall" count="true" href="<?php the_permalink(); ?>" lang="en-US"></g:plusone>
<?php }

//Nothing Else