Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using App Links Hosting API for link shared on Facebook from iOS app

I've honestly spent hours on this trying to get it to work. Unfortunately Facebook & App Link's documentation is not clear enough. Even the App Links video from F8.

App Requirements:

  1. Share a link to FB as an Open Graph story which users can click on to take them directly into my app and do specific tasks (my app needs to receive specific parameters from the link)
  2. Share the link to FB without FB login (i.e. via the Share Dialog and switch to the native iOS FB app as opposed to using API calls).

Progress so far:

I'm using the following code to create the hosted App Link (as I only have mobile content) as per the FB developer's website under Publishing iOS SDK.

NSDictionary *params = [NSDictionary dictionaryWithObjectsAndKeys:
                            @"{My app name}", @"name",
                            {custom URL}, @"al:iphone:url",
                            @"{app store ID}", @"al:iphone:app_store_id",
                            @"{My app name}", @"al:iphone:app_name",
                            @"{\"should_fallback\": false}", @"web",
                            fbAccessToken, @"access_token",
                            nil
                            ];

/* make the API call */
[FBRequestConnection startWithGraphPath:@"/{FB app id}/app_link_hosts"
                             parameters:params
                             HTTPMethod:@"POST"
                      completionHandler:^(
                                              FBRequestConnection *connection,
                                              id result,
                                              NSError *error
                                              ) {
                              /* handle the result */
                              NSLog(@"Result = %@",result);
                              if(error) NSLog(@"error = %@",error);
                          }];

Next I post the OG story to FB (this is posts fine but without a correct url)

// Create OG object
id<FBGraphObject> object =
[FBGraphObject openGraphObjectForPostWithType:@"{app name}:{FB object_name}"
                                        title:@"Test Link"
                                        image:@"https://cdn3.iconfinder.com/data/icons/picons-social/57/56-apple-512.png" // hosted wallpaper with unique id for background
                                          url:nil // Assuming I need to put the url to the app link host object here??

                                  description:@"Click to on this test link!"];

// Create an action
id<FBOpenGraphAction> action = (id<FBOpenGraphAction>)[FBGraphObject graphObject];

// Link the object to the action
[action setObject:object forKey:@"{FB object name}"];

// Check if the Facebook app is installed and we can present the share dialog
FBOpenGraphActionParams *params = [[FBOpenGraphActionParams alloc] init];
params.action = action;
params.actionType = @"{app name}:{FB action name}";

// If the Facebook app is installed and we can present the share dialog
if([FBDialogs canPresentShareDialogWithOpenGraphActionParams:params]) {
    // Show the share dialog
    [FBDialogs presentShareDialogWithOpenGraphAction:action
                                          actionType:@"{app name}:{FB action name}"
                                 previewPropertyName:@"{FB object name}"
                                             handler:^(FBAppCall *call, NSDictionary *results, NSError *error) {
                                                 if(error) {
                                                     // An error occurred, we need to handle the error
                                                     // See: https://developers.facebook.com/docs/ios/errors
                                                     NSLog(@"Error publishing story: %@", error.description);
                                                 } else {
                                                     // Success
                                                     NSLog(@"result %@", results);
                                                 }
                                             }]; 
}

To handle the incoming URL when someone clicks on the link in the FB OG story I've added the following code to AppDelegate.m as per FB documentation - see Handling incoming links

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {

    BOOL urlWasHandled =
    [FBAppCall handleOpenURL:url
           sourceApplication:sourceApplication
             fallbackHandler:
     ^(FBAppCall *call) {
         // Parse the incoming URL to look for a target_url parameter
         NSString *query = [url query];
         NSDictionary *params = [self parseURLParams:query];
         // Check if target URL exists
         NSString *appLinkDataString = [params valueForKey:@"al_applink_data"];
         if (appLinkDataString) {
             NSError *error = nil;
             NSDictionary *applinkData =
             [NSJSONSerialization JSONObjectWithData:[appLinkDataString dataUsingEncoding:NSUTF8StringEncoding]
                                             options:0
                                               error:&error];
             if (!error &&
                 [applinkData isKindOfClass:[NSDictionary class]] &&
                 applinkData[@"target_url"]) {
                 NSString *targetURLString = applinkData[@"target_url"];
                 // Show the incoming link in an alert
                 // Your code to direct the user to the
                 // appropriate flow within your app goes here
                 [[[UIAlertView alloc] initWithTitle:@"Received link:"
                                             message:targetURLString
                                            delegate:nil
                                   cancelButtonTitle:@"OK"
                                   otherButtonTitles:nil] show];
             }
         }
     }];
    return urlWasHandled;
}

