Your SlideShare is downloading. ×
CIS13: An Introduction to Integrating Google+ Sign-In
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CIS13: An Introduction to Integrating Google+ Sign-In

1,351
views

Published on

Jonathan Beri, Developer Advocate, Google+ …

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

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,351
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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