Wednesday, June 8, 2011

How to add +1 button to Wordpress

Google has made adding the +1 button fairly simple, but we wanted to provide self-hosted users with a quick walkthrough of the process of adding and enabling the +1 button to their site and their blog posts. We’re sure that dozens of +1 plugins will be available in the next few days, but in the meantime, this is what you need to do.

Step 1: Add a Line of JavaScript to Your Theme Files

The +1 button tool page lays out what webmasters need to add to their website. For users who have a standard XHTML website (or are using Tumblr), copying and pasting the following java scriptbefore the </body> tag on a website works just fine.
<script type=”text/javascript” src=””></script>
Simply Go to the Appearances section in the WordPress dashboard and select “editor.” Then find the footer.php file in your template listing. Scan through the file until you see the area marked </body>, then paste in the JavaScript line.
Hit update and you’re ready for step two!

Step 2: Add a Button to Your Sidebar

After the JavaScript snippet has been added to your website, users can paste the <g:plusone></g:plusone><g:plusone></g:plusone> wherever they want a button to appear. Using the +1 button tool, you can configure the button size and include other advanced options.
Another common use for the +1 button, besides on individual blog posts, will likely be in sidebar widgets on a homepage. This can act as a nice, generic hub for +1 activity.
To add the +1 button to a sidebar in WordPress (assuming your theme supports sidebars), simply go to the Appearances section in the Dashboard and select “Widgets.”
We’ll assume that you want to create a new widget for the +1 button, but other sidebar widgets can also be customized to display the button.

Drag a new “Text” widget to the sidebar location of your choice. You can add a header if you want, or you can leave it blank. In the text portion, paste the button configuration you want using the +1 button page. The standard code is <g:plusone></g:plusone>
You can choose how you want the button to align itself using HTML or referring to CSS classes from your stylesheet.

No comments:

Post a Comment