web-dev-qa-db-fra.com

Impossible de faire fonctionner les nouveaux AppLinks sur iOS ou Android

Dernière mise à jour ci-dessous lors de la mise à jour # 5

J'essaie d'implémenter AppLinks pour mon iOS ET Android apps: http://applinks.org

J'ai fait ce qui suit:

  1. configurer un schéma d'URL personnalisé pour mon application: inacho: //
  2. Configuration dans mon délégué d'application: - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
  3. Ajouter des balises META à mon site Web à 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" />

J'ai vérifié que le schéma d'URL fonctionne très bien en tapant un lien comme inacho: // default dans Notes et en cliquant sur le lien qu'il crée. Wa-la! Il ouvre mon application.

Mais lorsque j'essaie de cliquer sur un lien vers www.nachorater.com depuis Facebook ou Quip, aucune application ne semble automatiquement prendre note que le site a ces liens d'application configurés et il charge simplement le site Web dans leur navigateur (s) au lieu d'essayer pour ouvrir mon application.

Quelqu'un a-t-il fait fonctionner cela?

Mise à jour:

J'ai eu un problème avec certaines balises META ne se trouvant pas dans la partie <head> de mes modèles et je l'ai corrigé.

Maintenant, le lien: http://www.nachorater.com de l'application iOS Facebook ajoute une jolie petite fenêtre contextuelle qui vous permet d'ouvrir l'url dans l'application iNacho comme ceci:

screenshot

Mais mes liens vers mes avis dynamiques ne semblent pas fonctionner, mais l'application de débogage que Ming a souligné montre que les balises META semblent correctes pour eux.

Par exemple, http://www.nachorater.com/getReview?reviewID=6396169718595584

balises META lors du débogage avec https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.nachorater.com%2FgetReview%3FreviewID%3D6396169718595584 :

meta tags

Mise à jour # 2:

J'ai publié un nouveau lien de révision nacho vers ma chronologie iNacho Facebook, puis j'ai essayé de cliquer dessus à partir de l'application Facebook Mobile.

Il a commencé à charger la page et a fait apparaître l'indicateur pratique qui vous permet d'ouvrir l'application dans iNacho, mais une fois la page chargée, l'indicateur s'est éteint (avant que je puisse cliquer dessus).

Mise à jour # 3:

Depuis l'application Facebook, je peux maintenant déclencher une URL inacho pour mes avis MAIS c'est UNIQUEMENT si je clique sur la petite fenêtre pour l'ouvrir dans iNacho avant qu'elle ne disparaisse. Si je laisse la page se charger complètement dans la vue Web intégrée de Facebook, la petite fenêtre contextuelle disparaît toujours.

Est-ce un problème avec Applinks? Ou un problème avec l'application Facebook? Ou par conception et pourquoi?

Mise à jour # 4:

Je sais peut-être quel est le problème. La page de révision charge à son tour une image dynamique pour la révision du nacho. Ainsi, en chargeant la page, il a une balise img src qui pointe vers une URL dynamique qui charge l'image. Est-ce que cela est confondu avec une action de "redirection" quelconque?

Exemple de balise img (rendue): <img width="300" src="/getReviewImage?imageID=6125868501958656"></img>

Remarque: Il existe un tas d'autres scripts/ajax qui sont également chargés dynamiquement (widgets Facebook et Twitter, etc.).

Est-ce un bogue dans AppLinks ou l'application Facebook Mobile? Ne devrait-il pas se soucier du chargement en arrière-plan d'objets comme ajax et des images dynamiques?

Mise à jour # 5

15/07/14 - Cela se produit toujours avec la dernière application Facebook. Lorsque je clique sur un lien de ma page Facebook iNacho vers mon site Web iNacho, il apparaît l'option de l'ouvrir dans l'application pendant une fraction de seconde avant le chargement de la page. Ensuite, il le cache.

Quant à l'application Twitter, elle ne me donne même pas le popup pendant une fraction de seconde. Il ne semble pas du tout reconnaître que le lien est activé pour les applications.

Quip d'un autre côté, j'ai collé un lien nacho et la première fois que j'ai cliqué dessus, il est allé à son safari intégré sans aucune option à ouvrir dans mon application. MAIS la deuxième fois que je l'ai cliqué, il a ouvert directement mon application à la place.

Résumé: Jusqu'à présent, il semble que certaines applications implémentent incorrectement la partie de navigation AppLinks ou quelque chose. Quip semble fonctionner, mais même la propre application de Facebook semble ne pas fonctionner.

androidiosfacebookmeta-tagsapplinks
32
valheru

J'avais le même problème avec AppLinks et j'ai décidé de simplement les abandonner et d'utiliser simplement le lien d'application de Facebook Hôte: https://developers.facebook.com/docs/applinks/hosting-api

Mon application est vraiment mobile uniquement, et j'ai mal compris comment fonctionnait AppLinks au début. Je pensais que je pouvais simplement mettre le al_ios_* balises META sur une seule page Web universelle, mais ce n'est pas le cas. Il devrait y avoir une page distincte pour chaque élément de contenu sur mon site, et chacune de ces pages doit avoir ses propres balises Meta AppLinks pour renvoyer une URL pour ce contenu spécifique à mon application.

