How to add a Google +1 button to your Joomla site

What is Google +1?

You can also take a look at the following video from Google:

Why use it on your Joomla site?

Even though Google is the no. 1 search engine, there has been something missing, and that's the direct user-interaction.

The Facebook Like and Share buttons have become a standard for sharing content with your friends. Now, I see no reason why the Google +1 button won't be of equal, albeit different, importance.

Google tried to launch Google Buzz a while ago, but this didn't take off as they expected. Thus, they turned around and created the +1 button. In my opinion, it seems like a much better idea.

Major sites like Mashable have already implemented the button and Google is actively marketing the functionality.

The +1 button can appear in a variety of places, both on Google and on sites across the web. For example, you might see a +1 button for a Google search result, Google ad, or next to an article you're reading on your favorite news site. Your +1’s and your social connections also help improve the content you see in Google Search.

The +1 button is currently only available for English searches on Google.com, but I guess they will implement the feature on other language searches as well pretty soon.

So if you want to have users recommend your pages on Google - you need to implement a Google +1 Joomla button as soon as possible.

How to add the Google +1 button in your Joomla site

To use Google +1 button on your site, you need to add two pieces of code:

• A Javascript snippet fetching the code from Google
• A tag for rendering the button where you want it to appear

The Javascript snippet

This is the Javascript snippet that needs to go on every page where the +1 button should appear (place this tag in your head or just before your close body tag):

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

To add this code to your site, you have two options:

1. Add it manually to your template index.php file (found in /templates/YOURTEMPLATE/)
2. Add a module containing the snippet using this method (recommended)

The +1 button tag

The actual button code (place this tag where you want the +1 button to render):

<g:plusone size="medium"></g:plusone>

This actual code renders the standard +1 button code. There are several types of buttons to choose from, and you can visit the Google +1 button configuration tool to choose what kind of button you want.

To add the tag to your Joomla articles, you need to put it into a Joomla template override for the com_content article view. If this is Greek to you, please read my article about Joomla template overrides first.

You need to add the above tag to the /templates/YOURTEMPLATE/html/com_content/article/default.php file.

You might also consider adding some CSS to the tag to have it display the way you want to. For instance, place the tag in a DIV with the class name 'gplusone': <div class="gplusone">The tag</div>. In this example your button will be placed to the right side of the text it preceeds:

div.gplusone {
float:right;
margin-left:20px;
margin-bottom:20px;
}

As you can see, it's quite easy to add the button to your Joomla articles. A good place to add the button could be just after the article text.

If you're using K2

In case you're using K2, you need to add the button tag to your K2 template.

I recommend you use a template override for that as well if you don't already:

1. Create a folder in your /templates/YOURTEMPLATE/html/ folder called "com_k2".
2. Place a copy of the files found in /components/com_k2/templates/default/ into the folder you just created. This will create an override of your default template.
3. Do your modification on these files and not on the ones in /components/com_k2/templates/default/. Now, if you upgrade K2, your modifications will not be overwritten by the installer but stay nicely in your template HTML folder.

Now, you can add the button code to the K2 item.php file and it will show up in your K2 items.

On one of my sites, www.whatcoffee.com, I added it just below the article text and before the ratings function. That way, the reader can easily recommend the article if they liked it:

Enjoy your +1's ;)