Sunday, 03 July 2011 19:38

Adding Google +1 to K2 Items

Written by 
Rate this item
(6 votes)

What is Google +1?

For the tech savvy site owners and developers, you will all know of Googles content rating called +1.
For those that don't know, then Google describe it as:

The +1 button is shorthand for "this is pretty cool" or "you should check this out."
Click +1 to publicly give something your stamp of approval. Your +1's can help friends, contacts, and others on the web find the best stuff when they search.

 

Its essentially a small snippet of code which displays a rating image, imagine K2 ratings stars, mixed with a kind of Facebook/Twitter share but on

steroids that allow the recommendation to show up in your Google search results, Google profile and now the new Google +, which we have ;).

What do you need?

Some sweet Google code, so you will need to visit this link, to get it and get more google information.

Make way for the code.

I am going to keep things simple and show you how to get the Google +1 to display in your K2 items, like you will find throughout our blog.

So having clicked the previously mentioned link to Google and I have gotten this snippet of code:

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

This needs to be placed within the < head > of your Joomla template. NOTE: the additional space after the < this should be removed in your code.

The second part of the code sets up they way the Google +1 is displayed:


If you have not done so already, you should create a Joomla template over ride, so that you are not modifying the default k2 template which resides in the component. Further details can be found on K2 document site: http://simon.getk2.org.

In the template I am using for my Blog (a modified version of Rounded) I have placed this second code, just after the K2 Rating.
I also wrapped the Google code in a

so that I can get it to play nice with the rest of the layout and add a little css to align it.

Then for the css, I add the following:

div.plusone {float: left; margin: 0 0 0 10px;}

Ordinarily, you would place this in the k2.css file, but as we are running 10 different K2 templates, we use the CSS4K2 Plugin from our partner Jiliko.net

Setting up your K2 Category

Now before you go check your site, you need to set the K2 category template in the appropriate K2 categories parameters, else you will simply be loading the default template that wont have this code added. Of course, you could add the code to the default template, but just remember, that if you upgrade K2 at some point, you will loose the changes.

You should be all set, visit your site, navigate to an appropriate category and viola!!

Update

Its great that each page shows how many visitors "like" "+1" your content, but from a site

administrator's point of view, you don't want to have to go through every page to see how they have been rated.

Well, if you hav Google +, then there is a page that displays all you +1's great!! well almost take a look at the screen shot below, click to enlarge.

Its shows which content has been +1'd but it would be even better if it also showed the number of +1's per content.
Dear Google, that's my feature request.

googleplus1

Read 234174 times Last modified on Tuesday, 05 July 2011 22:34
Simon Wells

This is me, Simon

Website: www.k2joom.com
  • No comments found