Installing Google Plus Button on WordPress

If you’ve been anywhere on the internet in the past few months, you’ve seen the +1 button from Google right next to Facebook, Twitter, StumbleUpon and other social media sharing buttons.  It’s pretty clear that Google intends the “plus one” to be THE most important form of approval on the ‘net, integrating all those “plusses” into search results as well as showing them within the Google+ Plus network.

Here’s how to integrate the Google Plus button on the WordPress Twenty Eleven theme.

Installing the Google Plus JavaScript code snippet

The first step to adding the Google Plus button to this theme is to add the JavaScript code snippet that “talks” to Google.  This code can be placed anywhere in the theme, but lets install it in our footer.php file, right before the the closing </body> tag:

Adding Google Plus button on front page

To add the Google Plus button to each post displayed on the first page, we need to modify the content.php file.  Like all of the other modifications we’ve made to create a child theme like creating a custom header and custom footer, copy the content.php file into your child theme folder. To display the Google Plus button underneath the title, we need to place the following code, after the <div class=”entry-content”> and before the <?php the_content> tag:

In the Google button code, the piece of code that references “the_permalink” is a WordPress function that passes the link of blog post to the Google Plus button.  Without this addition to the button, Google will use the URL of the page you are on…in my case, the 3 buttons on the front page would all reference www.randyzwitch.com, which means a visitor wouldn’t be able to recommend an individual post.

Adding a Google Plus button to an individual blog post

To add the Google Plus button on an individual article or blog post using the “Standard” format in Twenty Eleven, we can do the same basic process as above, except we’ll modify the content-single.php file (again, copy this file into your child theme folder!).  We’ll add the code after the <h1> tag and before the “If” statement that starts building the content:


Technically, you don’t need to specify the “the_permalink” reference, since there will only be a single button on an individual blog post, and the Google Plus button will use the URL of the page.  But, it doesn’t hurt, so for documentation sake I’ve left it in.

Once you’ve added the button code on the individual page, you’re done!  Visitors to your blog can now recommend your content on Google search and on the Google+ network.

Optional steps

For this tutorial, I only provided the code for modifying the “Standard” page format for a single blog post.  If you are using multiple formats across your blog, you’ll need to modify each template you are using.  They all begin with “content-<format>.php”, and the button code goes after the <h1> tag and before any other code.

It’s also possible to modify how large the Google Plus button is and what is displayed.  I’m using the default bubble annotation, but if you’d like to have a larger or smaller button, or just different options, you can use the code builder from Google to see the button options.

Comments

  1. SocialPlanet_M says:

    Thank you, this was the most helpful instruction on adding the button to each individual post. Now, I’m trying to figure out how to add the “send” Facebook button to each post.

    • @SocialPlanet_M I’ll see what I can do about writing a Facebook button tutorial (obviously, I’m not currently running the FB buttons on my site). The steps are ultimately the same, modifying the same PHP files and using “the_permalink ()” to provide the unique URLs.

      • SocialPlanet_M says:

        Thanks, Randy! Ideally, I’d like to group them all together like you often see (kinda like you have it at the top of your post) so it looks nice and neat. How do you do that?

        • Randy Zwitch says:

          To make the buttons aligned, you can use CSS to “push” the buttons right or left, depending on which way they need to go. Without seeing your site, I can’t say what code you might need, but for this site all I needed to do was move the Twitter button to the right by using padding-left: 15px;

          That aligned the buttons enough to look right, since there are only 3 buttons. If I add more, I’ll need more CSS.

        • @SocialPlanet_M It seems like my last response got deleted somehow. To push the buttons over, you just need to use CSS. I used padding-left:15px; to move the Twitter button over. That was enough in this case, but if I had more buttons I’d need more CSS.

        • SocialPlanet_M says:

          @randyzwitch Randy, thanks so much for your help! Would you take a look at my blog and tell me what you think of the button placements? http://social-planet.blogspot.com

          Right now, none of the buttons show on the main page, but if you click individual posts you can see them at the top. It took me a while but I think they’re okay now.

          Really appreciate your tips!

        • @SocialPlanet_M I think the social buttons look great on the individual posts! Hopefully you can figure out how to get them on the frontpage as well, since you’re showing the full blog posts there. People might not click on the link and see the share buttons…

        • SocialPlanet_M says:

          @randyzwitch Thanks, Randy, I’ll try to get them up on the main page– thanks for the suggestion. This conversation, though, may not yet be over :P.

        • SocialPlanet_M says:

          @randyzwitch Randy, I don’t know how to make all those same buttons show on each post on the main page. Do you know how to do this?

        • @SocialPlanet_M Unfortunately, I don’t. I’ve never used Blogger, only WordPress.

  2. AbelRodriguez says:

    I love all your tutorials, i know some css and some html, i’m capable of modifying my blog but i still need some help and inspiration.. That my friend is you.

    I don’t really know if all the images from this theme are in my image folder.. Since i don’t see any button image or navigation bar image so i am going to ask.. Are these images integrated on the WordPress files ? or are these just being generated.

    I doubt the bar is since it has a gradient, even the default bar ( Dark Gray ) has a gradient so.. where is it ! ?

    By the way if you want to go visit mine you can check it out at http://www.fleeteen.com i’ve also added an rss button and a facebook one and moved them with my noob html skills.

    Well i hope you read this and give me feed back :) !

    • @AbelRodriguez For the social media buttons, all of those come from the respective websites themselves (StumbleUpon, Twitter, Google). For the buttons that are in my right navigation for RSS, Twitter, and Google+, I got those from a plugin that I used to use. If you want to use them, just right-click on the images, then click “save-as”, and then put them in your WordPress theme folder.

      Finally, the navigation bar is done with CSS. Assuming you are using TwentyEleven, you can just paste the following code into your CSS file:

      #access {background: -moz-linear-gradient(bottom, #4B80CF, #11376B) repeat scroll 0 0 transparent;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background: -webkit-gradient(linear, center bottom, center top, from(#4B80CF), to(#11376B)); }

      If you aren’t using TwentyEleven, you just need to modify the “#access” reference to whatever the navigation element is called.

      Hope this helps, thanks for stopping by!

Leave a Reply