Google I/O 2011: An introduction to the +1 button

Uploaded by GoogleDevelopers on 11.05.2011


How's everybody doing?
So thanks for coming to this session.
It is an introduction to the +1 button.
If that's what you're here for, you're in the right room.
If it's not what you're here for, you're in the wrong room.
These are some bits of information that you might be
interested in.
There's a hashtag for this session,
#publisher and #io2011.
And there's also a link for feedback about this session.
I'd love to hear what you think.
And there's also a link for where this session is going to
live after today.
All right.
So this is what we're going to talk about.
We're going to talk about the +1 button.
And, specifically, up top is what's now, which is the +1
button on search.
Then we're going to talk about the +1 button on your site.
That's what's next.
We going to go through getting started, some advanced
options, and optimization.
And, of course, at the end, I will answer
some of your questions.
Please note that the +1 button on your site is not yet
launched and will not be launching today.
But I'm giving you a first peek about what that'll look
like, and how you'll be able to integrate it on your site.
Sound good?
All right.
Now, I'd also like to say that integrating the +1 button on
your site is super easy, so this is going
to go pretty quick.
This is me.
I'm a Developer Advocate at Google.
And you can find me online.
Also feel free to at mention me.
All right.
So let's start with what's now.
I'm going to give a little bit of background around the +1
button, and why we decided to create it.
There are a couple different sharing methods that we looked
at out there in the world.
One of them is email.
I think we're all familiar with email, right?
It's an interesting medium because it
is super high value.
When you write an email to somebody, they receive that
personal information from you and that personal endorsement,
but it's also really high effort.
It takes some time to write names in that to field and
craft a message just to those people.
So there's another way to share, activity streams. And
this is also really common.
It's super easy to share to an activity stream, very, very
low effort.
But, in general, for endorsements,
it's pretty low value.
It's great for breaking news or sharing funny videos.
Things that aren't time sensitive or time specific.
But when I am looking for a toaster oven, I may not have
seen this message because perhaps Cami Crepe
wrote it a month ago.
So when those things match up, it's like magic, but it hardly
ever happens.
So we've got this one method that's low effort and
relatively low value for endorsements.
And we've got this other method that's really, really
high value, but also high effort.
How do we put the two together so that we have something
that's low effort, but also really high value?
And that, of course, is the +1.
So let's take a look at this.
You can do this on your own.
You can play the home game by going to and opting it into the search
And you'll start to see +1 buttons on your search results
page right away.
And this is what it will look like.
I did a quick search for King day books.
And I got this great article by The Huffington Post on
books that I could read to commemorate Martin Luther
King, Jr. Day.
This is as you expect.
It's a search engine results page with links and snippets.
And there's now a +1 button just to the right.
Wonder if I have a laser pointer.
Ooh, I do.
They're fun.
So that +1 button is what you'd hit
to take the +1 action.
But there's this other new thing, and this is the value.
It's that annotation right below the result.
Say you're looking for the same search results--
you're doing the same search.
And you come upon this page, and you see this annotation.
Your good buddy Timothy recommending
that article for you.
Notice how it looks different than every other
result on that page.
I got some numbers too.
It turns out 90% of consumers trust recommendations from
their friends.
And 71% say friends and family influence their purchase
decisions online.
So we know that these annotations are really
powerful, and they make your results stand out.

So it's super high value, right?
It's also super low effort.
It is one single button.
And it's just one click, and you add your
recommendation to that link.
And it looks like that.
It just lights up, and you're done.
Pretty cool, huh?

It's also available on paid results.
So you'll see on the ad here, we also got a +1 button and an
annotation under that.
Now we think these annotations are going to be great, that
they may increase CTR, your clickthrough rate, on both
paid and organic listings.
And something publishers tell us time and time again is that
traffic from is typically more valuable.
It spends more time on their site, and it is
more likely to convert.
And we think that that's going to even increase with the +1
button as the user not only comes from this unique place
on the internet, but also with a recommendation.

So that's the +1 button.
Many of you may have seen that already.
Let's talk about what's next.
+1 button on your site.
So I followed that link, and this is the page that I got.
It's The Huffington Post page, but you'll notice there's
something new.
Down there by all the sharing links, you'll see a +1 button.
It's off in the lower right.

