32

最新更新如下更新 #5

我正在尝试为我的 iOS 和 Android 应用程序实现 AppLinks:http ://applinks.org

我做了以下事情:

  1. 为我的应用设置自定义 url 方案:inacho://
  2. 在我的 App Delegate 中设置:- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  3. 将元标记添加到我的网站http://www.nachorater.com

<meta property="al:ios:app_store_id" content="581815579"/>
<meta property="al:ios:app_name" content="iNacho" />
<meta property="al:ios:url" content="inacho://default" />

通过在 Notes 中输入类似 inacho://default 的链接并单击它创建的链接,我已经验证了 url 方案的效果很好。哇啦!它打开我的应用程序。

但是,当我尝试从 Facebook 或 Quip 单击指向 www.nachorater.com 的链接时,这两个应用程序似乎都不会自动注意到该站点已设置这些应用程序链接,并且它只是在其浏览器中加载该网站,而不是尝试打开我的应用程序。

有没有人有这个工作?

更新:

我遇到了一些元标记不在我的模板的 < head > 部分中的问题,我修复了它。

现在,iOS Facebook 应用程序中的链接:http ://www.nachorater.com添加了一个不错的小弹出窗口,可让您在 iNacho 应用程序中打开 url,如下所示:

截屏

但是我的动态评论链接似乎不起作用,但 Ming 指出的 Debug 应用程序显示元标记看起来对他们来说是正确的。

例如,http://www.nachorater.com/getReview?reviewID=6396169718595584

使用https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nachorater.com%2FgetReview%3FreviewID%3D6396169718595584进行调试时的元标记:

元标记

更新#2:

我将一个新的 nacho 评论链接发布到我的 iNacho Facebook 时间线,然后尝试从 Facebook 移动应用程序中单击它。

它开始加载页面并弹出方便的指示器,让您在 iNacho 中打开应用程序,但是一旦页面加载,指示器就消失了(在我点击它之前)。

更新#3:

从 Facebook 应用程序中,我现在可以为我的评论触发一个 inacho URL,但只有在它消失之前单击小弹出窗口以在 iNacho 中打开。如果我让页面完全加载到 Facebook 的内置 web 视图中,小弹出窗口仍然会消失。

这是 Applinks 的问题吗?还是 Facebook 应用程序有问题?还是设计使然,为什么?

更新#4:

我可能知道问题出在哪里。评论页面反过来为 nacho 评论加载动态图像。因此,通过加载页面,它有一个 img src 标记,该标记指向加载图像的动态 url。这是否被误认为是某种“重定向”动作?

img 标签示例(渲染):<img width="300" src="/getReviewImage?imageID=6125868501958656"></img>

注意:还有许多其他脚本/ajax 也可以动态加载(Facebook 和 twitter 小部件等)。

这是 AppLinks 或 Facebook 移动应用程序中的错误吗?它不应该不关心像ajax和动态图像这样的背景加载对象吗?

更新#5

7/15/14 - 最新的 Facebook 应用程序仍在发生这种情况。当我从我的 iNacho Facebook 页面单击一个链接到我的 iNacho 网站时,它会在页面完成加载之前弹出在应用程序中打开它的选项。然后它隐藏它。

至于 twitter 应用程序,它甚至一瞬间都没有给我弹出窗口。它似乎根本无法识别该链接是否已启用应用程序链接。

另一方面,我粘贴了一个 nacho 链接,当我第一次点击它时,它进入了它的内置 safari,没有在我的应用程序中打开的选项。但是我第二次点击它时,它直接打开了我的应用程序。

摘要:到目前为止,似乎有些应用程序错误地实现了 AppLinks 导航部分或其他什么。Quip 似乎可以工作,但即使是 Facebook 自己的应用程序也似乎无法正常工作。

4

3 回答 3

8

我在 AppLinks 上遇到了同样的问题,并决定完全放弃它们,只使用 facebook 的应用程序链接主机:https ://developers.facebook.com/docs/applinks/hosting-api

我的应用程序实际上只是移动应用程序,我最初误解了 AppLinks 的工作方式。我以为我可以将al_ios_*元标记放在一个通用的网页上,但这是错误的。我的网站上的每条内容都需要有一个单独的页面,并且这些页面中的每一个都需要有自己的 AppLinks 元标记,以将该特定内容的 URL 发送回我的应用程序。

当我做错了,当我在 facebook 中点击我的 OpenGraph 故事时,它会在网络浏览器中打开我的网站,并且底部工具栏中有一个操作图标,我可以点击它并选择打开我的应用程序。或者我必须在 OpenGraph 故事中精确点击我的应用程序的名称。其中任何一个都可以快速切换到我的应用程序,但 URL 不会特定于我希望我的应用程序导航到的内容。此外,这两个选项都很糟糕——我只想点击故事的任何地方并直接进入我的应用程序,这就是我们都在这里的原因。

解决方案

我将使用带有共享对话框的 OpenGraph 故事作为示例。

