web-dev-qa-db-ja.com

iOSまたはAndroidで動作する新しいAppLinksを取得できません

以下の最新のアップデート＃5でのアップデート

IOSとAND Android apps： http://applinks.org の両方にAppLinksを実装しようとしています。

私は次のことをしました：

  1. アプリのカスタムURLスキームをセットアップします：inacho：//
  2. アプリデリゲートのセットアップ：- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  3. http://www.nachorater.com のWebサイトにメタタグを追加します。
<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" />

私は、inacho：// defaultのようなリンクをNotesに入力し、作成したリンクをクリックすることで、URLスキームがうまく機能することを確認しました。ワラ！アプリが開きます。

しかし、FacebookまたはQuipからwww.nachorater.comへのリンクをクリックしようとすると、どちらのアプリも、サイトにこれらのアプリリンクがセットアップされていることを自動的に通知しないようで、ブラウザでウェブサイトを読み込むだけですアプリを開きます。

誰かがこれを機能させていますか？

更新：

一部のメタタグがテンプレートの<head>部分にないという問題があり、修正しました。

次に、リンク： http://www.nachorater.com iOS Facebookアプリから、次のようにiNachoアプリでURLを開くことができる素敵な小さなポップアップが追加されます。

screenshot

しかし、動的レビューへのリンクは機能していないようですが、Mingが指摘したデバッグアプリは、メタタグがそれらに対して正しいように見えることを示しています。

たとえば、 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 でデバッグする場合のメタタグ

meta tags

＃2を更新：

INacho Facebookのタイムラインに新しいnachoレビューリンクを投稿し、Facebookモバイルアプリからリンクをクリックしようとしました。

ページの読み込みを開始し、iNachoでアプリを開くことができる便利なインジケーターをポップアップ表示しましたが、ページが読み込まれると、インジケーターが消えました（クリックする前に）。

更新＃3：

Facebookアプリから、レビュー用にinacho URLをトリガーできるようになりましたが、小さなポップアップをクリックしてiNachoで消える前に開く場合のみです。 FacebookのビルトインWebビューでページを完全にロードすると、小さなポップアップはまだ表示されません。

これはApplinksの問題ですか？または、Facebookアプリに問題がありますか？または、設計上およびその理由は？

更新＃4：

私は問題が何であるかを知っているかもしれません。レビューページは、ナチョーレビュー用の動的画像をロードします。そのため、ページをロードすることで、イメージをロードする動的なURLを指すimg srcタグがあります。これはある種の「リダイレクト」アクションと間違えられていますか？

Imgタグの例（レンダリング）：<img width="300" src="/getReviewImage?imageID=6125868501958656"></img>

注：動的にロードされる他のスクリプト/ ajaxもたくさんあります（FacebookやTwitterのウィジェットなど）。

これはAppLinksまたはFacebook Mobileアプリのバグですか？ Ajaxやダイナミックイメージなどのバックグラウンドロードオブジェクトを気にしてはいけませんか？

＃5を更新

7/15/14-これは、最新のFacebookアプリでも引き続き発生しています。 iNacho FacebookページからiNacho Webサイトへのリンクをクリックすると、ページの読み込みが完了する前に1秒ほどアプリで開くオプションがポップアップ表示されます。その後、非表示にします。

Twitterアプリに関しては、ほんの一瞬ポップアップが表示されることさえありません。リンクがappslink対応であることをまったく認識していないようです。

一方、ナチョリンクを貼り付けて、最初にクリックすると、アプリで開くオプションなしでビルトインサファリに移動しました。しかし、2回目にクリックすると、代わりにアプリが直接開かれました。

概要：これまでのところ、一部のアプリがAppLinks Navigation部分を誤って実装しているようです。 Quipは機能しているように見えますが、Facebookのアプリでさえ機能していないようです。

androidiosfacebookmeta-tagsapplinks
32
valheru

私はAppLinksで同じ問題を抱えていたので、それらを完全に放棄し、facebookのアプリリンクホストを使用することにしました： https://developers.facebook.com/docs/applinks/hosting-api

