Jonathan Beri, Developer Advocate, Google+ Presentation discusses: The Google+ Sign-In Button Personalizing Your App Involve Close Friends with Targeted Sharing Surfacing Relevant Actions Across Google

1. Developers
Tuesday, July 23, 13

2. Tuesday, July 23, 13

3. An Introduction to Integrating
Google+ Sign-In
Tuesday, July 23, 13

4. Tuesday, July 23, 13

5. Jonathan Beri
Developer Advocate, Google+
google.com/+JonathanBeri
Tuesday, July 23, 13

6. Agenda
4
Tuesday, July 23, 13

7. Agenda
+The Google+ Sign-In Button
4
Tuesday, July 23, 13

8. Agenda
+The Google+ Sign-In Button
+Personalizing Your App
4
Tuesday, July 23, 13

9. Agenda
+The Google+ Sign-In Button
+Personalizing Your App
+Involve Close Friends with Targeted Sharing
4
Tuesday, July 23, 13

10. Agenda
+The Google+ Sign-In Button
+Personalizing Your App
+Involve Close Friends with Targeted Sharing
+Surfacing Relevant Actions Across Google
4
Tuesday, July 23, 13

11. Tuesday, July 23, 13

12. Tuesday, July 23, 13

13. Thinking Social
It starts with people and connections
Tuesday, July 23, 13

14. New Users & Engagement
6
Tuesday, July 23, 13

15. New Users & Engagement
6
New Users
Tuesday, July 23, 13

16. New Users & Engagement
6
New Users Engagement
Tuesday, July 23, 13

17. Tuesday, July 23, 13

18. Google+ Sign-In
Capture new users with a button
Tuesday, July 23, 13

19. The Google+ Sign-In Button
8
Sign in with Google
Tuesday, July 23, 13

20. Tuesday, July 23, 13

21. Tuesday, July 23, 13

22. Tuesday, July 23, 13

23. Tuesday, July 23, 13

24. Tuesday, July 23, 13

25. Tuesday, July 23, 13

26. 10
Tuesday, July 23, 13

27. 10
Tuesday, July 23, 13

28. Tuesday, July 23, 13

29. The Google+ Sign-In Button
Adding the code
Tuesday, July 23, 13

30. Developers.google.com/+
12
Tuesday, July 23, 13

31. Code.google.com/apis/console
13
Tuesday, July 23, 13

32. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
14
The HTML
HTML
Tuesday, July 23, 13

33. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
15
The HTML
HTML
Tuesday, July 23, 13

34. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
16
The HTML
HTML
Tuesday, July 23, 13

35. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
17
The HTML
HTML
Tuesday, July 23, 13

36. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
18
The HTML
HTML
Tuesday, July 23, 13

37. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
19
The HTML
HTML
Tuesday, July 23, 13

38. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
20
The HTML
HTML
Tuesday, July 23, 13

39. Google+ Sign-In (button): Web
<script type="text/javascript" >
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
21
The JavaScript
JS
Tuesday, July 23, 13

40. Google+ Sign-In (button): Web
<script type="text/javascript" >
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
22
The JavaScript
JS
Tuesday, July 23, 13

41. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-apppackagename="com.google.android.apps.plus"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
23
App Installs: Over-The-Air
HTML
Tuesday, July 23, 13

42. Google+ Sign-In (button): Web
<span id="signinButton">
<span
class="g-signin"
data-apppackagename="com.google.android.apps.plus"
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-callback="signinCallback">
</span>
</span>
24
App Installs: Over-The-Air
HTML
Tuesday, July 23, 13

43. Google+ Sign-In (button): Android
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPlusClient = new PlusClient.Builder(this, this, this)
.setScopes(Scopes.PLUS_LOGIN)
.setVisibleActivities("http://schemas.google.com/AddActivity")
.build();
mPlusClient.connect();
}
25
Google Play Services & PlusClient
Java
Tuesday, July 23, 13

44. Google+ Sign-In (button): iOS
#import <GooglePlus/GooglePlus.h>
#import <GoogleOpenSource/GoogleOpenSource.h>
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
GPPSignIn *signIn = [GPPSignIn sharedInstance];
signIn.clientID = @"CLIENT_ID";
signIn.scopes = @[@"https://www.googleapis.com/auth/plus.login"];
signIn.actions = @[@"http://schemas.google.com/AddActivity"];
}
26
iOS Framework
Obj-C
Tuesday, July 23, 13

