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.
In my wordpress loop I needed to add the permalink for the WordPress post, in this case I just used the "data-*" attribute:
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.
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:
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!
We need to set up a target element which is as simple as adding an empty element to the return, like so:
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:
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:
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.
So now our complete code looks like this:
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.
See it in action
- /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.