32

以下の更新 #5 の最新の更新

iOS アプリと Android アプリの両方に AppLinks を実装しようとしています: http://applinks.org

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

  1. アプリのカスタム URL スキームをセットアップします: inacho://
  2. アプリデリゲートでのセットアップ:- (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" />

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

しかし、Facebook または Quip から www.nachorater.com へのリンクをクリックしようとすると、どちらのアプリも、サイトにこれらのアプリ リンクが設定されていることを自動的に認識しないようで、試行する代わりにブラウザに Web サイトをロードするだけです。私のアプリを開くには。

誰かがこれを機能させましたか？

アップデート：

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

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

スクリーンショット

しかし、私の動的レビューへのリンクは機能していないようですが、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でデバッグするときのメタ タグ:

メタタグ

更新 #2:

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

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

更新 #3:

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

これは Applinks の問題ですか? それともFacebookアプリの問題？それとも設計上の理由ですか？

更新 #4:

私は問題が何であるかを知っているかもしれません。レビュー ページは、nacho レビューの動的画像をロードします。したがって、ページをロードすると、画像をロードする動的 URL を指す img src タグが含まれます。これはある種の「リダイレクト」アクションと誤解されていますか?

img タグの例 (レンダリング):<img width="300" src="/getReviewImage?imageID=6125868501958656"></img>

注: 動的に読み込まれるスクリプト/ajax は他にもたくさんあります (Facebook や twitter ウィジェットなど)。

これは AppLinks または Facebook Mobile アプリのバグですか? ajax や動的イメージなどのオブジェクトをバックグラウンドでロードすることを気にするべきではありませんか?

アップデート #5

2014 年 7 月 15 日 - これは最新の Facebook アプリでまだ発生しています。iNacho の Facebook ページから iNacho の Web サイトへのリンクをクリックすると、ページの読み込みが完了する前に、そのページをアプリで開くオプションが一瞬表示されます。それからそれはそれを隠します。

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

一方、Quip では、nacho リンクを貼り付けて、最初にクリックしたときに、アプリで開くオプションがなく、組み込みのサファリに移動しました。しかし、2回目にクリックすると、代わりにアプリが直接開かれました。

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

4

3 に答える 3

8

私は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 呼び出しにはユーザー アクセス トークンではなくアプリ アクセストークンが必要なため、これはサーバー上で行う必要があります。このトークンには、ユーザー レベルのアクセス許可ではなく、アプリ レベルのアクセス許可があります。誰かがアプリを逆コンパイルして 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からリンクするのを本当に嫌うという同じ問題に直面しました。この問題に基づいて、リンクをホストし、Android/iOS 用の正しい AppLinks メタタグを自動的に挿入するbranch.ioというサービスを作成しました。リンクは実際には期待どおりに機能します。クライアント側の JS と AppLinks の組み合わせを使用して、すべての WebView とネイティブ ブラウザーで適切にリダイレクトします。

iOS で共有リンクを作成するための概要ガイドは次のとおりです。

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

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

  3. キー「branch_key」を使用して、ブランチ キーを文字列として plist ファイルに追加します。

  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

私の答えがあなたの期待と正確に一致しない場合は申し訳ありませんが、私たちがウェブサイトやアプリで行ったことを共有するだけです.

たとえば、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 メタも定義されています。アプリでディープリンクを受信すると、アプリリンクのリンクに Facebook アプリ ID も含まれているためです。

そして、私たちがテストしたことから：

  • facebook は iOS でディープリンクを直接開くことはありませんが、Android ではアプリを選択できます。画面の下部に青いポップアップが表示される場合があり、facebook (safari) webview (最初の読み込み時のみ) の共有ボタンをタップすると、アクションシートにリンクが追加されることがあります-> このプレゼンテーションリンクの数は、コンテンツが Facebook でどのように共有されたかによって異なります。

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

さらに何を追加できるかわかりません。

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

于 2014-08-01T22:34:46.673 に答える