Clicking this button is easy.
It's just a button click.
The count increments, and you've added your
recommendation to this page.
Now why would a button need to be on the website as well?
Well it turns out we've gotten a lot of feedback from people
after we introduced this search experiment that they
might not know that they want to add their endorsement to
something when they're in the search engine results page.
But when they go to your site, and they see what it's all
about, then they're maybe more likely to
click that +1 button.
And the great thing about this is that on this search engine
results page you may have clicked on an organic result,
I may have clicked on a paid result, and Rebecca may have
clicked on your site, and it all goes to the same

So let's do some stuff, shall we?
It's a developer conference.
How about we look at some code?
I'm afraid there's not a lot to look at
because it's super simple.
We've got two tags.
We've got a script tag right up there at the top, just
includes the script that's going to replace the
tags on your page.
And we've got the +1 tag.
And it looks like this.
Using all the default options, we don't need to add any
And that tag will just get replaced by the
script with a button.
There's also going to be an HTML5 equivalent to this tag
so that you'll be able to validate your pages easier.
This is what a basic page looks like.
Yeah, same script, but we've added the surrounding tags
that are on the page.
Of particular interest up at the top is the rel canonical.
Put this here for a couple of reasons.
First off, you're probably already using rel canonical.
Actually, I'm a little curious, who is using rel
canonical in the audience?
All right.
Who's not using rel canonical?
That should be everybody else raising their hands.
Or maybe you're too embarrassed to.
You really should be using real canonical because it
tells Google what the true URL of your page is, which often
differs from the address in the address bar.
The address in the address bar often has
state variables, right?
You get that question mark, state equals something or
other, that don't actually represent the true URL, but
are difficult to strip out.
So you can tell Google what is the true URL of this page by
specifying rel canonical.
And you get to tell the +1 button what URL it should +1.

And then, of course, here's that script again.
So let's take a look at this.
I have a cool thing to show you.
I'm super excited about.
This is a prototype of our +1 Button Configuration Tool.
And when we launch, you'll be able to go to this tool and
configure a +1 button for yourself.
This is how it works.
See the +1 button?
Now it comes in a number of different sizes, and you'll
see down here is the script.
In my example, I included the script and the tag together,
but you probably want to put the script somewhere else like
in your head or right before the body closes.
And it has the +1 tag.
And you'll notice, even as I add these options-- and I'll
go through these in some more detail --even as I add these
options, the snippet stays really, really simple.
It can even do things like pull away the count.
And add the count back in.
It's fun.

So that's that.
Let's get back, and let's dive a little bit deeper into some
of those advanced options, shall we?

First off, +1s are for URLs.
And it's got to be a public URL.
Otherwise, it's not going to work.
+1s are a public action, so they need to
operate on public URLs.
And the URL is determined by one of three things and in
this order.
First, we're going to look at the href
attribute of the +1 tag.
If it's there, we're going to +1 that URL.
And you would use this attribute if say, let's say
you're on a blog home page, and you've got several
different articles.
And you want to put a +1 button by each
one of those articles.
And that +1 button should +1 the URL of that article.
You would specify that URL in the href tag.
The next thing that we look for is rel canonical.

I've already talked about that.
And then the third thing we look for is the URL of the
page as you would see in the address bar,
And, of course, we much prefer rel canonical over this
because, again, it might not represent the
true URL of the page.
And it would be sad to have some of your users +1 their
particular URL, and other users +1 their particular URL,
and they look like different +1s.
So rel canonical is good.
All right.
I got a table because tables are important.
This is a table of +1 buttons.
As you can see, we have a number of
different form factors.
We've got small.
We've got medium.
We've got standard.
And they all come with or without a count.
And we've got the tall button.
And standard, of course, is a really common size that fits
among other buttons of similar sharing type.

All right.
Size and count are as what you'd expect.
They get to specify what the size is, and whether or not it
has a count.
And then we have two other attributes here. href I've
already talked about.
Callback I haven't.
We're going to provide a callback so that when the user
hits the +1 button, a function in the global JavaScript
namespace on your page can be called.
And this could be really great.
Because perhaps you have identity on your page, a user
is already logged in.
You can perhaps track their +1s on your site to their
identity and maybe use that to improve their experience.

