Earlier this month, Google announced the “+1″ button for websites, allowing content publishers to place the button on their website. When a reader clicks the +1 button, that link is then shared on Google search results for everyone to see. The button is very simple to integrate if you’d like readers to only +1 the current URL, but is a little more complicated if you’d like to embed it on a content management system like WordPress where you have multiple posts on a webpage.
Here’s how to do just that:
Step 1: First, you’re going to want to launch up your favorite FTP client (something like CyberDuck on Mac OS X or FileZilla for Windows).
Step 2: Navigate to the following directory: /wp-content/themes/your_current_theme. Of course, replace your_current_theme with the directory of the theme that’s currently active on your WordPress-based site.
Step 3: Find the file that contains the WordPress “loop.” It’s different for every theme, but common names are template.php, index.php, and home.php. Look for the piece of code that looks similar to: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Step 4: Set this aside for now. Next, you have to get the code for the Google +1 button from here: http://www.google.com/webmasters/+1/button/. Follow the steps on the webpage to get the code you’d like. Copy the code that looks similar to this:
Step 5: Go back to the file you had open with the WordPress loop. Paste the +1 button code into this file, making sure it’s INSIDE the loop. You’re likely going to have to play around with the location of the code to change where the button is rendered on your site. Once you get the best location for the button, save the file.
Step 6: Next, open up the file in the same theme directory that’s called footer.php. Copy and paste the following code into this file, right BEFORE the closing tag:
. Save this file.
Step 7: If you reload your website, you should see the +1 button rendering in the spot you’d like it to. However, right now, the button is only “+1-ing” the current URL, not the URL of the post. To change this, once again open the file that contains your loop. Find the +1 button code and change it to:
. Make sure that, if you made any modifications to the +1 button when you first got the code (like the size), make sure you don’t loose that. Save the file.
That should be it! You should have the Google +1 button all set and running on your WordPress-based site.