45. Tuesday, July 23, 13

46. Personalizing Your App
Integrating profile and connection data more deeply
Tuesday, July 23, 13

47. Quickly Create Profiles
28
Tuesday, July 23, 13

48. Tuesday, July 23, 13

49. Tuesday, July 23, 13

50. Personalizing Your App
Adding the code
Tuesday, July 23, 13

51. Personalizing Your App
gapi.client.load(‘plus’, ‘v1’, function() {
var request = gapi.client.plus.people.get({
'userId': "me"
});
request.execute(function(resp) {
console.log('Retrieved profile:' + resp.displayName);
});
});
31
Retrieve a profile
JS
Tuesday, July 23, 13

52. Personalizing Your App
gapi.client.load(‘plus’, ‘v1’, function() {
var request = gapi.client.plus.people.get({
'userId': "me"
});
request.execute(function(resp) {
console.log('Retrieved profile:' + resp.displayName);
});
});
32
Retrieve a profile
JS
Tuesday, July 23, 13

53. Personalizing Your App
gapi.client.load(‘plus’, ‘v1’, function() {
var request = gapi.client.plus.people.get({
'userId': "me"
});
request.execute(function(resp) {
console.log('Retrieved profile:' + resp.displayName);
});
});
33
Retrieve a profile
JS
Tuesday, July 23, 13

54. Personalizing Your App
var friends = gapi.client.plus.people.list({
'userId': "me",
'collection': "visible"
});
friends.execute(function(resp) {
console.log('Num people visible:' + resp.totalItems);
});
34
Retrieve a list of friends
JS
Tuesday, July 23, 13

55. Personalizing Your App
var friends = gapi.client.plus.people.list({
'userId': "me",
'collection': "visible"
});
friends.execute(function(resp) {
console.log('Num people visible:' + resp.totalItems);
});
35
Retrieve a list of friends
JS
Tuesday, July 23, 13

56. Tuesday, July 23, 13

57. Involve Close Friends with
Targeted Sharing
Get friends to join from the stream with Interactive Posts
Tuesday, July 23, 13

58. Tuesday, July 23, 13

59. Tuesday, July 23, 13

60. Tuesday, July 23, 13

61. Tuesday, July 23, 13

62. Tuesday, July 23, 13

63. Tuesday, July 23, 13

64. Tuesday, July 23, 13

65. Check out the delicious dishes
at La Mar Cebicheria Peruana
Tuesday, July 23, 13

66. 6:14
Jonathan Beri shared with you:
Check out the delicious dishes at...
Jonathan Beri shared with
you:
Check out the delicious dishes
at...
Tuesday, July 23, 13

67. Jonathan Beri
6:14
Mascone West
Check out the delicious dishes at Tía Pol!
Jonathan Beri
Tuesday, July 23, 13

68. 6:15
Tía Pol
Tuesday, July 23, 13

69. A Button for Every Social Action
Tuesday, July 23, 13

70. A Button for Every Social Action
Jonathan BeriBrett JohnsonJonathan BeriBrett Johnson
Tuesday, July 23, 13

71. A Button for Every Social Action
Joanna SmithJoanna Smith
Tuesday, July 23, 13

72. A Button for Every Social Action
Tuesday, July 23, 13

73. A Button for Every Social Action
Tuesday, July 23, 13

74. Tuesday, July 23, 13

75. Involve Close Friends with
Targeted Sharing
Adding the code
Tuesday, July 23, 13

76. Involve Close Friends
<button class=”g-interactivepost”
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Share!
</button>
46
Interactive Post (HTML)
JS
Tuesday, July 23, 13

77. Involve Close Friends
<button class=”g-interactivepost”
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-calltoactionlabel="CREATE"
data-calltoactionurl="http://plus.google.com/pages/create"
data-calltoactiondeeplinkid="/pages/create">
Share!
</button>
47
Setting up Labels & Call-To-Action
JS
Tuesday, July 23, 13

78. Involve Close Friends
<button class=”g-interactivepost”
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
...
data-prefilltext="Create a Google+ page for your business."
data-recipients="110967630299632321627,leeroy.jenkins@example.com"
Share!
</button>
48
Prefill Recipients & Share Text
JS
Tuesday, July 23, 13

