Shopping Cart (0)

Add a Google +1 button to your blog

8 Posted July 7, 2011 by George Categories: Tips and Tricks

Hello, lovely tadpoles!

Do you remember our post about adding Twitter Tweet and Facebook Like buttons to your blog? Well, today we have another of these.

Quick, what’s the latest, hottest buzz in social networking and recommendation on the web? That’s right, Google+, the social network. Now, what’s at the center of them circles? The +1 button, that’s what! The little button from the big G, that can propel your content up the search rankings, to get you, and your content, seen. In the words of Google themselves, “+1 buttons let people who love your content recommend it on Google search.”

This is really powerful stuff, folks… Perhaps a little explanation is in order. Say a reader, who we’ll call Nemo, +1′s a post on your blog, for example, about your Bonsai collection. It really was a great post. You wrote passionately about how your collection started, some details of your current prize-winners, what you learned, and you included some gorgeous photo’s. It totally deserved that +1.

Now, one of Nemo’s social contacts, who doesn’t know you, at all, uses a related search term, say “choosing first bonsai”. Because of the social linkage, and the smarts embedded in the search engine algorithms, the +1 recommendation will surface your post, in the results, because of Nemo’s thumbs-up. Of course, if enough folks keep recommending your content, pretty soon, Google is going to take notice, and start considering you a bit of an authority on Bonsai, and move your results up the page, even when someone with NO social connection to you searches for related terms. Ahh, we do so love the smell of SEO in the morning!

All makes sense? Right then, you really should have a +1 button on your blog posts, so let’s do that.

The good folks at Google have a nifty-fifty page that answers all your questions. There are a TON of advanced settings there, but luckily, the really simple default will suit most folks.

There are two parts. Add a line to reference the Javascript that does the magic, and add an instance of the button at the appropriate place on the post. The button will cleverly find the URL to recommend from the Document Object Model. (plain english: Like a tourist on a street corner, the button will look around and find out where it is, by looking at signs and stuff.)

We’ll use our famous Greyzed theme as an example, and we’ll have to edit two files, single.php and footer.php. Remember to back up before editing. (We have a great post on backing up your blog…) No tears, please. And use a plain text editor, like Notepad, or a proper PHP aware editor.

Let’s add the reference to the Javascript, at the end of the footer.php, just before the closing body tag. That means the page will load first (and keep your reader’s attention), before the script. Here’s what it will look like, with the line added:

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

Great, save that out as footer.php. Now, we’ll add an instance of the button to the actual post, and you’ll find that in single.php. The end of the post, just above the next-previous construct, makes the best sense, in this case. Here’s what it should look like:

<div class="entry">
  <?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
  <g:plusone></g:plusone>
  <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>

Save that out as single.php, and we’re done. Open a post in your browser (you may have to hit refresh) and hey presto! Google +1 awesomeness!

Google +1 button added to post

All done.

Now go and create the content that will change the world, like we know you can!
Till next time… *froggyfoot-wave*

Comments

28/07/2011 8:53 pm
Kim

Thanks! Really useful info – will be adding +1 to the theme I am about to buy :-)

Reply
28/07/2011 9:08 pm
George

Thank you for the kind comment, Kim :-)

Please pop me another comment once you’ve purchased and setup the theme, I would love to see how it looks on your site!

15/09/2011 12:48 pm
tjmyers

Thanks, George, that worked a treat!

Reply
16/09/2011 11:01 am
George

Pleasure, Tony :)

10/12/2011 8:03 am
neo

great blog and thanks for this article, worth reading

Reply
14/12/2011 3:00 pm
Guru Frog

Thank you for your kind words, neo.

15/12/2011 2:33 pm
Plusones James

This is exactly the information I was looking for. Thanks a lot for posting!

Reply
15/12/2011 2:43 pm
Guru Frog

Our pleasure Plusones James.

Leave a Comment

(required)

(required, not shown)

TimThumb not displaying images? Let’s fix that!

If you've noticed that a number of images aren't displaying correctly ... Read more

Adding a Tweet Box to your site

Both Windows and Mac are integrating social media platforms more and m... Read more

George has something new to show you

Hello tadpoles! We're as happy and excited as a dog with two tails, to tell you about the latest theme from the team around the pond. It's called Cohesion, and we like to think of it as "a socially-engaged business theme". Read more

Valentines Giveaway: Win a copy of our new gorgeous theme – Occasions

Love is in the air, and lucky for you frogs aren't immune to Cupid's m... Read more

Create a slick dropdown or flyout menu in minutes

As the amount of content in your site grows, at some stage you'll want... Read more

eFrog News Categories

Browse our themes