[MUSIC PLAYING]
JOANNA SMITH: Hey everybody and welcome to today's episode
of Google+ Developers Live, targeted sharing with
interactive purpose.
I'm Joanna Smith and I'm a developer programs engineer
for Google+.
SILVANO LUCIANI: And I'm Silvano Luciani and I'm also a
developer programs engineer for Google+.
And today, what we want to show to you is how to use
interactive posts to help your users to bring the people that
care to your app.
JOANNA SMITH: So interactive posts help your users prompt
their friends to take specific actions in your app from a
Google+ post.
In addition to the standard content links, interactive
posts introduce a prominent call to action button that's
designed to drive actions in your app from users in the
Google+ stream.
And so we're going to bring those users into your
app from our own.
And this is a really powerful tool for you because clicking
these buttons brings recipients directly, not just
to your app, but within your app to a specific place in the
app to perform a specific action.
Maybe they want to listen to a particular song that was
shared instead of just listening to music in general.
And so Silvano, do you want to go ahead and show us how easy
it is to do this?
SILVANO LUCIANI: Of course.
It's very easy like all the code that you need is in our
developers doc, at developers.googl
e.com/plus/web/s hare/interactive.
It's easy to find.
JOANNA SMITH: So simple.
SILVANO LUCIANI: You can find the snippets that will allow
you to load our JavaScript into your page and then ran
the interactive post button into your page.
But the first step is to create a project in the Google
API console.
JOANNA SMITH: As always, this is your step one.
Go to the API console.
And of course, we have explicit instructions for how
to get started with this.
SILVANO LUCIANI: So we can show this to you.
The API console is at developers.google.com/console.
You can create a new project using the select drop down on
the top left corner.
We will call this project Demo GDL and this name is just for
you have to remember what this project is about.
Let's wait a second.
So now we are in the familiar service list and we can choose
which APIs we want to use in this project.
So in our case for the interactive post, what we need
is the Google+ API.
And let's click on to activate it.
Remember that the first time that you use a specific API
when you do this, you will see the terms of service of the
API and you will have to accept the terms of service
before actually start using it.
JOANNA SMITH: And we recommend that you actually take a few
moments to read that instead of just clicking through like
you are probably inclined to do because we do hold you
accountable to our terms of service.
We try to do what's right for our users in those and our
spam and abuse team probably will find you.
SILVANO LUCIANI: Yeah.
So now we can go to API access and create an
OAuth 2.0 client ID.
And it's easy as clicking on this big blue button.
At this point, product name--
I will use, again, GDL demo but here use something that is
meaningful for you and for the user because this is the
branding information.
So it's what will be shown to the user in the content dialog
when they go through the OAuth process.
So the same is with the logo.
If you have a logo, use a compelling
logo for your product.
And also, the home page URL where the user can check more
details about your app.
In the next window, what we do is choose an application type
for our client ID.
In our case, it's a web app.
And what we have to do now is add options for our site or
host name for the JavaScript origins and the redirect URI.
Be careful with the scheme.
As always, if you're using the HTTP select HTTP, and if
you're using both HTTP and HTTPS, use two entries for
both schemes.
[INAUDIBLE]
is published on localhost so what we need to do add
localhost here and we can now create the client ID.
JOANNA SMITH: And so now that we have our API console ready
to go and all set up, it's really very simple to get
started with interactive post because, once again, we
provided code snippets in our documentation that you can
just copy directly.
SILVANO LUCIANI: Yeah.
Going back to the page in the developer docs, there is
adding the share button to the page.
So if you click the link, you go to the snippet that is
including our JavaScript in your source code.
So let's copy and paste these first.
And then the second step is actually called copying and
pasting the code that will render the
button in your page.
JOANNA SMITH: So while he's copying and pasting this, I
think we should take a moment to go over some of these
attributes, right?
SILVANO LUCIANI: Yes.
So the first one that you can see is the class and it's
g-interactivepost.
This is telling our JavaScript that after if has loaded, all
the element on the page with this class needs to be
rendered as interactive post.
The styling, you can choose the styling for the button.
We will just attach the behavior to an element with
this class.
Content URL is the URL that points to the object that
you're sharing.
And that URL needs to contain the scheme of the [INAUDIBLE]
markup that is describing the object.
So a title, a description, an image.
And this will populate the snippet like a standard share.
Content deep link ID is the same but for mobile apps.
JOANNA SMITH: So let's take a moment to talk about what deep
links are before we go on about the actual ID for them.
Because if you haven't used deep linking before, you might
be a little confused here.
But what deep linking does is it allows the Google+ app on a
mobile device to direct clicks on an interactive post into
the mobile app for your users.
So if the user has your app installed and they click on a
deep link, they'll be taken straight to your app, but also
within your app.
And if they don't already have you app installed, they get
prompted to go ahead and install it which is pretty
powerful as far as a user experience is concerned.
But if you plan to use deep linking in your mobile apps,
you need to create a client ID for each of your platforms
that all live in the same API console project.
And that's a really key thing to remember.
They need to be in one API console project, but you would
have one for each platform like Android or iOS.
And then the Google+ app is going to magically route all
of these clicks to the appropriate place.
So if you have your deep link set up for both Android and
iOS, we're going to figure out where to send the user.
We're going to take it from there and handle all that
logic for you which is also pretty powerful.
SILVANO LUCIANI: Very good.
So and back to our parameters, we have the client ID which
we'll replace soon with the client ID from the project
that we just generated.
And this is because we need to know that your app is
accessing the JavaScript.
The cookie policy, you might know this
from the sign in button.
This is a complex parameter.
Check the docs on the website and we will have
a GDL on this soon.
But for now, just use single_host_origin or check
the recommendation that is explaining to you which one is
the value that you should use.
Prefill text.
This will allow your app to prepopulate the text in the
snippet so that you can send the user a message that is
meaningful and compelling, and that is actually letting them
interact with your app.
The call to action label, that's what will appear as
text in the button, the call to action button, which is
what you're trying to engage external the user for.
JOANNA SMITH: And where you see the word create here, we
actually have over 100 verbs pre-defined and ready to go.
And so you can find that list on documentation.
But the reason we have all of these verbs already chosen is
because we've also localized them.
So that, depending on your user's location, we'll make
sure it's in the right language for your user our of
any of our 60 supported languages.
So that's a pretty cool thing too.
SILVANO LUCIANI: The call to action URL.
This is where the user will land if they click the action
on the interactive post.
And the call to action deep link ID is the same from the
mobile app.
So as we were telling, is this way of actually having them go
to a specific part of the app where they can do an action
for which their friends call them into your app.
So now all we need to do is get from the Google API
console the client ID that we have just generated, copy it,
paste it back to our source code.
And now we can see a demo of the interactive post.
JOANNA SMITH: Before we demo, can I [INAUDIBLE] the prefill
text and the verb?
SILVANO LUCIANI: Of course.
JOANNA SMITH: OK.
So I want it to say Joanna is the best.
SILVANO LUCIANI: Joanna is the best.
JOANNA SMITH: Because I am, let's not argue.
And in the verb it should be to confirm because everybody
should that I'm the best and agree with that statement.
SILVANO LUCIANI: I do agree.
JOANNA SMITH: All right.
We're good then.
No arguments here which means nobody's arguing.
SILVANO LUCIANI: So now if we load the demo, this big gray
button that you can see, as we said, this is in your control.
You can style it as you want.
We have some branding guidelines that will tell you
what you can do and what you can't do, but aside from that,
it's all yours.
When you click it, it's going full screen for the content.
And now we can see the interactive post on the page.
And as you can see, the text has been pre-filled with what
Joanna wanted.
JOANNA SMITH: Because Silvano, this app wants to tell the
world how cool I am.
SILVANO LUCIANI: And the call to action is now a confirm.
And now I can tell Joanna's [INAUDIBLE] demo, for
instance, or anyone else to actually go--
myself, I will do it with myself--
JOANNA SMITH: You should all [INAUDIBLE].
SILVANO LUCIANI: Confirm that Joanna is the best.
And in that way, they will start using our app and check
[INAUDIBLE] the app is.
JOANNA SMITH: All right.
So the other cool thing is you saw how Silvano is choosing
his recipients, but you as a developer can choose some of
those recipients for your users directly.
And what you can do is you can actually prefill up to 10
direct recipients.
And what that means is that those 10 people are going to
get a notification and that's a really powerful tool to help
drive engagement for you.
And the other thing that's really cool about this is you
can add recipients by either Google+
ID or by email address.
So just as in a normal share when you can send somebody a
post through email if they're not on Google+, you can still
do that same thing as a developer to prefill that
email address.
So let's go ahead and look at how incredibly simple it is to
get this going.
SILVANO LUCIANI: Yeah.
I have a simple PHP that is using a new function that we
added to the Google+ API which is people.list that will allow
you to get a list of the users in the circle of the user
visible to your app.
And this is the code that is showing how actually easy it
is to call this function from the Google
API PHP client library.
We need to go list people.
Me, as you know, is the key word to say that we want this
code for the user that is logged in now.
Visible is to indicate that we want the collection of user
that is visible to yourself.
And I'm also using an optional parameter which is order by
and setting it to best.
This means that the order of the friends will be by
interaction.
So in the first places I will get the people with whom the
user interact the most.
JOANNA SMITH: Now the other thing to remember here is that
we're not exposing the user's circles.
We're just providing a flat list of people that the user
has added to a circle that they've shared with you
through consent dialog.
And so when we order by best, it's not the best of this
circle or that, it's best overall from any interaction.
But also, that entire list is going to be a flat list for
our developers so that we can enable our developers and
protect our users at the same time.
SILVANO LUCIANI: Yeah.
We don't expose any circles information to the developers.
Then you can add a maximum of 10 recipients and when you
have a list of multiple recipients, it becomes a comma
separated list of either Google+ IDs or email address.
So in this case, what I'm doing in the PHP sample is
just taking the first 10 and then building an array and
then it's imploding that array to a comma separated list and
we can use it.
We need to add the parameter, the other recipients to our
markup and just putting the string as
value of the parameter.
So back to the new sample which is their PHP.
As you can see now, the recipients are pre-populated
with a list that comes from my demo page.
And those are lists that are in order the friends I
interact the most with.
JOANNA SMITH: So you might be used to seeing this list come
back alphabetically but because we used the order by
best parameter, it's ordered by
interactions, like we explained.
And so depending on what your app is, either one of those
might be the right choice for you.
The other thing I want to do now that we're showed
you the demo is--
before we go, I want to take a look back at the attributes
that we were showing off earlier.
And I want to talk about why some of
them look really familiar.
Things like cookie policy we've seen in our sign in
button too.
And can we take a look at the similarities?
SILVANO LUCIANI: Yeah.
So there is a number of attributes that the
interactive post inherits from the sign in.
And this is because, as you've seen it briefly in the first
example, I had to go through the authorized dialog.
This is because your user needs to be signed in to
Google before they can use an interactive post.
So if you have an app where you have both sign in and
interactive posts, what you want is to have the same
attributes for the sign in because you want to replicate
the same behavior.
You want to have access to the same scope.
You on the same type of access online or offline whether it's
your choice.
You want to call the same call back to perform the same
action on the app.
So for example, in PhotoHunt, which is our end to end sample
application, in the main page, in the landing page, we have a
sign in button, but we also have an interactive post
button, invite your friends that can be
used to invite friends.
So at that point, if you click invite your friends before
signing in, we want to go through the same call back
that will then hide the sign in button, show your profile
image, show your profile picture, and all the other
personalization that we apply to the page.
Show photos from your friends, show the list of your
friends, and so on.
So this is very important that you do the same things and the
same flow whether you are signing in using the signing
button or the interactive post button.
One difference is you can do over the air install when
you're using interactive posts.
So that's now a packaged name that will allow you to specify
this is my app and this is what I want to install on your
Android device when you sign into my application.
So if you really want that, what you have to do is don't
show interactive posts before the users have signed in.
JOANNA SMITH: Right.
SILVANO LUCIANI: Sign in and then show and apply all the
interactive posts in your page.
JOANNA SMITH: And what we showed you when we were
explaining some of this is a page from our documentation
that really goes over these parameters.
But if you want to learn more or maybe refresh some of this
because we did talk about a lot of things in a really
quick time-frame, you can go to our documentation at
developers.Google.com/plus and you can read to
your heart's content.
And it will definitely help maybe clarify
some of these things.
And of course, if you have any questions or if you kind of
just want to talk about some of this stuff, check out our
Google+ Developers community.
We hang out in there every day and we also have a lot of
really amazing external developers in that community
who they foster great conversations.
They're bouncing ideas off of each other and they're
discussing things that they find with our API.
And it's a pretty powerful place to maybe get some
questions answered or just make some good connections.
So check it out.
SILVANO LUCIANI: Or if you'd like to see more codes and
more samples, we are on GetApp, GetApp.com/Google+.
You will find all our quick steps which are the samples
that get you up in five minutes on different languages
like Java, Python, PHP, Ruby, Go, JavaScript, and maybe I
think I'm forgetting one.
And also we have--
JOANNA SMITH: C#?
SILVANO LUCIANI: C#.
JOANNA SMITH: C#.
SILVANO LUCIANI: That's it.
And also we have PhotoHunt which we mentioned is our end
to end sample application that is showing you all the
functionalities that we recently introduced with
Google+ Sign-In.
We have a backend written in Java that comes bundled with
the JavaScript frontend and we also have two mobile
frontends, one Android and one iOS.
And also we are every day on Stack Overflow so if you have
any questions just ask your question with the tag
Google-plus and we will reply as soon as we can which is
usually one afternoon.
JOANNA SMITH: Yeah.
SILVANO LUCIANI: Maybe?
One hour?
JOANNA SMITH: It's usually the same day.
SILVANO LUCIANI: Two hours?
JOANNA SMITH: And then, of course, if you have an issue,
if you find something that's wrong with our API, let us
know in our issue tracker.
Or if you have a really great idea for a feature request and
if there's already one in there that you like, you can
start and you'll get updates and it will let me know that
it's important to more developers.
For example, the order by best parameter I discovered through
an issue reported in the issue tracker.
It was broken and we fixed that just recently.
And so, it can be a really powerful tool for you to
communicate something to us that's not quite right or
something that you would really like to see.
So definitely check that out and you can always let us know
how you're feeling about it by talking
about it in the community.
But it can be really powerful tool.
And that's all that we have for you today.
So if you have any questions, feel free to
ask them in the community.
SILVANO LUCIANI: Bye.
[MUSIC PLAYING]