All right.
Here are some parameters for the script tag.
And we've got two.
First off is language.
You'll be able to specify other
languages for the button.
The second one is parse tags.
Now this gets a little bit more interesting.
By default, it's onload.
So all the tags will be parsed at onload of the page.
But you can also specify explicit, which means you get
to specify when those tags get parsed.
And you can do that one of two ways.
The most common way you would do this is with .go.
And .go takes a single parameter.
That parameter is some ID of a container.
Now what you might use this for is let's say you have a
really large page, but your +1 buttons are only maybe in the
article div.
Then you can specify the article div, and the script
will only scan through that content.
The script will have to scan less content.
And it will run faster.
You might also do this if you don't want the buttons loaded
onload, you want them maybe a few seconds after.
Maybe your page has some fancy performance stuff that that
makes more sense.
The second way you would use this explicit parse tag is
through render.
And you would do this typically if you
had an Ajax-y page.
Let's say the user switched the content on the page, but
didn't reload a page in their browser.
And you needed to put a new +1 button there.
You could use the render method that would then render
the +1 button in the specified container with those specified
You don't need a +1 tag.
So let's take a look at a couple examples.
This is the explicit load.
And you'll see on here I've highlighted both the script up
at the top, which includes the +1 script.
And down there we have the basic +1 tag that specifies
where the button should go.
And then below there, I just added a script, and I hit .go.
And this would work.
Obviously, this is not a perfect example.
It's a basic example.
You would probably want this .go in an onload handler, and
you want to specify a subdiv.

And here's another example.

This is using render.
Notice that the +1 tag is not on the page.
Instead, I have a div, called the plusone-div there, down
third line from the bottom.

And I have an onload specified in the body tag.
That function calls the .render on that div.
Default options, totally works great.
Does this all make sense?
You guys are so easy.
I don't know if that's because it makes sense, or if you're
all using your new tablets.
I hope it's because it all makes sense.
All right.
Let's talk a little bit about optimization.
And this is all about improving your traffic and
your engagement on the site.
And to do that, you need to be able to measure it and
And you got to try different things to make it better.
So we'd like to provide data to you to be able to do that.
Now I'm going to show you some early product mocks.
It'll probably look different.
But this will give you an indication of where we're
going with something inside of Webmaster Tools that will give
you data on the +1 button.
First off, we have activity.
We'd like to be able to provide to you a page that
shows how often your content had been
+1'd and on what pages.
Pretty straightforward and cool-looking.
Search impact.

This is going to tell you the difference in clickthrough
rate for annotated results and non-annotated results.
So you'll really be able to see the power and value of the
+1 button on your site.

We'd also like to provide anonymized user data, such as
unique users and geo, where in the world these
+1s are coming from.

All right.
I have a summary slide.
Told you it was quick.
Social connections may very well increase CTR on both paid
and organic search listings.
When users see that annotation, we think they may
be more likely to click that result than any other.
And research shows that that's probably true.
Search traffic is pre-qualified through personal
So remember, publishers tell us traffic from
often converts more than traffic from other sources.
Add in a recommendation from my father to that, and I'm
much more likely to convert.

The +1 button on your site--
oops --the +1 button on your site gives your users more
opportunity to click.
And that +1 from an organic result, from a paid result or
from your site all goes to the same annotation on search.
And, finally, integration is straightforward and flexible.
So what do you do next?
First thing you can do is go to this form,, and put down your name.
And we'll send you an email as soon as this is available.
And you can also go ahead and take a look at the
+1 button on search.
You can click a whole bunch of stuff and see how fun it is--
All right.
So it was quick, a little quicker than I expected, but I
hope it was fun.
The hashtags, feedback, and session are there.
We have microphones there and there.
And I would love to hear your questions and perhaps feedback
on this product.
AUDIENCE: Can you move that slide back?
TIMOTHY JORDAN: What's that?
AUDIENCE: That slide.
Could you move it back to the one you had previously?

And go.
There we are.
AUDIENCE: Thank you.

TIMOTHY JORDAN: Oh, could you use the microphone?
I am told today my biggest audience is the internet.
And that means that you need to use the
microphone to ask a question.
AUDIENCE: I see that it's all done in JavaScript.
It seems like that would be pretty easy to hack where
somebody could write a little script where every visit +1
the page, or they could write a script that gives them a
million +1s or something like that.
What is Google doing to prevent that?
TIMOTHY JORDAN: I mean, yeah, it's a concern.
Abuse with any new feature is a concern.
And it's something that we're taking seriously.
And we are engineering solutions for.
What those specific solutions are, I'm going to keep to
those engineers.
AUDIENCE: And then the second one was, it said names of
people that had +1'd that.
Those are just people that are in your gmail group or
something like that?
TIMOTHY JORDAN: That's a great question.
So the people that appear on annotations for you are folks
that are in your contacts, your Google contacts, which
could be your gmail contacts, any connected sites you've
connected to your profile, and any publicly-available social
graph data that we can correlate with your identity.
AUDIENCE: And the last question is, would there be an
opportunity to put a +1 external to your site, say in
your emails or on another related page or
something where it--
I could see someone can +1 right out of the Google search
results or off your page, but would there be a way to +1 say
off of emails you send or related pages?
TIMOTHY JORDAN: That's an interesting question.
I'm not sure what we're doing about cross-domain +1s, which
I think sort of addresses that question.
I don't have an answer for you on that, but I'm sure we'll
have an answer soon.
The interesting thing about email though is because email
typically, even HTML emails, don't allow JavaScript.
So even if you could put the +1 in an HTML email, most user
agents aren't going to be able to render that button.
But I think it is an interesting use case to have
that +1 button on a variety of different sources.
AUDIENCE: All right.
Thank you.

