CIS13: An Introduction to Integrating Google+ Sign-In

Developers

Tuesday, July 23, 13


An Introduction to Integrating Google+ Sign-In



Jonathan Beri

Developer Advocate, Google+google.com/+JonathanBeri


Agenda

4


Agenda

+The Google+ Sign-In Button

4


Agenda

+The Google+ Sign-In Button+Personalizing Your App

4


Agenda

+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing

4


Agenda

+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing+Surfacing Relevant Actions Across Google

4




Thinking SocialIt starts with people and connections


New Users & Engagement

6



6

New Users



6

New Users Engagement



Google+ Sign-InCapture new users with a button


The Google+ Sign-In Button

8

Sign in with Google








10


10



The Google+ Sign-In ButtonAdding the code


Developers.google.com/+

12


Code.google.com/apis/console

13


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


https://www.googleapis.com/auth/plus.login


http://schemas.google.com/AddActivity




15

The HTML

HTML








16

The HTML

HTML








17

The HTML

HTML








18

The HTML

HTML








19

The HTML

HTML








20

The HTML

HTML







<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


https://apis.google.com/js/client:plusone.js'



<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





<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







<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






Google+ Sign-In (button): Android

@Overrideprotected 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




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







Personalizing Your AppIntegrating profile and connection data more deeply


Quickly Create Profiles

28




Personalizing Your AppAdding the code


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




32

Retrieve a profile

JS




33

Retrieve a profile

JS



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



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



Involve Close Friends with Targeted SharingGet friends to join from the stream with Interactive Posts









Check out the delicious dishes at La Mar Cebicheria Peruana


6:14

Jonathan Beri shared with you:Check out the delicious dishes at...

Jonathan Beri shared with you: Check out the delicious dishes at...


Jonathan Beri

6:14

Mascone West

Check out the delicious dishes at Tía Pol!

Jonathan Beri


6:15

Tía Pol


A Button for Every Social Action



Jonathan BeriBrett JohnsonJonathan BeriBrett Johnson



Joanna SmithJoanna Smith







Involve Close Friends with Targeted SharingAdding the code


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






http://plus.google.com/pages/create



<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









<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,[email protected]" Share!</button>

48

Prefill Recipients & Share Text

JS






mailto:[email protected]



<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,[email protected]" Share!</button>

49

Also a Sign-In Button!

JS









- (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


https://developers.google.com/+/mobile/ios/

https://developers.google.com/+/mobile/ios/


Surface Activities on Google when they matterWriting App Activities


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

FollowFandango7,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

OblivionPG-13, 2 hr 5 min2,044 watched the trailer

42PG-13, 2 hr 8 min1,903 watched the trailer

The CroodsPG, 1 hr 31 min1,968 watched the trailer

Scary Movie VPG-13, 1 hr 25 min1,761 watched the trailer

Popular with Google+ users


https://www.google.com/search?q=fandango&hl=en&biw=1925&bih=1087&tbs=frim:1&tbo=u

https://www.google.com/search?q=fandango&hl=en&biw=1925&bih=1087&tbs=frim:1&tbo=u

https://plus.google.com/104335801515743756551

https://plus.google.com/104335801515743756551

https://plus.google.com/111859952716487912198/posts/HAEQUSmtJ7v

https://plus.google.com/111859952716487912198/posts/HAEQUSmtJ7v

http://www.fandango.com/sideeffects_155686/movieoverview






http://www.fandango.com/djangounchained_145508/movieoverview

http://www.fandango.com/djangounchained_145508/movieoverview

http://www.fandango.com/lesmiserables2012_149559/movieoverview




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

FollowFandango7,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

OblivionPG-13, 2 hr 5 min2,044 watched the trailer

42PG-13, 2 hr 8 min1,903 watched the trailer

The CroodsPG, 1 hr 31 min1,968 watched the trailer

Scary Movie VPG-13, 1 hr 25 min1,761 watched the trailer

Popular with Google+ users




Surface Activities on Google when they matterAdding the code



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


http://schamas.google.com/BuyActivity

http://schamas.google.com/BuyActivity

https://developers.google.com/+/plugins/snippet/examples/thing




Review

56


Review

+The Google+ Sign-In Button

56


Review

+The Google+ Sign-In Button+Personalizing Your App

56


Review

+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing

56


Review

+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing+Surfacing Relevant Actions Across Google

56


Credits• New User designed by Yuri Mamaev from The Noun Project• Click designed by Rohan Gupta from The Noun Project

57



<Thank You!>developers.google.com/+plus.google.com/+GooglePlusDevelopersstackoverflow.com/questions/tagged/google-plus

Jonathan Beri, google.com/+JonathanBeri


Developers


Technology

CIS13: An Introduction to Integrating Google+ Sign-In