web-dev-qa-db-fra.com

Comment Giphy partage-t-il des gifs avec Facebook? (2015, PAS FLASH PLUS)

Si je colle l'URL suivante dans Facebook, je peux partager un gif animé. Ce n'est pas un film et pas flash, Facebook supporte maintenant les gifs sans ces solutions de contournement. Je peux cliquer dessus pour faire une pause et cela montre "GIF" dans un cercle en pause.

http://giphy.com/gifs/hot-funny-cartoon-fBEDuhnVCiP16

Peu importe ce que je réplique à partir des balises méta de cette page, je ne peux pas permettre à Facebook de partager un gif animé à partir de ma propre page. J'ai même été jusqu'à copier le code complet de cette page et le servir moi-même (Changer de <link rel="canonical" et de <meta property="og:url" pour correspondre à mon URL).

Débogueur d’objets graphiques ouverts donne des résultats identiques pour la page réelle Giphy et pour mon réplica. Fait intéressant, l'aperçu dans Object Debugger est l'ancien film Flash de style ancien pour les deux pages. Cependant, lorsque je colle l'URL Giphy dans mon compte Facebook, il affiche le gif - ma relica montre le Flash.

Giphy reçoit-il un traitement spécial de Facebook? Dois-je faire quelque chose de différent?

12
Jake

J'ai pu créer un fichier .html qui, lorsque le lien est collé sous forme d'état, s'affiche sous forme de GIF animé (et en boucle) dans le flux Facebook. Dans ma page html, j'utilise les balises méta suivantes dans l'en-tête:

<meta property="og:site_name"   content="Site Name">
<meta property="og:url"         content="url to GIF on web">
<meta property="og:title"       content="Title of GIF page">
<meta property="og:description" content="Some description">
<meta property="og:type"        content="video.other">
<meta property="og:image"       content="Same as og:url above">
<meta property="og:image:width"  content="800">
<meta property="og:image:height" content="400">

La chose qui m'a causé des problèmes quand je travaillais dessus était la propriété og:url. Il doit pointer directement sur le fichier GIF, pas sur le fichier .html auquel ces balises META font partie. De plus, og:image devrait être identique à og:url.

Je n'ai pas vérifié si les propriétés width et height étaient requises.

23
vegashacker

Chef de produit pour l'équipe API Giphy ici. Pas de traitement spécial Je souhaite - le dépôt de bogues avec Facebook prend pour toujours.

La balise Flash est un héritage et nous devrions la nettoyer. FB prend maintenant en charge les GIF et la réponse de vegashacker est essentiellement correcte.

6
Tim Frietas

Un point important qui manque aux réponses: comment faire en sorte que l’image GIF (en cas de clic) redirige vers l’article qui appartient à la place du lien GIF lui-même?

Les parties importantes sont:

<meta property="og:image"  content="url/to/image.gif">
<meta property="og:url"    content="url/to/image.gif">
<meta property="og:url"    content="url/to/article">

Ajoutez deux balises og:url. Le premier devrait être identique à og:image et pointant vers l'URL de l'image GIF. La deuxième devrait être l'URL de l'article.

4
Mouneer

En fait, j'ai consulté leur code source et je suis à 99% sûr qu'ils montrent une vidéo. Pour this gif , il existe un certain nombre de balises méta de graphe ouvertes associées à la page:

 <meta property="og:type" content="video">
 <meta property="og:image" content="http://media.giphy.com/media/H2ANZTOXVepbO/giphy-facebook_s.jpg">
 <meta property="og:image:width" content="480">
 <meta property="og:image:height" content="270">
 <meta property="og:video" content="http://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&amp;gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&amp;giphy_height=297&amp;video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&amp;giphyWidth=400&amp;path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&amp;destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&amp;giphyHeight=297&amp;gif_id=H2ANZTOXVepbO&amp;mode=embed&amp;giphy_width=400">
 <meta property="og:video:secure_url" content="https://giphygifs.s3.amazonaws.com/swiphy20141103.swf?api_hostname=&amp;gif_url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.gif&amp;giphy_height=297&amp;video_url=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FH2ANZTOXVepbO%2Fgiphy.mp4&amp;giphyWidth=400&amp;path=%2Fgifs%2Fstar-wars-80s-the-muppet-show-H2ANZTOXVepbO&amp;destination_url=http%3A%2F%2Fgiphy.com%2Fgifs%2FH2ANZTOXVepbO&amp;giphyHeight=297&amp;gif_id=H2ANZTOXVepbO&amp;mode=embed&amp;giphy_width=400">
 <meta property="og:video:type" content="application/x-shockwave-flash">
 <meta property="og:video:width" content="470">
 <meta property="og:video:height" content="297">

et la plupart d'entre eux sont des tags vidéo. Ces balises sont associées à la page et non à un gif. Si vous partagez une image gif directe, elle ne s'animera pas.

Pour confirmer cela, si vous connectez la page au débogueur d'URL de Facebook , cela peut être confirmé. Il n'y a pas de mystère, ceci est partagé en tant que vidéo flash

2
thealmightygrant

Cela fait un moment que je travaille sur ce problème avec le débogueur de Facebook et que je trouve comment publier des messages swf, mais aujourd'hui encore, j'ai également posté avec succès mon gif animé.

J'ai simplement collé mon lien https://www.example.com/my.gif dans le débogueur de Facebook et il a été indiqué que je ne pouvais pas trouver l'URL, mais que j'ai bien affiché le numéro d'identification de l'application, puis que je suis allé dans mon calendrier pour tout à voir :) Donc, pas de code HTML ou de balises pour y parvenir, mais simplement un lien sécurisé vers mon fichier GIF sur mon serveur.

Je n'ai jamais trouvé comment y parvenir via HTML intégré! 

1
cea