AUDIENCE: That's great.
One quick question.
Does the API allow the site to read the count information?
Or is that something you frame?

TIMOTHY JORDAN: That is a very good question.
At launch, we are going to have a button that will have
the count in there.
We may add that feature in the future.
AUDIENCE: But is the information framed or can my
site also read-- if I have access to the DOM, can I read
the account?
Or are you guys creating your own iframe and generating the
count and the button in a frame?
TIMOTHY JORDAN: I suspect since the count is in the
button, and it's in an iframe that you could
do something fancy.
But I think it would be more interesting if that was
something that you really wanted to let us know on the
Webmaster Forum, and perhaps we could engineer a more
convenient way for you to do that.
More social plug-ins and things like this coming out
afterwards for people that want to have--
be able to surface content that I've been the most +1'd
and things like this?
TIMOTHY JORDAN: I would definitely be interested in
hearing more about specifically those kind of
widgets that you would want.
And perhaps.
Yeah, that could be cool.
TIMOTHY JORDAN: And let's go over here.
I won't forget about that side of the room.
Actually, my question is more related to search.
It looks like you guys have it set up as kind of a social
construct right now.
Do you have any plans to integrate it with the
algorithm as far as the actual ranking of
the sites is concerned?
So +1s may be a signal that we use in ranking.
AUDIENCE: That's cool.
TIMOTHY JORDAN: And it would be among over 250 other
signals that we use in ranking.
AUDIENCE: I think that covers it.
TIMOTHY JORDAN: I'm going to go back to this just in case
you need to live tweet any of this.
Let's take another one over there, and
we'll come back here.
How does the +1 sign operate when the user
hasn't logged in?
What does it do when there's no Google account?
So a user does need a Google account and a
public profile for +1s.
It's a public action, so they need to be able to have their
name publicly available.
And if the user is not signed in, it'll ask them to sign in.
It's a very simple sign-in flow, and a simple onboarding
flow as well.
AUDIENCE: So using your +1, you care about different
people's influences you said.
You care a lot more for your dad if he has his +1--
he gave you a +1 versus one of your contacts that's way--
you don't really talk to a lot.
Is there any way to prioritize which people are given +1s?
Like if you have five people you really care about that if
they've given a +1, it's more influential?
Can you pick and have them added?
Like, I want these five people always if they've given a +1
to show up.
TIMOTHY JORDAN: That's a great point.
And I think it's something that we've thought about.
And obviously, we'd want to show annotations that matter
the most to the user, right?
And there's sort of two things in there.
One is that we're not going to show annotations for every
result on the page, right?
So we're only going to show them for the results that
should matter to the user.
And, hopefully, the personal invitations, we get that so
that that's the contact that matters the most to the user.
And we'll use the data that we have available
to try and do that.

So you want to go to the microphone?
I would love to hear your question.
AUDIENCE: When do we get it?
TIMOTHY JORDAN: What's that?
TIMOTHY JORDAN: When do you get it?
I was waiting for that question.
In a matter of weeks.
And you shared on The Huffington Post site, did you
just mock that up, or they actually tested it?
TIMOTHY JORDAN: I mocked that up.
I took that into Photoshop, and I did fun things with it.
Do you like it?
AUDIENCE: I like it better on my site.
TIMOTHY JORDAN: Feel free to tell them.
Oh, I see.

