How to Add Google’s +1 Button to your WordPress homepage

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
June 2, 2011

Google has released its +1 button for websites. Google launched the +1 button about a month ago that let users vote up a website on Google Search results, to be seen by their friends. Now, Google wants to make it ubiquitous on the web and thus lets webmasters to embed the button on pages throughout their website. You can easily add the plus one button to any page on your website by simply using the code snippet provided by Google for various sizes. But what if you want to add Google +1 button to WordPress homepage? Well, its easy and you just need to modify the standard code a bit.

You can get the code for embedding the +1 button through Google’s custom +1 button generator page. The +1 button is available in four different sizes, the standard size, small size, Medium and Tall. You can quickly grab the code for your desired size and use it on your website.

For the standard button, Google generates a code that looks something like this

[code]
<!– Place this tag in your head or just before your close body tag –>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

<!– Place this tag where you want the +1 button to render –>

<g:plusone></g:plusone>
[/code]

Here the code at the top should be placed in your footer.php of your WordPress theme. Paste the following code just before the closing tag on footer.php file.

[code]

<script src="http://apis.google.com/js/plusone.js" type="text/javascript"><!–mce:0–></script>

[/code]

Now grab the code above it and place it on single.php where you want it to appear. So, paste the code given below to single.php below the content or above it, where you want the +1 button to appear.

[code]
<g:plusone></g:plusone>
[/code]

Now, simply adding the above code on the homepage below each post excerpt won’t generate a +1 button for each individual post. To add the +1 button on WordPress homepage, use the code given below and paste it on the index.php file where you want it to appear.

[code]
<g:plusone size="small" href="<?php the_permalink() ?>"></g:plusone>
[/code]

This will now add a plus +1 button that corresponds to each post appearing on the index page. You can add the code in similar manner to category pages as well.

Thus, by modifying the code snippet given by Google by adding the URL attribute, you can embed the Google +1 button to WordPress blog homepage.

You may also like...

  • I added that code (<g:plusone size="small" href="ID)); ?>”>)into the main index php and it shows the number of plus +1 for my site, not for the individual posts.

  • Anonymous

    use it exactly as shown… with the php code as well. this code

    <g:plusone size="small" href="ID)); ?>”>

    I am sure it will work.

  • It still shows the +1 for the site on each post on the main index, not the +1 for the individual posts.  

  • Anonymous

    You need to place the code in the loop.

  • Allijah

    Hi I’m an absolute ‘don’t know anything’ WP user, and thus have a silly question: what is the footer.php file and how do I get to it? (step-by-step instructions for a dummy please! :)). Thank you so much 🙂

  • Anonymous

    maybe the code isn’t inside the loop.

  • Anonymous

    Like @yahoo-Z4CJFSWSF6NJQ2QO56FEBHKHJM:disqus said, you can edit the footer.php file by navigating to footer.php in the theme settings. You can also download the file to your computer via FTP and upload it after inserting the required code.

  • K

    In case you haven’t figured it out yet –
    Go to your admin page, where you would create a new post
    On the (left?) sidebar towards the bottom you’ll have a header called “Appearance”
    Under that is an option called “Editor” – click on that
    Now you’ll see a big box of text and, on the right a column of options – in that right column is where your footer.php and stuff are.
    Before you do anything I would recommend copy-pasting what’s already there to a text file – in case you really screw something up in tinkering you can just copy-paste back from the text file.

    Hope that helps!

    And this guy’s advice was primo!  I tried a couple different sites to get the buttons to work with no luck, but worked like a charm using these directions.

  • K

    Thanks a ton – as I mentioned in a previous comment I was trying to get a +1 button for individual pages and tried a couple of “help” pages with no luck.  Yours was the most straightforward and helpful of all the pages!  It seems like the button’s working now.  Thanks again!