web-dev-qa-db-fra.com

Lien de partage HTML WhatsApp pour l'image

Je sais que vous pouvez partager des messages avec et cela fonctionne sur Android et ios maintenant:

<a href="whatsapp://send?text=Hello world this is a message and a link http://www.example.com/image.jpg">Share with whatsapp</a>

Cependant, je voudrais partager une image via un bouton sur mon site Web comme si quelqu'un partageait une image depuis son téléphone (galerie). Est-ce de toute façon possible?

html5whatsapp
26
Manuel

Une solution qui vous vient à l'esprit est de télécharger une photo sur votre serveur via AJAX, de renvoyer le lien vers la photo téléchargée, puis d'envoyer un message avec le lien vers votre photo en utilisant la méthode que vous avez décrite dans votre question. Ce n'est pas tout à fait la même chose que d'envoyer une image directement en utilisant Whatsapp car le destinataire ne recevrait qu'un lien, mais je doute qu'il y ait un moyen de envoyer une image à une autre application de votre galerie en utilisant une page Web car cela soulèverait de sérieuses préoccupations.

En gros, le processus aimerait cela (gardez à l'esprit que cela nécessitera des tests pour obtenir le bon résultat et trouver une solution qui fonctionne bien sur toutes les plates-formes ou au moins la plupart d'entre elles):

  1. Créez un téléchargement d'image sur votre site Web. Avoir simplement <input type="file" accept="image/*"> sur votre page devrait, sur la plupart des plateformes, vous permettre de créer un bouton qui ouvrira une boîte de dialogue pour sélectionner une image dans la galerie de votre téléphone lorsque vous cliquez dessus. Vous pouvez trouver un exemple complet ici ou utiliser une bibliothèque telle que Plupload qui contient de nombreuses méthodes de téléchargement, y compris HTML5 qui est ce dont vous avez besoin.

  2. Créez un téléchargement simple côté serveur. Cela dépend de votre langue et de votre plate-forme, mais tout ce que vous avez à faire est de stocker l'image quelque part et de lui renvoyer un lien en réponse. Si vous ne souhaitez pas stocker ces images sur votre serveur, vous pouvez les transmettre à Imgur API et les y télécharger.

  3. Redirigez l'utilisateur vers le whatsapp:// lien contenant le lien image.

    window.location = 'whatsapp://send?text='+encodeURIComponent(imageURL);

    C'est le point où vous devez faire des tests sur différentes plates-formes, cependant. Vous ne pourrez peut-être pas rediriger vers un whatsapp:// lier de cette façon (car cela semble être un problème de sécurité), donc vous devrez peut-être le tromper (c'est une mauvaise idée, mais je l'inclus par souci d'exhaustivité; le data-action la partie est de cette réponse ):

    var fakeLink = document.createElement('a');
fakeLink.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(imageURL));
fakeLink.setAttribute('data-action', 'share/whatsapp/share');
fakeLink.click();

    En fin de compte, si aucun de ces éléments ne fonctionne, votre meilleur pari est de créer un lien une fois le téléchargement terminé pour que l'utilisateur puisse "confirmer" l'envoi qui contient réellement les éléments ci-dessus whatsapp:// lien dans le champ href.

Il existe de nombreux facteurs à tester et certains sont spécifiques à l'implémentation, j'ai donc dû le garder vague sans trop de code - si vous rencontrez autre chose lors de l'implémentation, veuillez le mentionner dans les commentaires.

5
fstanis