// A function for parsing URL parameters
- (NSDictionary*)parseURLParams:(NSString *)query {
    NSArray *pairs = [query componentsSeparatedByString:@"&"];
    NSMutableDictionary *params = [[NSMutableDictionary alloc] init];
    for (NSString *pair in pairs) {
        NSArray *kv = [pair componentsSeparatedByString:@"="];
        NSString *val = [[kv objectAtIndex:1]
                         stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        [params setObject:val forKey:[kv objectAtIndex:0]];
    }
    return params;
}

Has anyone been able to get this working? I'm still not clear on how the hosted App Link works and where to put it (I'm assuming it should go in the 'url' parameter when calling the FBGraphObject openGraphObjectForPostWithType method.

I really don't want to create a website to store all the urls and add App Link meta tags (I'd have to do all this via the app as each App Link is going to be dynamic and unique for each user that generates it from with in the app).

Please help!

like image 622
Tim Avatar asked Jun 11 '14 07:06

Tim


People also ask

How do I share a Facebook post with API?

Yes, you can share using the graph2 api. The way you do it is to use /feed edge and pass the post's url that you want to share as the link. Standard Fb permissions to the post you are sharing do apply. This was done today, in a local rails app, using FbGraph2 gem, with the above method.

What is app link in iOS?

Apple Universal Links are a standard from Apple deployed on iOS, enabling a user to click a link that delivers them immediately to the app (if it's installed on their device). When an Universal Link and App Link is clicked, the operating system detects whether the app is installed on a user's device.

Does Facebook support universal links?

This is a very common issue: the Facebook app does not support Universal Linking out of the app. As you are seeing, you will wind up in the webview every time. This is an issue with many apps that force web content to be opened in captive webviews.


2 Answers

With the help of MingLi from FB I managed to get it working with the following code:

- (void)shareToOpenGraphCountdownInvite
{
    NSURL *url = [NSURL URLWithString:@"https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id={insert your FB app ID here}&client_secret={insert client secret here}"];
    NSString *fullToken = [NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:nil];
    NSArray *components = [fullToken componentsSeparatedByString:@"="];
    FBAppAccessToken = [components objectAtIndex:1];

    NSDictionary *paramsForAppLinksHost = [NSDictionary dictionaryWithObjectsAndKeys:
                                           FBAppAccessToken, @"access_token",
                                           @"{your app name}", @"name",
                                           @"{your app's custom url}", @"al:ios:url",
                                           @"{app store ID}", @"al:ios:app_store_id",
                                           @"{your app name}", @"al:ios:app_name",
                                           @"{\"should_fallback\": false}", @"web",
                                           nil
                                           ];

    [FBRequestConnection startWithGraphPath:@"/{FB app ID}/app_link_hosts"
                                 parameters:paramsForAppLinksHost
                                 HTTPMethod:@"POST"
                          completionHandler:^(
                                              FBRequestConnection *connection,
                                              id result,
                                              NSError *error
                                              ) {
                              AppLinksHostURL_ID = [result objectForKey:@"id"]; // store this ID in an NSString
                              [self postOGStoryWithCustomURL];
                              if(error) NSLog(@"error = %@", error.description);

                          }];
}

- (void)postOGStoryWithCustomURL
{
    NSString *urlString = [NSString stringWithFormat:@"https://fb.me/%@/%@", AppLinksHostURL_ID, customURL];

    UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[self pathForS3ObjectWithFilename:previewImageFilename]]]];

    // Create OG object
    id<FBGraphObject> object =
    [FBGraphObject openGraphObjectForPostWithType:@"timeflyz:countdown_invite"
                                            title:eventBeingShared.eventName
                                            image:image
                                              url:urlString // fb.me app links hosted url here
                                      description:@"{insert description here}"];

    // Create an action
    id<FBOpenGraphAction> action = (id<FBOpenGraphAction>)[FBGraphObject graphObject];

    // Link the object to the action
    [action setObject:object forKey:@"countdown_invite"];

    // Check if the Facebook app is installed and we can present the share dialog
    FBOpenGraphActionParams *params = [[FBOpenGraphActionParams alloc] init];
    params.action = action;
    params.actionType = @"timeflyz:create";

    // If the Facebook app is installed and we can present the share dialog
    if([FBDialogs canPresentShareDialogWithOpenGraphActionParams:params]) {
        // Show the share dialog
        [FBDialogs presentShareDialogWithOpenGraphAction:action
                                              actionType:@"timeflyz:create"
                                     previewPropertyName:@"countdown_invite"
                                                 handler:^(FBAppCall *call, NSDictionary *results, NSError *error) {
                                                     if(error) {
                                                         // An error occurred, we need to handle the error
                                                         // See: https://developers.facebook.com/docs/ios/errors
                                                         NSLog(@"Error publishing story: %@", error.description);
                                                     } else {
                                                         //                                                         NSLog(@"result %@", results);
                                                         if([[results objectForKey:@"completionGesture"] isEqualToString:@"post"]) {
                                                             NSLog(@"Posted successfully!");
                                                             [[NSNotificationCenter defaultCenter] postNotificationName:@"showShareSuccessfullMessage" object:self userInfo:nil];
                                                         } else
                                                             NSLog(@"Something else happened - user didn't post");
                                                     }
                                                 }];


    }

