HOW TO: Add the +1 Button to Your WordPress Site

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.


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 <script type=”text/javascript” src=”http://apis.google.com/js/plusone.js”></script> before the </body> tag on a website works just fine. WordPress users, however, will need to add that snippet to their theme files.

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.


Additional Tips


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:

  • By default, the button doesn’t have a URL parameter set. Instead, the JavaScript will crawl your page and make its best guess for the URL that you are liking. If you want to specifically ask users to +1 a certain URL, add [code]href=”http://example.com”[/code] to the button’s tag. For instance, if I wanted to add a +1 button that reported to Mashable, this is the code I would use:<g:plusone href=”http://mashable.com”></g:plusone>
  • 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.

More About: +1 button, Google +1, tutorial, WordPress

For more Dev & Design coverage:

This entry was posted in +1 button, Channels, features, google, Google +1, News, tutorial, Web Apps, Web Design, Web Development, WordPress and tagged , , , , , , , , , . Bookmark the permalink.