How to Add/Integrate Google +1 Plus One Button into WordPress

Posted in SEO , Web Development on 23 June 2011 1 comment

Google recently introduced their own social button just like those we commonly see, such as Facebook Share, Tweet It, Digg It, etc. Just like Facebook and Twitter button that let you share content to your followers or friends, Google +1 button let people who love your content to recommend it on Google search. The pages that you plusone-d (+1′d) can then be useful to your friends and contacts in your Google Account. They can see what you recommended, thus their search results will be something like this:

This feature can be turned off though, if you don’t like this. You can go to Google Account Settings > Under “+1 on non-Google sites” > Click “Edit” > Select “Disable”.

Integrate Google +1 Button into WordPress Theme

First of all, Google has its own code generator for the button located at here. Now. decide the style and size then come back to here again.

Loading The Required Javascript

Open your theme’s header.php, paste this or similar codes from the generator, ONCE ONLY, into <head> tag:

?View Code JAVASCRIPT
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Adding The Button To Single Post / Page

If you want your button to appear in single post or page, first open single.php or page.php, identify The Loop. More information about The Loop at here. Next, paste this button render codes or the codes generated by google, after

<g:plusone></g:plusone>

The code above should make the button nicely, your page URL will be auto detected so nothing we need to change here.

Adding The Button To Blog Index

If you want your button to appear in blog index for every post, first open index.php, identify The Loop and paste this button render codes or the codes generated by google, after or

We need to include a href=”" attribute here because every post has their own URL. like this:

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

In other words, no matter how your generated render codes looks like, just add the following href attribute into the plusone tag.

href="<?php the_permalink(); ?>"

Google Plus One Button, Live

This is how my Google +1 Button for this page looks like:


Useful Links

More Info about Google +1 Button
Google +1 Button Code Generator
Google +1 Button API for developer

 

Posted by Zen on 23 June 2011 • 18,399 visits 1 comment
Tags :


or Subscribe to specific category only :




  - 1 Comments


Ahmad says:

nice tut thanks alot

Leave a Reply

You must be logged in to post a comment.

Previous Post
«
Next Post
»