web-dev-qa-db-ja.com

Giphyはどのようにgif​​をFacebookに共有しますか? (2015年、フラッシュはありません)

次のURLをFacebookに貼り付けると、アニメーションGIFを共有できます。これは映画でもフラッシュでもありません。Facebook 現在はgifをサポートしています これらの回避策はありません。クリックすると一時停止でき、一時停止中は「GIF」が丸で表示されます。

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

そのページのメタタグから何を複製しても、Facebookに自分のページからアニメーションGIFを共有させることはできません。そのページのコード全体をコピーして自分で提供することさえしました(Changing <link rel="canonical"および<meta property="og:url"私のURLと一致する)。

Open Graph Object Debugger 実際のGiphyページと私のレプリカの両方で同じ結果が得られます。興味深いことに、Object Debuggerのプレビューは、両方のページの古いスタイルのFlashムービーです。ただし、GiphyのURLをFacebookに貼り付けると、gifが表示されます。私のレリカにはFlashが表示されます。

GiphyはFacebookから特別な扱いを受けていますか?何か違うことをする必要がありますか?

12
Jake

リンクがステータスとして貼り付けられると、Facebookフィードにアニメーション(およびループ)GIFとして表示される.htmlファイルを作成することができました。私のhtmlページでは、ヘッダーで次のメタタグを使用しています。

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

これに取り組んでいたときに問題が発生したのは、og:urlプロパティでした。これらのメタタグが含まれている.htmlファイルではなく、GIFを直接指す必要があります。また、og:imageog:urlと同じである必要があります。

幅と高さのプロパティが必要かどうかはテストしませんでした。

24
vegashacker

GiphyAPIチームのプロダクトマネージャーはこちら。特別な扱いはありません。 Facebookでバグをファイリングするのは永遠にかかります。

Flashタグはレガシーであり、クリーンアップする必要があります。 FBは現在GIFをサポートしており、vegashackerによる回答は基本的に正しいです。

6
Tim Frietas

答えが逃した重要なポイント、GIF画像(クリックされた場合)をGIFリンク自体ではなく所属する記事にリダイレクトさせる方法は?

重要な部分は次のとおりです。

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

2つのog:urlタグを追加します。最初のものは、GIF画像のURLを指すog:imageと同じである必要があります。 2つ目は記事のURLです。

4
Mouneer

実際、私は彼らのソースコードを見ました、そして私は彼らが実際にビデオを見せていると99%確信しています。 this gif の場合、ページに関連付けられているオープングラフメタタグがいくつかあります。

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

そしてそれらのほとんどはビデオタグです。これらのタグは、gifではなくページに関連付けられています。ストレートgif画像を共有すると、アニメーション化されません。

これを確認するために、ページを Facebook URLデバッガー に接続すると、これを確認できます。謎はありません、 これはフラッシュビデオとして共有されます

2

私はFacebookデバッガーでしばらくこれに取り組んでいて、swfを投稿する方法を見つけましたが、ちょうど今日、アニメーションGIFも正常に投稿しました。

リンクを貼り付けただけです https://www.example.com/my.gif FacebookデバッガーにURLが見つからないと表示されましたが、アプリID番号が表示され、先に進んで投稿しました。すべての人が見るための私のタイムライン:)したがって、それを達成するためのhtmlやタグはありませんが、サーバー上のgifファイルへの安全なリンクです。

埋め込まれたhtmlを介してそれを達成する方法を私は決して考えませんでした!

1
cea