首先,您需要在您的服务器上创建一个托管应用程序链接,而不是在应用程序中。在创建您的 OpenGraph 故事或任何要共享的内容之前,请调用您的服务器以完成 2 件事:

1.) 调用 API 来创建一个新的 facebook 应用链接,这会给你一个 ID

2.) 使用该 ID 进行第二次 API 调用以获取托管应用程序链接的 URL

这必须在服务器上完成,因为这些 API 调用需要应用访问令牌,而不是用户访问令牌。此令牌具有应用级权限,而不是用户级权限。您不能也不应该将您的 facebook 应用程序密码存储在您的移动应用程序的任何位置,因为有人可能会反编译您的应用程序并更改您的 facebook 应用程序。不好。使用您的服务器,因为它可以安全地知道您的应用程序机密。

我的服务器端在 PHP 中,所以这里有一个如何完成此操作的示例。处理 API 并不是一个特别愉快的体验,所以我将分享希望它可以帮助其他人格式化请求:

# create a new facebook app link using cURL
$metadata = <what to handle in AppDelegate application:openURL:sourceApplication:annotation>;
$url = "https://graph.facebook.com/v2.1/app/app_link_hosts";
$ch = curl_init($url);

# create form post data
$deepLinkURL = "<myApp>://" . $metadata;
$iosArray = json_encode(array(array("url"          => $deepLinkURL,
                                    "app_store_id" => <appStoreId (number)>,
                                    "app_name"     => "<myAppName>")
                              )
                       );
$webFallbackArray = json_encode(array("should_fallback" => false));

$formQuery = http_build_query(array("access_token" => "<appId>|<appSecret>",
                                    "name"         => $metadata,
                                    "ios"          => $iosArray,
                                    "web"          => $webFallbackArray)
                              );

# options
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $formQuery);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

# get response
$responseJson = curl_exec($ch);
curl_close($ch);

# decode response from facebook
$jsonResponse = json_decode($responseJson, true);
$appLinkId = "";

# get appLinkId
foreach ($jsonResponse as $key => $val) {

    # get status
    if($key == "id") {
        $appLinkId = $val;
    }
}

# if response is good, need to request canonical URL from appLinkId
$errorMessage = "";
$canonicalUrl = "";

if(!empty($appLinkId)) {

    # create another instance of cURL to get the appLink object from facebook using the ID generated by the previous post request
    $getAppLinkUrl = "https://graph.facebook.com/" . $appLinkId;
    $ch2 = curl_init();

    # cURL options
    $queryString = http_build_query(array("access_token" => "<appId>|<appSecret>",
                                          "fields"       => "canonical_url",
                                          "pretty"       => true)
                                    );
    curl_setopt($ch2, CURLOPT_URL, $getAppLinkUrl . "?" . $queryString);
    curl_setopt($ch2, CURLOPT_RETURNTRANSFER, true);

    # get response
    $urlResponseJson = curl_exec($ch2);
    curl_close($ch2);

    # decode response from facebook
    $urlJsonResponse = json_decode($urlResponseJson, true);

    # parse response to get canonical URL
    foreach ($urlJsonResponse as $key => $val) {
        # get canonical URL
        if($key == "canonical_url") {
            $canonicalUrl = $val;
        }
    }

    # check for result
    if(empty($canonicalUrl)) {
        $errorMessage = "Unable to retreive URL.";
    }

} else {
    $errorMessage = "Unable to publish appLink.";
}

# encode response back to your app
if(empty($errorMessage)) {
    $response = json_encode(array("result"        => "success",
                                  "canonical_url" => $canonicalUrl));
} else {
    $response = json_encode(array("result" => "failed",
                                  "errorMessage" => $errorMessage));
}

#send response back to your app

