Customize and Add Google +1 Button to WordPress, Blogger and other Websites

Google +1 buttons lets users recommend the content they loved to their friends. When a signed-in user does a search on Google, they will get contents recommended by their friends and contacts, helping them get the best results.

On the original page itself, the button shows the aggregate number of +1’s a post has received.

Add Google +1 to a Website

Google +1 buttons are available in numerous sizes. You can select one which suits your website best, and get the code from the official page.

You will get two sets of code from there. The first part is to be inserted inside your website’s <head> </head> tags.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

And the next set is to be placed where you actually want the button to appear:

<g:plusone></g:plusone>

That’s all to it. It’s as simple as that.

Customize Google +1 button

There are some customizations options available as well. Like if you want to place multiple buttons on a single page, in which one points to another URL, the above code won’t be useful.

For doing that, edit the button code and use the href attribute to specify the target URL. Example, if you want a particular button to point to another URL than the current page, edit it’s href attribute value like this:

<g:plusone href="http://www.example.com/"></g:plusone>

Buttons can also be displayed without showing count. For that, add the count=”false” parameter in the code. Example:

<g:plusone size="small" count="false"></g:plusone>

Note: This does not work with the Tall size because it must have the count.

The button language can also be customized by including {lang: ‘fr‘} along with the javascript.

Add Google +1 Button to a WordPress Blog

For WordPress, you can use the above code, or just add the following to your theme’s functions.php file:

function googleplusone_button() {
echo '<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>';
}
add_action('wp_footer', 'googleplusone_button');

function share($content){
if(is_single()) {
$content .= '<div><g:plusone size="medium" href="<?php the_permalink(); ?>"></g:plusone></div>';
}
return $content;
}
add_action('the_content', 'share');

That will show Google +1 button after each post. If you need it somewhere else, edit your theme’s templates files and place the below code after the first set above (don’t add the second set).

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

Add Google +1 Button to a Blogger Blog

In your Blogger’s dashboard, go the Design tab and click on “Edit HTML.” Check “Expand Widget Templates” and search for <data:post.body/>.
Include the following after that:

<div style='float:right; margin-right:10px;'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/>
</div>

If you want to show +1 button on the left side of your post , then replace “left” with “right” in the code.

Related tips:

One thought on “Customize and Add Google +1 Button to WordPress, Blogger and other Websites”