CIS13: An Introduction to Integrating Google+ Sign-In

2,079 views

Published on

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
2,079
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CIS13: An Introduction to Integrating Google+ Sign-In

  1. 1. Developers Tuesday, July 23, 13
  2. 2. Tuesday, July 23, 13
  3. 3. An Introduction to Integrating Google+ Sign-In Tuesday, July 23, 13
  4. 4. Tuesday, July 23, 13
  5. 5. Jonathan Beri Developer Advocate, Google+ google.com/+JonathanBeri Tuesday, July 23, 13
  6. 6. Agenda 4 Tuesday, July 23, 13
  7. 7. Agenda +The Google+ Sign-In Button 4 Tuesday, July 23, 13
  8. 8. Agenda +The Google+ Sign-In Button +Personalizing Your App 4 Tuesday, July 23, 13
  9. 9. Agenda +The Google+ Sign-In Button +Personalizing Your App +Involve Close Friends with Targeted Sharing 4 Tuesday, July 23, 13
  10. 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. 11. Tuesday, July 23, 13
  12. 12. Tuesday, July 23, 13
  13. 13. Thinking Social It starts with people and connections Tuesday, July 23, 13
  14. 14. New Users & Engagement 6 Tuesday, July 23, 13
  15. 15. New Users & Engagement 6 New Users Tuesday, July 23, 13
  16. 16. New Users & Engagement 6 New Users Engagement Tuesday, July 23, 13
  17. 17. Tuesday, July 23, 13
  18. 18. Google+ Sign-In Capture new users with a button Tuesday, July 23, 13
  19. 19. The Google+ Sign-In Button 8 Sign in with Google Tuesday, July 23, 13
  20. 20. Tuesday, July 23, 13
  21. 21. Tuesday, July 23, 13
  22. 22. Tuesday, July 23, 13
  23. 23. Tuesday, July 23, 13
  24. 24. Tuesday, July 23, 13
  25. 25. Tuesday, July 23, 13
  26. 26. 10 Tuesday, July 23, 13
  27. 27. 10 Tuesday, July 23, 13
  28. 28. Tuesday, July 23, 13
  29. 29. The Google+ Sign-In Button Adding the code Tuesday, July 23, 13
  30. 30. Developers.google.com/+ 12 Tuesday, July 23, 13
  31. 31. Code.google.com/apis/console 13 Tuesday, July 23, 13
  32. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 45. Tuesday, July 23, 13
  46. 46. Personalizing Your App Integrating profile and connection data more deeply Tuesday, July 23, 13
  47. 47. Quickly Create Profiles 28 Tuesday, July 23, 13
  48. 48. Tuesday, July 23, 13
  49. 49. Tuesday, July 23, 13
  50. 50. Personalizing Your App Adding the code Tuesday, July 23, 13
  51. 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. 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. 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. 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. 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. 56. Tuesday, July 23, 13
  57. 57. Involve Close Friends with Targeted Sharing Get friends to join from the stream with Interactive Posts Tuesday, July 23, 13
  58. 58. Tuesday, July 23, 13
  59. 59. Tuesday, July 23, 13
  60. 60. Tuesday, July 23, 13
  61. 61. Tuesday, July 23, 13
  62. 62. Tuesday, July 23, 13
  63. 63. Tuesday, July 23, 13
  64. 64. Tuesday, July 23, 13
  65. 65. Check out the delicious dishes at La Mar Cebicheria Peruana Tuesday, July 23, 13
  66. 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. 67. Jonathan Beri 6:14 Mascone West Check out the delicious dishes at Tía Pol! Jonathan Beri Tuesday, July 23, 13
  68. 68. 6:15 Tía Pol Tuesday, July 23, 13
  69. 69. A Button for Every Social Action Tuesday, July 23, 13
  70. 70. A Button for Every Social Action Jonathan BeriBrett JohnsonJonathan BeriBrett Johnson Tuesday, July 23, 13
  71. 71. A Button for Every Social Action Joanna SmithJoanna Smith Tuesday, July 23, 13
  72. 72. A Button for Every Social Action Tuesday, July 23, 13
  73. 73. A Button for Every Social Action Tuesday, July 23, 13
  74. 74. Tuesday, July 23, 13
  75. 75. Involve Close Friends with Targeted Sharing Adding the code Tuesday, July 23, 13
  76. 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. 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. 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. 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. 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. 81. Tuesday, July 23, 13
  82. 82. Surface Activities on Google when they matter Writing App Activities Tuesday, July 23, 13
  83. 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. 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. 85. Tuesday, July 23, 13
  86. 86. Tuesday, July 23, 13
  87. 87. Surface Activities on Google when they matter Adding the code Tuesday, July 23, 13
  88. 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. 89. Review 56 Tuesday, July 23, 13
  90. 90. Review +The Google+ Sign-In Button 56 Tuesday, July 23, 13
  91. 91. Review +The Google+ Sign-In Button +Personalizing Your App 56 Tuesday, July 23, 13
  92. 92. Review +The Google+ Sign-In Button +Personalizing Your App +Involve Close Friends with Targeted Sharing 56 Tuesday, July 23, 13
  93. 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. 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. 95. Tuesday, July 23, 13
  96. 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. 97. Developers Tuesday, July 23, 13

×