Note that "customURL" is an NSString that follows the pattern "?variable1=result1&variable2=result2..."

like image 119
Tim Avatar answered Nov 15 '22 05:11

Tim


This is working for Graph v2.5 and SDK 4.8. Definitely not easy and not documented. But thanks Tim For inspiring. I'm using a custom graph object, I don't know how it works with default ones. I'm also using App Links Host since I don't have web app. I obtained a the {app_access_token} from Graph API Explorer, select your app then get app access token

First I created graph stories, actions and object types on Facebook developer (your facebook app). Make sure you have an app query scheme for your app in info.plist LSApplicationQueriesSchemes should contain a scheme pointing to your app I will refer to it as {app_scheme}.

Then in my iOS app I create a new link for every share.

- (void)createAppLinkHost:(void(^)(NSString* appLinkURL))success error:(void(^)(NSError* error))failure{

NSString *url = [NSString stringWithFormat:@"{app_scheme}://%li",self.object.identifier];
NSString *appAccessToken = {app_access_token};
NSString *iosLink = [NSString stringWithFormat:@"[{\"url\":\"%@\",\"app_name\":\"%@\",\"app_store_id\":%i},]",url,@"{app_name}",{app_store_id_int}];
NSDictionary *appLinkHostParams = @{@"access_token":appAccessToken,
                                    @"name":@"{link name}",
                                    @"web":@"{\"should_fallback\": false}",
                                    @"ios":iosLink
                                    };

FBSDKGraphRequest *request = [[FBSDKGraphRequest alloc]initWithGraphPath:@"/{fb_appId}/app_link_hosts"
                                                              parameters:appLinkHostParams
                                                             tokenString:appAccessToken
                                                                 version:@"v2.5"
                                                              HTTPMethod:@"POST"];
[request startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection, id result, NSError *error) {
    if (!error) {
        NSString *appLinkHostId = [result objectForKey:@"id"];
        NSString *urlString = [NSString stringWithFormat:@"https://fb.me/%@", appLinkHostId];
        success(urlString);
    }
    else{
        NSLog(@"--ERROR-- [FACEBOOK APP LINK HOST] %@",error);
        failure(error);
    }
}];

}

If error, check it. Errors from App Link host make more sense than the rest of Facebook SDK. Graph API Explorer is useful to know what data you should send.

Once you get a success get that AppLinkHost and share it.

if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"fbauth2://"]]){
[self createAppLinkHost:^(NSString *appLinkURL) {
    SURL *imageURL = [NSURL URLWithString:self.activity.imageURL];;
    FBSDKSharePhoto *photo = [FBSDKSharePhoto photoWithImageURL:imageURL userGenerated:NO];
    //Custom objects needs to be set from facebook first.
    //Set object properties
    NSDictionary *properties = @{
                                 @"og:type": @"{namespace}:{graph_object}",
                                 @"og:title": @"title",
                                 @"og:description": @"body",
                                 @"og:image": @[photo],
                                 @"og:url":appLinkURL,
                                 @"fb:app_id":@"{fb_appId}",
                                 @"{namespace}:{custom_property}":@(self.object.identifier), //optional
                                 };            
    //Create GraphObject
    FBSDKShareOpenGraphObject *object = [FBSDKShareOpenGraphObject objectWithProperties:properties];

    //Create Action
    FBSDKShareOpenGraphAction *action = [FBSDKShareOpenGraphAction actionWithType:@"{namespace}:{graph_action}" object:object key:@"{namespace}:{graph_object}"];

    FBSDKShareOpenGraphContent *openGraphcontent = [[FBSDKShareOpenGraphContent alloc] init];
    openGraphcontent.action = action;
    openGraphcontent.previewPropertyName = @"{namespace}:{graph_object}";

    [FBSDKShareDialog showFromViewController:self withContent:openGraphcontent delegate:self];
} error:^(NSError *error) {}];

}

like image 33
Ayoub Khayati Avatar answered Nov 15 '22 04:11

Ayoub Khayati