Google turned up the heat on its +1 feature Wednesday, rolling out the new +1 button across select partners sites (including Mashable) and introducing a new tool for publishers to embed it on their own sites.
Google has made adding the +1 button fairly simple, but we wanted to provide self-hosted WordPress.org 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.
Hit update and you’re ready for step two!
Step 2: Add a Button to Your Sidebar
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.
At this point, we’ve successfully added the +1 button to a WordPress website. Users can add the button to individual posts by entering the button code in the body of a post, or add it in automatically by adding a line to the WordPress loop in the post.php and loop.php theme templates.
Here are a few things you might want to take into consideration when using the +1 button on your site:
- For sites with the popular Bad Behavior WordPress plugin it can interfere with the +1 button, at least as of this writing. Disabling the plugin will allow users to add +1 buttons to their site.
See it in Action
I added the +1 button to my personal website using the steps outlined above.
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad