Monday, June 27th, 2011

How to Use the Google +1 Button Callback Parameter to Unlock Exclusive Content

by Glenn Gabe

Google +1 Button Callback Parameter

Since the release of the Google +1 button for websites in early June, many webmasters have been trying to figure out the best ways to implement it across their sites. In its most basic form, the +1 button is relatively easy to add to a webpage. You can grab two line of code, add them to your webpage, and be on your way. That said, Google has provided several parameters you can use with the +1 button that control how the button looks, what is displays, which URL should receive the +1, and which function you want to call when someone clicks the +1 button. Wait, did you catch that last part? Google added a mechanism for webmasters to trigger a JavaScript function when someone clicks a +1 button. The mechanism I’m referring to is the “callback” parameter of the +1 button, and it opens up a world of opportunity for webmasters. Let’s explore the parameter in greater detail, including what it is, how to use it, and how to avoid problems down the line.

What is the Callback Parameter?
As I mentioned earlier, you can implement the basic +1 button on your site with just a few lines of code. You need to include a JavaScript tag and then the +1 button tag. It’s essentially two lines of code and you’ll have a +1 button on a webpage. But, if you review the Google Code page for the +1 button, you’ll notice several other parameters. You have count, size, and href, which control the display of the +1 button, as well as identifying the URL that should receive the +1. Then you have the callback parameter, which takes the name of a JavaScript function as the value of the parameter. The JavaScript function you trigger can do anything you want (ok, not anything), and I’ll cover more about this soon.

Here is what the google +1 button code would look like when using the callback parameter:

 HTML |  copy code |? 
1
<g:plusone callback="helloWorld"></g:plusone>

When you include the callback parameter in the +1 tag, you provide the name of a JavaScript function that will be triggered when someone clicks the +1 button. In this example, the function called “helloWorld” will be triggered. Note, helloWorld() needs to be part of the global namespace, meaning it needs to be included in the page or referenced in the html file via a script tag. The function will receive a JSON object, which includes both an “href” value and a “state” value. “href” will include the URL that received the +1 and “state” is either on or off (where on represents a +1 and off means someone removed a +1). That information is good to know and you can handle each situation separately. More about this soon.

Example: A Simple JavaScript Function
Below, I have included a very basic JavaScript function that’s called when someone clicks a +1 button. It simply throws an alert displaying the state of the button when clicked. Note, this function could either reside in the page itself or it could reside in an external JavaScript file that’s referenced in your html page (via a script tag).

 HTML |  copy code |? 
1
2
 function helloWorld(plusone) {
3
	window.alert('+1 Triggered, State=' + plusone.state);
4
}
5

How the Callback Parameter Can Be Used
Based on adding the callback parameter to the +1 button, Google is enabling webmasters to creatively use the functionality to interact with users. For example, you could reward users that +1 a page on your site. There are some rules, though. Remember, +1’s impact rankings, so you don’t want to “buy” rankings. I attended a Google webinar last week that covered best ways to implement the +1 button and Google made it very clear that you should not pay for +1’s. That means you shouldn’t incentivize users with money, product, or services based on those users clicking a +1 button on your site. Here is the actual language from Google’s policy page:

“Publishers should not promote prizes, monies, or monetary equivalents in exchange for +1 Button clicks.”

The reason Google doesn’t want publishers incentivizing users with prizes or money is simple. +1’s impact rankings, rankings should not be manipulated in any way, and paying for +1’s is like paying for links. Don’t do it.

Unlocking Content is OK
Although you can’t provide products or services, Google explains that you can unlock exclusive content. Here is the language in Google’s policy regarding enabling content and functionality:

“Publishers can direct users to the +1 Button to enable content and functionality for users and their social connections.”

If someone +1’s your new blog post, you could unlock exclusive content for that user (and you can use this approach creatively, depending on your specific industry, business, etc.) For example, you could provide a study that goes deeper into a topic, you could provide additional tutorials on the subject matter, provide additional news about a topic, etc. Just make sure you wouldn’t ordinarily charge for that content. Yes, this seems like a slippery slope, since exclusive content might already have a price tag associated with it. As a webmaster (or marketer), you might need to build new content that could be part of your +1 program.

An Alternative Approach – Catching +1 Removals
Earlier in this post, I mentioned the “state” value that gets passed to your JavaScript function in the JSON object. That value will tell you whether someone +1’d a page or removed a +1. Knowing that someone just removed a +1 is important information, and you can act on it using the callback parameter of the +1 button. For example, maybe you can ask the person why they removed the +1, ask them to reconsider their +1 removal, or redirect them to a page that provides a more creative approach to catching +1 removals. Now, you don’t want to go overboard here. If someone just removed a +1, they obviously had a reason. You don’t want to add fuel to the fire and push the limits of getting that +1 back. That said, the right messaging could act as a legitimate confirmation that a user will be removing a +1, which could potentially save some of those votes. It would be interesting to test this out to see how many +1’s you can gain back by using the callback parameter.

Unlock Content, Get More +1’s?
As you can see, the callback parameter can be a helpful addition to the +1 button code. Depending on the “state”, you can either reward users with exclusive content, or you can address the removal of a +1. Remember, +1’s impact search rankings, so they can be extremely valuable to your organic search traffic. Just be careful about what you’re giving away to users that +1 content on your website. Make sure you aren’t giving away prizes, money, or services. The last thing you want is for a creative use of +1 to get you penalized. And if history has proven anything, you can bet that some webmasters are going to try and manipulate the system to gain more +1’s. As I said earlier, don’t go down this path. It’s not worth it. Play by the rules, be creative, and gain more +1’s the right way.

By the way, have you +1’d this post yet? :)

GG

26 Responses to “How to Use the Google +1 Button Callback Parameter to Unlock Exclusive Content”

  1. Come on now, I +1ed it. Where’s my super secret content?!

    • Glenn Gabe says:

      Hi Liam. That’s funny, I had a feeling someone would think there would be exclusive content with this post. That would have been a great idea. Maybe I’ll create something and get it up there. :)

      GG

  2. Dominic says:

    Is there a way of embedding the +1 button within another button, so that when you click the outer button, the +1 button gets clicked too?

    I currently have a row of social buttons in a dropdown menu. It would be nice to add the plus1 button to that menu, however, the menu uses tags which don’t play nice with the google plus tags. Ideally I want to wrap the google plus tags in an a tag, which fits the width of the menu.

    Any help greatly appreciated, and yes I have +1ed your page!

  3. Glenn Gabe says:

    Thanks for your comment Dominic. I haven’t seen that approach used yet, and I’m not sure that’s possible. The code doesn’t seem to have a trigger for applying or removing the +1. If you figure out a way to do that, come back and post your results. I’d love to hear how it went.

    GG

  4. Simon says:

    What a strange concept – surely the possible reward of additional / exclusive content will encourage extra clicks of the +1 button to see if there is anything to be gained by it and not because the page is of worth. If Google are saying “Publishers should not promote prizes” then surely the possibility of additional content is a prize in itself. If the +1 affects rankings then surely you will soon have to have added content for a +1 click in order to help your ranking.

    It is for this reason that Facebook dont allow you to do it as it skews their data and doesnt give them data on what you ‘like’ but on what you are meerly tempted to click

  5. Roland Mösl says:

    Just working to use all my high resolution pictures on my sites. Until now, it was possible to view pictures on my web site also in full resolution.

    Now I work out a solution, 1+ is required to view a picture associated to a page in high resolution.

    Hope this improves my 1+ stats dramaticaly

  6. Shahriyar says:

    Hi buddy,

    Very nice post. I am just wondering about one thing if you could help with. The giving content with +1 button sounds great, BUT when the user refreshes the page again, how do I detect it’s state ? (So I can decide to show content or not)

    Also, is there way to get/ask the user’s info, his name, email etc. ?

    I have +1ed your post, goodt stuff buddy :)

    • Glenn Gabe says:

      You can set a cookie in your function. Then you can use that cookie to understand if the person +1′d your page. I hope that helps.

      GG

  7. Plus 1 Fan says:

    Hi Glenn,

    I enjoyed your post. Until Google’s larger “Plus” social effort takes root, there isn’t much incentive for regular users to +1 content, so I think providing additional incentive to users to +1 content makes good sense.

    My question relates this section of Google’s +1 policy that you cite:

    “Publishers can direct users to the +1 Button to enable content and functionality for users and their social connections.”

    Specifically, what does it mean to enable this content or functionality for a user’s “social connections”?

    Let’s say a user is clicking +1 on a blog post (for example, http://example.com/blog-post.html), and you want to unlock access to a different page on your site as a reward for clicking the +1 button (for example, “http://example.com/exclusive-content.html).

    If the +1 is credited to “exclusive-content.html”, it’s easy to see how the user’s “social connections” get access to that exclusive content too. However, I’m assuming that most webmasters would want the user’s +1 action to be credited to “blog-post.html” so that they can aggregate +1′s for their regular content (and not the exclusive content).

    1. Does the +1 need to be credited to “exclusive-content.html” or can it be credited to “blog-post.html”?

    2. If “blog-post.html” gets credit for the +1, do you need to and/or how do you give a user’s “social connections” access to “exclusive-content.html” as well? Can you require that a user’s social connections also click the +1 button on “blog-post.html” before getting access to “exclusive-content.html”?

    3. Or do you have to make “exclusive-content.html” available to the the original user’s social connections automatically without requiring they also click the +1 button? If so, how would a webmaster even technically do this if the +1 is being credited to “blog-post.html”? Is there a way to identify social connections of a user who has +1′ed a certain page on your site?

    Google’s policy language does not seem clear on this point. I’d like to know how you read it, and/or if you’ve seen this clarified somewhere.


    Fyi, I just posed the same question in the Google Webmaster Central forums: http://goo.gl/y7Wia in case you want to contribute or follow the discussion there as well.

    • Glenn Gabe says:

      My understanding is that you would attribute the +1 to the original page, which would then unlock exclusive content. I would have to double-check Google’s language, but I’m pretty sure that wouldn’t open up the exclusive content to your social connections. Let me know if you find anything out via your forum post.

      GG

  8. Liang says:

    Do you think it’s possible to create a poll with this G+1 function? For instance, one question with two +1 buttons, one says “yes”, the other is “no”. Whichever button you click, will reveal the following question, so on and so forth. That would be a great way to gain multiple +1s from a single visitor. Do you think this practice violates El Goog’s policy?

    • Glenn Gabe says:

      I’ve seen this used on Google+ for polls, but it’s not optimal for pages on your site. You need to let Google know which is the canonical page that should receive the +1, so including two buttons wouldn’t work well. I hope that helps.

      GG

  9. I wonder if it also has a dislike feature which is frequently abused for example on YouTube. I understand that any rating counts for more than no rating but rating with the intention to do harm rather than good to someone is pathetic.

    We will try to get as much as +1 we can because we know the benefit of it with seo prespective (and soon we will see many people started to sell +1 as well) but a normal user do not know about it and where facebook like button is one step ahead from it.

  10. daren says:

    Thanks , it’s very useful for me.

    function plus(data) {

    if (data.state == ‘on’) {
    alert(“plus”);
    } else if (data.state == ‘off’) {
    alert(“oh no!”);
    }

    }

    simple function check unckick event

  11. Dan J says:

    Hi

    I was wondering if it was possible to find out whether a person has +1′d a page and whether if they hadnt, show a bar on the side, top, etc giving a +1 and other social stuff.

    Also, anyone know when Google+ is going to be Offically Released and when Google Pages can be made?

    Thanks

  12. Stefan says:

    Yes i’ve +1 it ;)

    I’m pretty new to all this coding and so forth, but could you quickly describe what kind of coding it takes to make “special content”?

    Or even some sort of guide maybe? And for a wordpress user? :P

    • Glenn Gabe says:

      Exclusive content can be anything you want. You can simply detect that someone +1′d your page (via the process I mentioned above), and then handle that action accordingly. For example, providing information and a link to the content, redirecting them to the content, etc. I hope that helps.

      GG

      • Stefan says:

        So a code (if they should be directed to another page) would be something like:

        function redirect(plusone) {
        //and then define the function here, which i’m not quite sure how to do
        }

        But where should the code be implented? Right below the code of the button itself?

        • Glenn Gabe says:

          Stefan, you can add the JavaScript code in the head of your document (or reference a JavaScript file from your html). It’s just like adding any other JavaScript code to your web pages.

  13. Julian says:

    Hi, Thank you for this tip, is exactly what I was looking for (info about callback parameter in Google votes).

    My question is. Do you think we are allowed to display/unlock content after a vote?

    For example, in my case I want to unlock a to let the user download a free stuff (show a download button) only if they vote. Assuming that they liked what they saw in the page. The last think I want is to get penalized for this viral idea.

    Do you think this could be a reason to be penalized?

    Thanks,

    Julian

    • Glenn Gabe says:

      Thanks Julian. I’m glad you found my post helpful. I would read through Google’s policy page for the +1 button. If you are unlocking exclusive content, then you should be fine, as long that content isn’t a “prize, money, or monetary equivalent.” I hope that helps.

      GG

  14. I wonder if it also has a dislike feature which is frequently abused for example on YouTube. I understand that any rating counts for more than no rating but rating with the intention to do harm rather than good to someone is pathetic.

  15. Dave says:

    hey thanks for this! I agree about not abusing the +1 button as google is not somebody you want to punish you. I was thinking for using it on one of my new blogs to release extra content. But the content would be a list of links to resources such as other people’s blogs posts, youtube vids, etc that i have found helpful in researching for writing the blog post. do you think this would be ok as it is kind of a service i would be giving people for extra research?

  16. Glenn Gabe says:

    Good question. I’d have to see the actual implementation, but it sounds like that could work. If you want to post a follow-up comment with a link to the page, then I could check it out in greater detail.

    GG

  17. simon says:

    where is the code to implement g+ ?