私のアプリは本当にモバイル専用であり、最初はAppLinksがどのように機能するかを誤解していました。 al_ios_*単一のユニバーサルWebページ上のメタタグですが、これは間違っています。サイトのコンテンツごとに個別のページが必要になります。また、特定のコンテンツのURLをアプリに返送するには、各ページに独自のAppLinksメタタグが必要です。

私が間違っていたとき、FacebookでOpenGraphストーリーをタップすると、Webブラウザーでサイトが開き、下部のツールバーにアクションアイコンがあり、タップしてアプリを開くオプションがありました。または、OpenGraphストーリーでアプリの名前を正確にタップする必要があります。これらはいずれもアプリに高速で切り替えられますが、URLはアプリの移動先のコンテンツに固有ではありません。また、これらのオプションはどちらもひどいものです-ストーリーの任意の場所をタップしてアプリに直接アクセスしたいので、私たちはここにいるのです。

解決策

例として、共有ダイアログでOpenGraphストーリーを使用します。

最初に、アプリではなくサーバー上でホストされたアプリリンクを作成する必要があります。OpenGraphストーリーまたは共有されるものを作成する前に、サーバーを呼び出して2つのことを実行します。

1.）API呼び出しを行って、新しいFacebookアプリのリンクを作成します。これにより、IDが返されます

2.）そのIDを使用して2回目のAPI呼び出しを行い、ホストされているアプリのリンクへのURLを取得します

これらのAPI呼び出しには、ユーザーアクセストークンではなく、app accessトークンが必要なため、これはサーバーで実行する必要があります。このトークンには、ユーザーレベルの権限ではなく、アプリレベルの権限があります。誰かがあなたのアプリを逆コンパイルしてあなたの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アプリでストーリーをクリックすると、アプリに直接移動します。 Webナンセンスなし。

// 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...
8
jday

Sweepアプリで作業していたとき、アプリで一定の時間を費やしてからペイ/シェアウォールを設置しました。約束にもかかわらず、AppLinksがFacebookから実際にリンクするのを本当に嫌った同じ問題に直面しました。この問題に基づいて、リンクをホストする branch.io というサービスを構築し、Android/iOS用の正しいAppLinksメタタグを自動的に挿入します。実際には、リンクは期待どおりに機能します。クライアント側のJSとAppLinksの組み合わせを使用して、すべてのWebビューとネイティブブラウザで適切にリダイレクトするようにします

IOSで共有リンクを作成するための高レベルのガイドを次に示します。

  1. 開始するには、dashboard.branch.ioのダッシュボードのいずれかのストアでアプリの場所を設定するだけです。すべてのセットアップが完了したら、Branchアプリキーを取得します。

  2. pod "Branch"または、ここでオープンソースリポジトリのクローンを作成できます。 https://github.com/BranchMetrics/Branch-iOS-SDK

  3. ブランチキーを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はメソッド呼び出しと機能が非常に似ており、サイトで見つけることができます。

5
Alex Austin

私の答えがまさにあなたが期待するものではなく、私たちのウェブサイトやアプリでやったことを共有するだけなら申し訳ありません。

たとえば、Twitterカードで動作させるにはタグを追加する必要がありました。ページにあるメタプロパティのリストを次に示します。

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=""

また、あなたが持っているメタ：

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=""

また、fb：app_idなどのfacebook opengraphメタが定義されています。アプリでディープリンクを受信すると、applinksリンクにもFacebookアプリIDが含まれているためです。

そして、私たちがテストしたものから：

  • facebookはiOSで直接ディープリンクを開きませんが、Androidはアプリの選択を可能にします。画面の下部に青いポップアップが表示される場合があり、アクションシートにリンクが追加される場合がありますfacebook（safari）webviewで共有ボタンをタップすると（最初のロード時のみ）->このリンクの表示は、facebookでのコンテンツの共有方法によって異なります。

  • Twitterは、iOSのカード内にアプリへのリンクを追加します。

さらに追加できるものがわかりません。

それが少し役立つことを願っています。

3
cire.boroguies