Advanced Google Plus Button Implementation

I was having an issue implementing a Google Plus button.  I was trying to use a jQuery append statement to write the Google Plus code.  But, for whatever reason it didn’t work…

So I ended up using their javascript api call, which I personally thought was a bit under-documented.  And searching the internet returns nothing more than bloggers that are too lazy to write their own content, so they instead regurgitate the same content on Google’s developer page along with some screen shots (good work Bloggers, way to be valuable to the internet!).

So here is what my solution was.  Given the corporate level of the site I’m working on, I don’t have server side access and need to find ways to make things work rather than always do them the easy and “right way”.  I have access to a global javascript file though, and so that with some jQuery placed on certain pages and areas within the site that I do have access to make things work just fine.  I know this isn’t always the best practice, but you gotta do what you gotta do at times.

But to the point of this post.  In the head of my site pages, I call the requried  Plus One API file.

Then, in my page where I want the +1 to appear, I’ve added:

And lastly, the code that seems to be under-documented on the web… the meat and potatoes.  Call the following script.

The call back portion is an optional feature that is poorly documented.  But that will allow you to do an action based on the user clicking on the button.  Example is fire tracking, or display an overlay saying thank you, ask them why they “-1″‘d you page, etc.  Interesting note is that it is against Google’s policies to use a +1 for a giveaway.  In other words, you can’t solicit +1’s and draw a winner for a gift certificate or anything like many do with Facebook likes…

But to expand on the callback a bit more, the parameter calls the name of a javascript function.  Example:
function gPlusCallback(data) {
        //Your code for a +1 action
    }else if(data.state==”off”){
        //Your code for a -1 action

Note: this function needs to be global in scope, else it won’t get triggered.

Hope this helps you out!