79. Involve Close Friends
<button class=”g-interactivepost”
data-clientid="CLIENT_ID"
data-scope="https://www.googleapis.com/auth/plus.login"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
...
data-prefilltext="Create a Google+ page for your business."
data-recipients="110967630299632321627,leeroy.jenkins@example.com"
Share!
</button>
49
Also a Sign-In Button!
JS
Tuesday, July 23, 13

80. Involve Close Friends
- (IBAction)share:(id)sender {
id<GPPShareBuilder> shareDialog = [[GPPShare sharedInstance] shareDialog];
[shareDialog setCallToActionButtonWithLabel:@"CREATE"
URL:
[NSURL URLWithString:@"https://developers.google.com/+/mobile/ios/"]
deepLinkID:@"/+/mobile/ios/"];
[shareDialog open];
}
50
iOS
JS
Tuesday, July 23, 13

81. Tuesday, July 23, 13

82. Surface Activities on Google
when they matter
Writing App Activities
Tuesday, July 23, 13

83. 40 personal results. 24,700,000 other results.
Images Maps Shopping News More ▾ Search tools
Ardan Arac
+Ardan Search Images Mail Drive Calendar Sites Groups Contacts More ▾
▾3 Share
Web
fandango
FollowFandango
7,912 followers on Google+
Recent post
Joss Whedon Talks Thanos, 'Avengers 2 & 3' and
RDJ in 'Iron Man 3' on our movie blog. 3 hours ago
Oblivion
PG-13, 2 hr 5 min
2,044 watched the trailer
42
PG-13, 2 hr 8 min
1,903 watched the trailer
The Croods
PG, 1 hr 31 min
1,968 watched the trailer
Scary Movie V
PG-13, 1 hr 25 min
1,761 watched the trailer
Popular with Google+ users
Tuesday, July 23, 13

84. 40 personal results. 24,700,000 other results.
Images Maps Shopping News More ▾ Search tools
Ardan Arac
+Ardan Search Images Mail Drive Calendar Sites Groups Contacts More ▾
▾3 Share
Web
fandango
FollowFandango
7,912 followers on Google+
Recent post
Joss Whedon Talks Thanos, 'Avengers 2 & 3' and
RDJ in 'Iron Man 3' on our movie blog. 3 hours ago
Oblivion
PG-13, 2 hr 5 min
2,044 watched the trailer
42
PG-13, 2 hr 8 min
1,903 watched the trailer
The Croods
PG, 1 hr 31 min
1,968 watched the trailer
Scary Movie V
PG-13, 1 hr 25 min
1,761 watched the trailer
Popular with Google+ users
Tuesday, July 23, 13

85. Tuesday, July 23, 13

86. Tuesday, July 23, 13

87. Surface Activities on Google
when they matter
Adding the code
Tuesday, July 23, 13

88. Involve Close Friends
moment = {“type” : “http://schamas.google.com/BuyActivity”,
"target": {
"url": "https://developers.google.com/+/plugins/snippet/examples/
thing"
}
}
google_request = service.moments().insert(userId='me', collection='vault',
body=moment)
momentResult = google_request.execute()
55
Server-Side (Python)
Python
Tuesday, July 23, 13

89. Review
56
Tuesday, July 23, 13

90. Review
+The Google+ Sign-In Button
56
Tuesday, July 23, 13

91. Review
+The Google+ Sign-In Button
+Personalizing Your App
56
Tuesday, July 23, 13

92. Review
+The Google+ Sign-In Button
+Personalizing Your App
+Involve Close Friends with Targeted Sharing
56
Tuesday, July 23, 13

93. Review
+The Google+ Sign-In Button
+Personalizing Your App
+Involve Close Friends with Targeted Sharing
+Surfacing Relevant Actions Across Google
56
Tuesday, July 23, 13

94. Credits
• New User designed by Yuri Mamaev from The Noun Project
• Click designed by Rohan Gupta from The Noun Project
57
Tuesday, July 23, 13

95. Tuesday, July 23, 13

96. <Thank You!>
developers.google.com/+
plus.google.com/+GooglePlusDevelopers
stackoverflow.com/questions/tagged/google-plus
Jonathan Beri, google.com/+JonathanBeri
Tuesday, July 23, 13

97. Developers
Tuesday, July 23, 13