Adding Google’s +1 Button to WordPress Sites
Google rolled out their +1 button today. So I added it here. You’ll find it below all the posts. Try it out.
Here’s the simple-stupid plugin I wrote to do it. While you can just edit your theme, I like making these sort of things into plugins. That way, I can turn them off at will, and I know exactly where to go to change them without having to dive into my theme code. Also, if I change themes, the code still works on the new theme.
<?php
/*
Plugin Name: Otto's Google +1 Button
Description: Add a +1 button after the content.
Author: Otto
Version: 999
*/
add_filter('the_content', 'google_plusone');
function google_plusone($content) {
$content = $content.'<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
return $content;
}
add_action ('wp_enqueue_scripts','google_plusone_script');
function google_plusone_script() {
wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}
I wrapped the button in a div so that I could style it. In my particular case, I’m floating it right and giving it a margin, same as the Twitter and Facebook plugins. One day, I’ll make all these little Google plugins more generic and configurable, and roll them into a Simple Google Connect plugin. 🙂
One thing I don’t like is that the +1 button only works for people who are logged into a GMail account. Sorry Google Apps users, you’re out of luck. Complain to Google until they fix it.
If you want to add more parameters to the plugin and reconfigure it, you can find out about the available parameters here: http://code.google.com/apis/+1button/#configuration
Thanks for this code, Otto! I have the plugin in and working – awesome. I modified it slightly to put the button above the content, but otherwise it is perfect.
An even easier way to add plus one along with over three hundred other social services is to use the AddThis WordPress Plugin
True, but seems like massive overkill to me. I’ve noticed on sites that have a lot of those buttons that they seem to get fewer clicks than sites which only have a few.
Best to stick to the top three or so. IMO.
Yes, but what are the top three of your users? you can guess, or because of our personalization API, we can show those top three services to them.
Meh. Just seems like a lot of effort for something so simple. Plus I don’t really care for the “AddThis” button in general, nor for doing things through a third party service. Virtually everybody is on Facebook and/or Twitter, and using Google is kind of a no-brainer anyway. Other services pretty much don’t matter.
Like you say, there’s 300 odd services. But nobody really uses but about 8 of them, and catering to the fringe markets doesn’t strike me as particularly useful. Take delicious for example. It’s easy enough to add a delicious button to the page, but I don’t because I don’t use nor care about delicious. Doesn’t affect me. Seems like an edge-case.
Would I care to know what services my users use? Not really. I write because I want to write. I’m not selling anything here. So it really doesn’t matter to me how people share the content. The numbers are irrelevant. I do like seeing them, but I’m not spending my time worrying about them. I’m more interested in feedback, and in seeing the conversation built around my posts. These buttons kinda let me do that, but if only a small number of people use one of them, then there’s no conversation to see, really. Having a button that one out of every 500 visitors clicks on is rather pointless. Having one that one out of every 50 visitors clicks on isn’t.
Just my 2 cents, of course. 🙂
No, really, Otto… now tell me how you really feel about those buttons. 🙂 — OMW to take them down cuz you’re 100% right. we only need 2 -3, 4 max usually. And I’d love to see an expanded post later –if you haven’t got one already about the topic of this little rant.
Hey, no, I’m not saying they’re bad or anything. Just that I don’t see the point for my particular needs. But I don’t know all possible use cases or anything.
The +1 button does work for Apps users when the account has joined the experiment:”PlusOne”
http://www.google.com/+1/button/
correction…i can see them and see what my friends like but due to not having a public profile i can’t +1 a page…
Nope, doesn’t work for me. I joined that experiment, but clicking the +1 here still gives me “Oops… you need a Google profile to use this feature. Google Profiles is not available for your organization.”
Apps accounts can’t have Profiles, so can’t use those buttons.
I needed things a little differently since I have my “Sharing Area” above the content of each post. It turns out, I simply needed to add the following to make it work properly on Home and individual post pages:
(plus the code for the head, too, of course) …. this is more a solution for those who, like me, came here looking for how to add the +1 but needed something a little different than what your plugin does.
Interesting for this code. Easy to add in my blog.
Thanks.
Hi, cool plugins ! thanks.
[…] putting the +1 button on WordPress, you need to apply special tweaks for it to work for each specific page – just using the default code will make the button work […]
You could skip the extra div and use their HTML5 equivalent code
+1 Button API
Tried that. It didn’t work. Specifically, the “tall” size didn’t seem to work properly with the HTML5 code. So I just added the div. No biggie.
I’m a newb- how do I “Grab” that script and upload it into my site as a plugin? I only know how to do it if its a zip…?
anyone?
How do I install this plugin? I copied the code, saved it as an .php file and moved it to the plugins directory on my ftp but I can’t see it in the WordPress backend.
I believe you have to put it in a folder first. There may be an easier way, but I figured it out by putting it in a .php file, placing it in a folder, zipping the folder, then used the Plugins > Add New > Upload feature to upload the zip.
No, it was my bad. I copied the line numbers as well so the PHP was broken 😉 Also your example does not close the php tag. After fixing that it worked fine even without a folder. Thank you!
I mean Otto’s example of course. A bit confused today.
Closing the PHP tag is optional, and it’s actually recommended to not close the PHP tag in plugins. With a closing tag, it’s possible that you accidentally have a space or newline after the ending tag, which will cause output when the plugin is loaded. This will break cookie handling and cause you to be unable to login to the blog, with a “Headers already sent” error message.
Well done 😉
[…] you prefer the plugin method, here is a quick and simple plugin (just a dozen of lines) by Otto that adds +1 to a post. I'm sure there […]
[…] my file and folder “googleplusone” but you can choose any name you wish.(hat tip to Otto who created *most* of the code I shared with you – unfortunately he didn’t include […]
I am new to adding code on my wordpress site. Which page in the template are you editing and adding the code? Thanks
I can’t wait to see the same customization options (e.g. before or after the content, both, shortcode, manual insertion) featured by the share/tweet buttons in your awesome SFC and STC plugins.
Great work!
Thanks for this! I tried a lot of people’s instructions and they didn’t work, maybe because I am in 3.0.4 still, but yours did. Much obliged!
otto, you’re a godsend though in providing these plugins.
on another note, anyone else notice the Google+ and the Facebook Like “boxes” are about 1 or 2 pixels shorter than the tweet button/count “box”? is there a way to fix this to either shorten the talk bubble for the tweet button, or increase the bubbles for fb and google+ ? as a designer, little things like this seriously bother me.
[…] OttoPress’s Post […]
Otto,
(My site runs on the WordPress platform.) Is there a way to have +1 appear in individual comments in a combox, for people who really like a particular comment to an article?
Would you mind sharing the div wrap you used to float your icons.
I’d like to get the effect you see on this page: http://meditationtechniques.co
Appreciate the help
This is goofy and very basic, but if anyone was looking for how to exclude certain pages then you would add this.
function google_plusone($content) {
if (is_page(1372)) {
$content = '';
} else {
$content = $content.'';
return $content;
}
}
Thanks for this awesome post Otto! You Rock Dude!
After else in the code i posted was filtered out / blocked, but the part that you would need to add was not — if to else.
I wonder if it also has a dislike feature which is frequently abused for example on YouTube. I understand that any rating counts for more than no rating but rating with the intention to do harm rather than good to someone is pathetic.
We will try to get as much as +1 we can because we know the benefit of it with seo prespective (and soon we will see many people started to sell +1 as well) but a normal user do not know about it and where facebook like button is one step ahead from it.
I wonder if it also has a dislike feature which is frequently abused for example on YouTube. I understand that any rating counts for more than no rating but rating with the intention to do harm rather than good to someone is pathetic.
We will try to get as much as +1 we can because we know the benefit of it with seo prespective (and soon we will see many people started to sell +1 as well) but a normal user do not know about it and where facebook like button is one step ahead from it.
Does it work with the new asynchronous code?
[…] http://ottopress.com/2011/adding-googles-1-button-to-wordpress-sites/ This entry was posted on Monday, November 7th, 2011 at 9:31 pmand is filed under web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]
nice this code Easy to add in my blog.
Thanks.
Looks a good way to add the google +1 . I will give a try.
[…] first “like/tweet/post” button to be a Plus1 button.Did a little digging. Came up with this post:Google rolled out their +1 button today. So I added it here. You’ll find it below all the […]
Google is introducing new +1 feature that will show users with other content recommendations when they when the hover + 1 button by the mouse…
Read full article here,
http://www.geekscover.com/2012/06/button-1-add-content-recommendations/
[…] Did a little digging. Came up with this post: […]