session 306 - integrating with facebook, twitter and sina weibo

These are confidential sessions—please refrain from streaming, blogging, or taking pictures

Social Engineering

Session 306

Integrating with Facebook, Twitter, and Sina Weibo

Lestat AliiOS Software Engineer

Julien RobertOS X Software Engineer

Social Networks—iOS 6

Twitter

Twitter Facebook

Twitter Sina WeiboFacebook

Social Networks—Mountain Lion

Shareable Content

Images

Movies

Shareable Content

Images

Movies

Social Networks

Facebook

Twitter

Your App

Shareable Content

Images

Movies

Social Networks

Facebook

Twitter

Your App

Shareable Content

Images

Movies

Social Networks

Facebook

Twitter

What You Will Learn

•UI integration on iOS•UI integration on OS X•Advanced integration

UI Integration

Your App

Shareable Content Social Networks

Images

Movies

Facebook

Twitter

Your App

Images

Movies

Facebook

Twitter

UIActivityViewController NSSharingServicePicker

Your App

Images

Movies

Facebook

Twitter

Benefits of Using Built-in UI

• Creates a consistent user experience

• Creates a consistent user experience•Uses single sign-on

• Creates a consistent user experience•Uses single sign-on• Easy to integrate

• Creates a consistent user experience•Uses single sign-on• Easy to integrate• Improves over time

UI Integration on iOS

UIActivityViewController

UIActivityViewController Presentation

NSString *textToShare = @”Hello World!”;UIImage *imageToShare = [UIImage imageNamed:@”world.png”];NSArray *activityItems = @[textToShare, imageToShare];

UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:activityItems applicationActivities:nil];

[self presentViewController:activityVC animated:YES completion:nil];

Targeted Integration

Facebook Sheet Tweet Sheet Weibo Sheet

Twitter Framework

• Twitter framework is deprecated

Twitter Framework

• Twitter framework is deprecated•Do not use TWTweetComposeViewController

Social Framework

Twitter

Social Framework

Twitter

Social Framework

Twitter

Facebook

Social Framework

Twitter

Facebook

Sina Weibo

Social Framework

• Expands on Twitter framework• Provides SLComposeViewController• Factory for sharing sheets[SLComposeViewController composeViewControllerForType:]

SLComposeViewControllerSpecifying the service type

Facebook Sheet Tweet Sheet Weibo Sheet

SLServiceTypeFacebook Tweet Sheet Weibo Sheet

SLServiceTypeFacebook SLServiceTypeTwitter Weibo Sheet

SLServiceTypeFacebook SLServiceTypeTwitter SLServiceTypeSinaWeibo

Presenting an SLComposeViewController

SLComposeViewController *facebookPostVC = [SLComposeViewController composeViewControllerForType:SLServiceTypeFacebook];

[facebookPostVC setInitialText:@”Hello World!”];

[facebookPostVC addImage:[UIImage imageNamed:@”world.png”]];

[self presentViewController:facebookPostVC animated:YES completion:nil];

UI Integration on OS X

Julien RobertOS X Software Engineer

NSSharingServicePickerShare Menu

•Menu of services

•Menu of services• Shows only available services

•Menu of services• Shows only available services• Can be customized

•Menu of services• Shows only available services• Can be customized• Easiest way to share

Many Sharing Options

Twitter

Twitter Facebook

Flickr

Twitter

iMessage

Facebook

Flickr

Twitter

iMessage

Facebook

AirDropFlickr

Social Networks

Sharing Architecture

Shareable Content

NSSharingServicePicker Social Networks

Shareable Content

NSSharingService

Shareable Content

NSSharingService

Delegate

Shareable Content

Delegate

NSSharingService

Delegate

Shareable Content

What Can You Share?

• Basic types■ NSImage■ NSString, NSAttributedString■ NSURL (local or remote)

What Can You Share?

• Basic types■ NSImage■ NSString, NSAttributedString■ NSURL (local or remote)

• Custom types that implement NSPasteboardWriting

Adding a Sharing Menu to Your App

1. Create share button

1. Create share button2. On click, present

NSSharingServicePicker

3. Specify a delegate for the user-selected service

4. Implement the delegate methods for the service

Creating the buttonAdding a Sharing Menu to Your App

NSButton *button = [[NSButton alloc] init];

[button setImage:[NSImage imageNamed:NSImageNameShareTemplate]];

[button sendActionOn:NSLeftMouseDownMask];

[button setTarget:self];

[button setAction:@selector(showServicePicker:)];

Presenting the sharing menuAdding a Sharing Menu to Your App