回到您的应用程序中,一旦您确认了良好的响应,请将您返回的规范 URL 作为url参数放在[FBGraphObject openGraphObjectForPostWithType:下面。现在,当您在 facebook 应用程序中单击您的故事时,它将直接进入您的应用程序。没有网络废话。

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

// Create an object
id<FBGraphObject> object;

// set shareDialog parameters
FBOpenGraphActionParams *params = [[FBOpenGraphActionParams alloc] init];
params.action = action;
params.actionType = @"<myApp>:<myAction>";
params.previewPropertyName = @"<key>";
object = [FBGraphObject openGraphObjectForPostWithType:@"<myApp>:<myObject>"
                                                 title:<title>
                                                 image:<urlToPic>
                                                   url:<fb.me/xyz canonical URL>
                                           description:<someDescription>];

[action setObject:object forKey:@"<key>"];

etc...
于 2014-09-29T20:38:10.860 回答
5

当我在开发我的应用程序 Sweep 时,我在应用程序中花费了一定时间后放置了一个付费/分享墙。我遇到了同样的问题,AppLinks 真的很讨厌从 Facebook 链接,尽管有承诺。基于这个问题,我构建了一个名为branch.io的服务,它为我托管链接,并自动为 Android/iOS 插入正确的 AppLinks 元标记。这些链接实际上按预期工作,就像那是疯狂的一样。它使用客户端 JS 与 AppLinks 的组合,使它们在每个 webview 和本机浏览器中正确重定向

这是在 iOS 上创建共享链接的高级指南:

  1. 要开始使用,您只需在dashboard.branch.io 的仪表板上的任一商店中配置您的应用程序的位置。完成所有设置后,您将获得 Branch 应用程序密钥。

  2. pod "Branch" 或者您可以在此处克隆开源存储库: https ://github.com/BranchMetrics/Branch-iOS-SDK

  3. 将 Branch 键作为字符串添加到您的 plist 文件中,键为“branch_key”

  4. 在适当的方法中将以下代码添加到您的 AppDelegate

在 didFinishLaunchingWithOptions 中:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // your other init code
    Branch *branch = [Branch getInstance];
    [branch initSessionWithLaunchOptions:launchOptions andRegisterDeepLinkHandler:^(NSDictionary *params, NSError *error) {     // previously initUserSessionWithCallback:withLaunchOptions:
        if (!error) {
            // params are the deep linked params associated with the link that the user clicked before showing up
            // params will be empty if no data found

            // here is the data from the example below if a new user clicked on Joe's link and installed the app
            NSString *name = [params objectForKey:@"user"]; // returns Joe
            NSString *profileUrl = [params objectForKey:@"profile_pic"]; // returns https://s3-us-west-1.amazonaws.com/myapp/joes_pic.jpg
            NSString *description = [params objectForKey:@"description"]; // returns Joe likes long walks on the beach...

            // route to a profile page in the app for Joe
            // show a customer welcome
        }
    }];
}

在处理 URI 调用的 openUrl 中:

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    // pass the url to the handle deep link call
    // if handleDeepLink returns YES, and you registered a callback in initSessionAndRegisterDeepLinkHandler, the callback will be called with the data associated with the deep link
    if (![[Branch getInstance] handleDeepLink:url]) {
        // do other deep link routing for the Facebook SDK, Pinterest SDK, etc
    }
    return YES;
}
  1. 最后,创建托管链接非常简单。您只需要调用 getShortUrl 即可动态创建一个。您可以在链接中放置尽可能多的键和值(在 initSession 回调中检索)

您可以将此代码段放在要创建链接的任何位置:

NSMutableDictionary *params = [[NSMutableDictionary alloc] init];

[params setObject:@"Joe" forKey:@"user"];
[params setObject:@"url.to.picture/mypic.png" forKey:@"profile_pic"];
[params setObject:@"Joe likes long walks on the beach..." forKey:@"description"];

// Customize the display of the link
[params setObject:@"Joe's MyApp Referral" forKey:@"$og_title"];
[params setObject:@"url.to.picture/mypic.png" forKey:@"$og_image_url"];
[params setObject:@"Join Joe in MyApp - it's awesome" forKey:@"$og_description"];

// Customize the redirect performance
[params setObject:@"http://myapp.com/desktop_splash" forKey:@"$desktop_url"];

Branch *branch = [Branch getInstance];
[branch getShortURLWithParams:params andCallback:^(NSString *url, NSError *error) {
    // show the link to the user or share it immediately
}];

Android 在方法调用和功能方面非常相似,可以在网站上找到。

于 2015-06-02T05:15:28.757 回答
3

抱歉,如果我的回答不完全符合您的预期,只是为了分享我们在网站和应用程序上所做的事情。

例如,我知道我们必须添加更多标签才能使其与推特卡一起使用,以下是我们页面中的元属性列表:

meta property="twitter:card" content=""
meta property="twitter:title" content=""
meta property="twitter:description" content=""
meta property="twitter:image:src" content=""
meta property="twitter:app:id:iphone" content=""
meta property="twitter:app:name:iphone" content="Marmiton"
meta property="twitter:app:url:iphone" content=""
meta property="twitter:app:id:googleplay" content=""
meta property="twitter:app:name:googleplay" content=""
meta property="twitter:app:url:googleplay" content=""

还有你也有的metha:

meta property="al:iphone:app_store_id" content=""
meta property="al:iphone:app_name" content=""
meta property="al:iphone:url" content=""
meta property="al:android:package" content=""
meta property="al:android:app_name" content=""
meta property="al:android:url" content=""

我们还定义了 facebook opengraph 元数据,例如 fb:app_id。我提到这一点是因为当您在应用中收到深层链接时,您的 applinks 链接中也有 facebook 应用 ID。

从我们测试的结果来看:

  • facebook 不会直接在 iOS 上打开深层链接,而 Android 会为您提供应用选择。它有时会在屏幕底部显示蓝色弹出窗口,有时您只需在操作表中添加一个链接,当您点击 facebook(safari)webview 中的共享按钮时(仅在首次加载时)-> 此演示文稿链接的多少取决于内容在 facebook 上的共享方式。

  • twitter 在 iOS 上的卡片内添加一个链接到应用程序。

不知道我还能补充什么。

希望它有点帮助。

于 2014-08-01T22:34:46.673 回答