AUDIENCE: You mentioned callback functionality and
that sort of thing.
With social connections, are we, as developers, going to
have any sort of access to that on our site to show if
you're on a page, hey, your dad liked this story.
Or even broader to have an actual page to say here's what
your friends liked on my site, that sort of thing.
TIMOTHY JORDAN: So at launch what you'll see is the
aggregate annotation, which is the count.
And we think that's powerful for users.
If there are other things that you'd like to see, like, if
you'd like to see personal annotations on your site, then
we'd definitely like to hear that.
So Webmaster Tools Forum would be a great
place to mention that.
But, of course, I'll remember as well.
Thank you.
AUDIENCE: So hey, this looks a little similar to the Like
button on Facebook.
So I'm just curious, what are the pros and cons?
How does it compare in your view?
That's a good question.
How is the +1 different than the Like button
that Facebook has?
And I can't speak for Facebook.
But I can speak for my personal view of this.
And I think when I use the Like button on the web, I like
things that I want to be part of my identity.
Because, typically, that shows up on my Facebook profile.
And I love that.
When I +1 something, I get to +1 anything that I like that
I'm publicly OK with saying, this is cool.
But it doesn't have to be part of who I am.
So that's how I would categorize the difference in
my use case.
AUDIENCE: So what are you doing to differentiate this
from say the Buzz launch?
Because I can see a public reaction to
the names that appear.
It seems a little similar.
And I'm just wondering what your sort of PR stance is
going to be, et cetera.
TIMOTHY JORDAN: I can't speak to the Buzz launch.
But what I can say about the names that I think might
interest you is that when we onboard the user, we're going
to indicate to them clearly that their +1s
are a public action.
So when you +1 something, the whole world gets
to know about it.
Don't +1 something that you don't want the world to know.
And as long as you empowered by that, there's less of a
concern hopefully.
Also, the understanding that when they see annotations in
search, they're seeing annotations from people on
their contacts.
So it'll be another indication to the user that this is a
public action.
AUDIENCE: And you said this is different than logging in.
So you have to have a public page then?
TIMOTHY JORDAN: So you need to have a public profile, a
public Google profile.
And if you don't want to have a public Google profile, then
you don't have to use the button.
But if you want to use the button, then you agree to have
a public profile and have your name publicly
associated with those +1s.
AUDIENCE: And have you gotten any sense of what the opt-in
rate will be for users?
TIMOTHY JORDAN: Hopefully, fantastic.

AUDIENCE: Well, how do you un-+1?
Let's say, you +1 on something and you thought, oh, no, I
don't really want to do that?
TIMOTHY JORDAN: I was waiting for that question too.
There's all these ones that I'm waiting for.
So when you +1, you hit the button.
When you un-+1, you hit the button.
Isn't that great.

So then you have to hit the +1 twice?
So when you hit the button, it +1's.
If you hit it again, it'll undo that +1.
So when you hit the button, it'll turn blue.
And when you hit it again to un-+1, it'll go back to its
rest state where you see it.
Thank you, Dan.
AUDIENCE: Why do you have to have a public profile and will
your +1s show up on your public profile?
TIMOTHY JORDAN: So since it's a public action, and you're
associating your public name with the +1 button, you need
to have that name be public.
You don't have to have this public profile.
You don't have to have the profile.
But if you want to +1s, your name needs to be public.
It's the whole value.
As far as on your profile, you can opt in to have a tab on
your profile of all your +1s.
And you can actually take a look at how this is today.
If you go to, and
you sign into the search experiment.
And you can go to your profile, and you can
opt into that tap.
And was the thought of your having to have a public
profile just one more signal that when you +1, you're doing
something publicly?
Or is there more to it than that?
TIMOTHY JORDAN: Well, part of having a public profile is
having a public name.
And part of doing a public +1 is having a public name.
So they all require each other.
AUDIENCE: Are there any plans to add a -1 button?

TIMOTHY JORDAN: None that I know of.
Thank you.

AUDIENCE: Since it'll take time for the +1 button to roll
out across several web pages, are there any plans to
directly integrate the +1 button with the Chrome browser
instead of the web page itself?
TIMOTHY JORDAN: That's a really cool idea.
I will take that back.
So give me your idea, just a little bit more detail, you'd
like the +1 button where?
AUDIENCE: Right, like as an extension
on the Chrome browser.
So that if you go to a site that isn't regularly updated
or doesn't have a lot of social networking widgets
already built in, you could +1 it without the web author
having previously coded it.
TIMOTHY JORDAN: So I don't have anything
to say about that.
But I think it's a cool idea.
Those are all the questions?
I feel so successful.
All right.
Well, thank you all so much for coming in.
If you'd like to ask a question of me privately after
the session, I'll be hanging out for a few minutes,
probably at least 30 of them.
Thank you so much.