- (void)showServicePicker:(id)sender {

NSArray *items = @[@"Hello world", anImage];

NSSharingServicePicker *picker = [[NSSharingServicePicker alloc] initWithItems:items];

picker.delegate = self;

[picker showRelativeToRect:NSZeroRect ofView:sender preferredEdge:NSMinYEdge];

Delegate

Specifying the service delegateAdding a Sharing Menu to Your App

Delegate

NSSharingService

Delegate

NSSharingService

Delegate

NSSharingService

Delegate

- (id)sharingServicePicker:(NSSharingServicePicker *)picker delegateForSharingService:(NSSharingService *)service

Delegate

NSSharingServiceDelegateImplementing the Service Delegate

• Called immediately before items are shared - (void)sharingService:(NSSharingService *)service willShareItems:(NSArray *)items

• Called immediately after items are shared - (void)sharingService:(NSSharingService *)service didShareItems:(NSArray *)items

•When sharing fails - (void)sharingService:(NSSharingService *)service didFailToShareItems:(NSArray *)items error:(NSError *)error

•Watch out for NSUserCancelledError

Make sharing a beautiful user experienceAnimating the Share Sheet

•Have these ready

•Have these ready■ Shared item’s frame

•Have these ready■ Shared item’s frame■ Transition image

•Have these ready■ Shared item’s frame■ Transition image■ Source window

•Have these ready■ Shared item’s frame■ Transition image■ Source window■ Content scope

DemoIntegrating NSSharingServicePicker into an OS X App

Providing item frame and transition imageAnimating the Share Sheet

•Give the frame of the shared item- (NSRect)sharingService: sourceFrameOnScreenForShareItem:(id)item

• Its transition image- (NSImage *)sharingService: transitionImageForShareItem:item contentRect:(NSRect *)contentRect

QLThumbnailGetContentRect

Providing source window and content scopeAnimating the Share Sheet

- (NSWindow *)sharingService:(NSSharingService *)service sourceWindowForShareItems:(NSArray *)items sharingContentScope:(NSSharingContentScope *)sharingContentScope

Content scopes—hints for the animationAnimating the Share Sheet

• From a listNSSharingContentScopeItem

• Extracted from a larger contentNSSharingContentScopePartial

•Whole documentNSSharingContentScopeFull

NSSharingServiceTargeted Integration

• Customize trigger UI

• Customize trigger UI• Specify a service name

• Customize trigger UI• Specify a service name• Same share sheets

Presenting a Share Sheet

•When your trigger UI is clicked

•When your trigger UI is clickedservice = [NSSharingService sharingServiceNamed: NSSharingServiceNamePostOnTwitter];

service.delegate = self;

[service performWithItems:items];

• Enable your control conditionally

• Enable your control conditionallyenable = [service canPerformWithItems:items];

UI Integration Summary

UIActivityViewController

Communicating with a service on your ownAdvanced Integration

Sample Request

Your App Facebook Server

Sample Request

https://graph.facebook.com/meYour App Facebook Server

Sample Request

{ “id”: “12345”,“name”: “Lestat Ali”,“first_name”: “Lestat”,“last_name”: “Ali”,“username”: “lestat.ali”,“gender”: “male”,“locale”: “en_US”

Sample Request

{ “id”: “12345”,“name”: “Lestat Ali”,“first_name”: “Lestat”,“last_name”: “Ali”,“username”: “lestat.ali”,“gender”: “male”,“locale”: “en_US”

Overview

•Accessing user accounts

Overview

•Accessing user accounts• Creating requests

Overview

•Accessing user accounts• Creating requests•Dealing with permissions

Social Framework

• Provides SLRequest

Social Framework

• Provides SLRequest • Can talk to

■ Facebook■ Twitter■ Sina Weibo (1.0 only)

Using SLRequest

1. Request access to the user’s account

Using SLRequest

1. Request access to the user’s account2. Get the user’s account

Using SLRequest

1. Request access to the user’s account2. Get the user’s account3. Create an SLRequest

Using SLRequest

1. Request access to the user’s account2. Get the user’s account3. Create an SLRequest4. Provide the SLRequest with the account

Using SLRequest

1. Request access to the user’s account2. Get the user’s account3. Create an SLRequest4. Provide the SLRequest with the account5. Send the SLRequest

Accessing User Accounts

•Accounts framework controls access

•Accounts framework controls access• Request access with-[ACAccountStore requestAccessToAccountsWithType:withCompletionHandler:]

• For Facebook, need a special dictionary in Info.plist

Getting Access to Facebook Accounts

self.accountStore = [[ACAccountStore alloc] init];

ACAccountType *facebookAccountType = [self.accountStoreaccountTypeWithAccountTypeIdentifier:ACAccountTypeIdentifierFacebook];

[self.accountStore requestAccessToAccountsWithType:facebookAccountType withCompletionHandler:^(BOOL granted, NSError *e) {

if (granted) {NSArray *accounts = [self.accountStore accountsWithAccountType:facebookAccountType];

self.facebookAccount = [accounts lastObject];} else {

// Fail gracefully...}

Building Your Request

• Initialize an SLRequest instance with

• Initialize an SLRequest instance with■ URL

• Initialize an SLRequest instance with■ URL■ HTTP Method

• Initialize an SLRequest instance with■ URL■ HTTP Method■ Parameters

• Set the account property

• Set the account property• Perform the request and handle the response

We Take Care of Signing Requests

Twitter/Facebook/Weibo API

Accessing a User’s Facebook Profile

NSURL *requestURL = [NSURL URLWithString:@”https://graph.facebook.com/me”];

SLRequest *request = [SLRequest requestForServiceType:SLServiceTypeFacebook requestMethod:SLRequestMethodGET URL:requestURL parameters:nil];

request.account = self.facebookAccount;

[request performRequestWithHandler:^(NSData *data, NSHTTPURLResponse *response, NSError *error) {// Handle the response...

DemoDaily Cat Facts

Kalle HaglundsiOS Software Engineer

Facebook Account Access

•Account access is more nuanced than Twitter

•Account access is more nuanced than Twitter•Need to request specific permissions

•Account access is more nuanced than Twitter•Need to request specific permissions• Permissions are documented on Facebook’s website

Facebook Access Dictionary

•Add this dictionary to Info.plist under the key ACFacebookClientAccessInfo@{

ACFacebookAppIDKey: @”123456789”,ACFacebookAppVersionKey: @”1.0”, ACFacebookPermissionsKey: @[@”publish_stream”, ...], ACFacebookPermissionGroupKey: @”write”

•Add this dictionary to Info.plist under the key ACFacebookClientAccessInfo@{

ACFacebookAppIDKey: @”123456789”,ACFacebookAppVersionKey: @”1.0”, ACFacebookPermissionsKey: @[@”publish_stream”, ...], ACFacebookPermissionGroupKey: @”write”

• In next seed, pass it as an argument when requesting access

@{ ACFacebookAppIDKey: @”123456789”,ACFacebookAppVersionKey: @”1.0”, ACFacebookPermissionsKey: @[@”publish_stream”, ...], ACFacebookPermissionGroupKey: @”write”

Choosing rightFacebook Permission Group

ACFacebookPermissionGroupRead ACFacebookPermissionGroupWrite

user_about_me, user_birthday, ... publish_actions

friends_about_me, friends_birthday, ... publish_stream

Need permissions from both groups? ACFacebookPermissionGroupReadWrite

The forbidden fruitFacebook Permissions

• Extended permissions cannot be requested using the iOS API

• Extended permissions cannot be requested using the iOS API■ Reading the user’s timeline

• Extended permissions cannot be requested using the iOS API■ Reading the user’s timeline■ Managing pages

• Extended permissions cannot be requested using the iOS API■ Reading the user’s timeline■ Managing pages■ More in the documentation

Managing Facebook Access

•Might lose access at any time

•Might lose access at any time■ Token expiration

•Might lose access at any time■ Token expiration■ User removes app from website

•Might lose access at any time■ Token expiration■ User removes app from website■ User flips switch in Settings

• If server returns error 190, access token is invalid

• If server returns error 190, access token is invalid•Attempt to renew by calling

• If server returns error 190, access token is invalid•Attempt to renew by calling-[ACAccountStore renewCredentialsForAccount:withHandler:]

•On completion

•On completionACAccountCredentialRenewalRenewed

•On completionACAccountCredentialRenewalRenewedACAccountCredentialRenewalRejected

•On completionACAccountCredentialRenewalRenewedACAccountCredentialRenewalRejectedACAccountCredentialRenewalFailed

What If I Already Have FBConnect?

• Support will be automatic

What If I Already Have FBConnect?

• Support will be automatic•After next seed

More Information

Paul MarcosApplication Services [email protected]

DocumentationAccounts Frameworkhttps://developer.apple.com/library/ios/

Social Frameworkhttps://developer.apple.com/ue

Apple Developer Forumshttps://devforums.apple.com

Third-Party DocumentationFacebook SDKhttps://developers.facebook.com/docs/

Twitter APIhttps://dev.twitter.com/docs

Sina Weibo API http://open.weibo.com/wiki/

Social Integration Lab App Services Lab AThursday 3:15PM

Summary

•UI Integration is easy

Summary

•UI Integration is easy■ On iOS—UIActivityViewController

Summary

■ On OS X—NSSharingServicePicker

Summary

•Advanced integration gives you more control

Summary

•Advanced integration gives you more control■ Accounts framework allows access to user account

Summary

•Advanced integration gives you more control■ Accounts framework allows access to user account■ Let SLRequest sign requests for you

Summary

•Advanced integration gives you more control■ Accounts framework allows access to user account■ Let SLRequest sign requests for you

• FBConnect will get you automatic support

session 306 - integrating with facebook, twitter and sina weibo

Documents

hello world

uiimage imagenamed

nilself presentviewcontroller

builtin uibenefits

twittersocial networksios

iosui integration

learnui integration

timeui integration