Something I've recently enabled in my theme (available on GitHub!) is Google +1 buttons.

Here I'll detail the steps I took to add the +1 buttons to my artwork and motion portfolio pages.

First you need to understand the logic behind my portfolio. The artwork page is actually a list of WordPress posts that have the post-type of artwork, so each picture has it's own post and it's own permalink. This is essential for the +1 buttons, as they each need to have their own URL to +1 independent of each other.

If you are using a different CMS, just ensure that each image (or whatever you're colorboxing™) has a unique URL, even if it's just the URL of the image itself.

Step 1: Adding the URL somewhere that Javascript can access

In my wordpress loop I needed to add the permalink for the WordPress post, in this case I just used the "data-*" attribute:

<a href="/path/to/image.jpg" data-permalink="<?php echo the_permalink(); ?>" class="galleryThumbnail" title="my really cool image">

If you're just going to use the URL of the image you can skip this step, as we can just steal the URL from the "href" attribute.

Step 2: The Javascript

I already had a custom "title" set up in my colorbox call, as I wanted the option for the user to download the image. Here is the script I had originally:

$("a.galleryThumbnail").colorbox({
opacity: 0.92,
scalePhotos: true,
maxHeight: "90%",
maxWidth: "90%",
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span>'+download;
}
});

I already have some variables set up in there that's pulling information from the markup. This gives you an idea on how we're going to access the permalink, so let's start the magic!

The Magic

We can't just add in the typical <g:plus> tag in the script since it just plain doesn't work. Conveniently, the plus guys have a handy-dandy documentation page that covers just about everything we need to tackle this problem. We need to use the Javascript API instead, which is really quite easy.

We need to set up a target element which is as simple as adding an empty element to the return, like so:

return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;

So I've added an empty span with the ID of cboxGplus. Now we want to target that element with the gapi.plusone.render command. At the end of the title function, add a comma after the last curly brace ("}") then add in the colorbox "onComplete" option:

 
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;
},
onComplete: function() {
// This is where the plusone magic will happen
}
 

The onComplete function, funilly enough, will run when the colorbox pop up finishes loading. So once the image has loaded and everything's settled, we'll tell Google to render that button for us. Do it Google! Do it!

Inside the function add the following two lines:

var permalink = $(this).attr("data-permalink");
gapi.plusone.render("cboxGplus", {"size": "small", "count": "true", "href": permalink});

The variable is pulling the permalink from the data-permalink attribute. If you're using the full-size image as the URL to +1 then change the "data-permalink" to "href".

The render command is being triggered for the "cboxGplus" element. It's being rendered as a "small" button, showing the count and the href is being pulled from the permalink variable. Neat-o.

All together

So now our complete code looks like this:

 
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;
},
onComplete: function() {
// +1 Button
var permalink = $(this).attr("data-permalink");
gapi.plusone.render("cboxGplus", {"size": "small", "count": "true", "href": permalink});
}
 

And after some CSS tweaking, check it out, it's now showing up:
Note: This example has "count" set to false, so the count bubble is hidden.

The +1 Button On Colorbox

See it in action

This is now live on my website, over in either my artwork or motion pages. The source is freely available over at GitHub. The pages you're interested in are:

  • /js/dbaines.js - Do a search for "// Colorboxing Artwork"
  • /loop.php - Do a search for "/* Artwork */" and look for the a tag.

Hope that helps, let me know if you have any questions in the comments section below, or drop me a line via email.