Lorsque je le faisais mal, lorsque je tapais sur mon histoire OpenGraph sur Facebook, cela ouvrait mon site dans le navigateur Web et il y avait une icône d'action dans la barre d'outils en bas sur laquelle je pouvais appuyer et avoir la possibilité d'ouvrir mon application. Ou je devrais taper avec précision le nom de mon application dans l'histoire d'OpenGraph. L'un ou l'autre de ces changements rapides vers mon application, mais l'URL ne serait pas spécifique au contenu vers lequel je veux que mon application accède. En outre, ces deux options sont nulles - je veux juste appuyer n'importe où sur l'histoire et aller directement à mon application, c'est pourquoi nous sommes tous ici.

La solution

Je vais utiliser une histoire OpenGraph avec la boîte de dialogue de partage comme exemple.

Tout d'abord, vous devez créer un lien d'application hébergée sur votre serveur, pas dans l'application. Avant de créer votre histoire OpenGraph ou tout ce qui est partagé, faites un appelez votre serveur pour accomplir 2 choses:

1.) Appelez l'API pour créer un nouveau lien d'application Facebook, qui vous donnera un identifiant

2.) Utilisez cet ID pour effectuer un deuxième appel API pour obtenir l'URL du lien de votre application hébergée

Cela doit être fait sur le serveur car ces appels d'API nécessitent un jeton d'accès à l'application , pas un jeton d'accès utilisateur. Ce jeton a des autorisations au niveau de l'application, pas des autorisations au niveau de l'utilisateur. Vous ne pouvez pas et ne devez pas stocker le secret de votre application Facebook n'importe où dans votre application mobile, car quelqu'un pourrait décompiler votre application et apporter des modifications à votre application Facebook. Pas bien. Utilisez votre serveur car il peut connaître en toute sécurité le secret de votre application.

Mon côté serveur est en PHP alors voici un exemple de la façon d'accomplir cela. Traiter avec l'API n'a pas été une expérience particulièrement agréable, donc je partage l'espoir que cela aide quelqu'un d'autre avec formatage des requêtes:

# 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

De retour dans votre application, une fois que vous avez confirmé une bonne réponse, mettez l'URL canonique que vous obtenez en tant que paramètre url dans [FBGraphObject openGraphObjectForPostWithType: au dessous de. Maintenant, lorsque vous cliquez sur votre histoire dans l'application Facebook, elle ira directement à votre application. Pas de bêtises sur le 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

Lorsque je travaillais sur mon application, Sweep, j'ai mis un mur de paiement/partage après un certain temps passé dans l'application. J'ai fait face au même problème où AppLinks a vraiment craint de se connecter à Facebook, malgré la promesse. Sur la base de ce problème, j'ai créé un service appelé branch.io qui héberge les liens pour moi, et insère automatiquement les balises méta AppLinks correctes pour Android/iOS. Les liens fonctionnent réellement comme prévu, aussi fou que cela soit. Il utilise une combinaison de JS côté client avec les AppLinks pour les rediriger correctement dans chaque navigateur Web et navigateur natif

Voici un guide de haut niveau pour créer les liens de partage sur iOS:

  1. Pour commencer, il vous suffit de configurer l'emplacement de votre application dans l'un ou l'autre des magasins du tableau de bord à dashboard.branch.io. Une fois la configuration terminée, vous obtenez la clé de votre application Branch.

  2. pod "Branch" ou vous pouvez cloner le référentiel open source ici: https://github.com/BranchMetrics/Branch-iOS-SDK

  3. Ajoutez la clé de branche à votre fichier plist sous forme de chaîne avec la clé 'branch_key'

  4. Ajoutez le code suivant à votre AppDelegate dans les méthodes appropriées

Dans le 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
        }
    }];
}

Dans openUrl pour gérer les appels URI:

- (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. Enfin, pour créer les liens hébergés, c'est très simple. Il vous suffit d'appeler getShortUrl pour en créer un dynamiquement. Vous pouvez mettre autant de clés et de valeurs que possible dans les liens (à récupérer dans le rappel initSession)

Vous pouvez placer cet extrait partout où vous souhaitez créer un lien:

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 est très similaire en termes d'appels de méthodes et de fonctionnalités et peut être trouvé sur le site.

5
Alex Austin

désolé si ma réponse n'est pas exactement ce que vous attendez, mais juste pour partager ce que nous avons fait sur nos sites Web et applications.

Par exemple, je sais que nous avons dû ajouter plus de balises pour que cela fonctionne avec les cartes Twitter et voici la liste des méta-propriétés que nous avons dans nos pages:

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

et la métha que vous avez aussi:

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

nous avons également la méta opengraph facebook définie comme fb: app_id. Je mentionne cela parce que lorsque vous recevez le lien profond dans votre application, vous avez également l'identifiant de l'application facebook dans le lien des liens.

Et d'après ce que nous avons testé:

  • facebook n'ouvre pas le lien profond directement sur iOS alors que Android vous donne le choix de l'application. Il affiche parfois le popup bleu en bas de l'écran et parfois vous avez juste un lien ajouté dans la feuille d'actions vous avez lorsque vous appuyez sur le bouton de partage dans la vue Web facebook (safari) (uniquement au premier chargement) -> cette présentation du lien dépend de la façon dont le contenu a été partagé sur facebook.

  • Twitter ajoute un lien vers l'application à l'intérieur de la carte sur iOS.

Je ne sais pas ce que je peux ajouter de plus.

J'espère que ça aide un peu.

3
cire.boroguies