web-dev-qa-db-ja.com

Facebook共有ダイアログは最初のロードでサムネイルを表示しません

Facebookの共有ダイアログを使用して特定のURLを共有しています。共有リンクには、後で共有の一部となる画像が含まれています。これについての奇妙なことは、それがモバイルブラウザで完全にうまく機能することです。ただし、デスクトップブラウザは最初の試行で画像をロードしません。共有ウィンドウをリロードするだけで、欠落している画像が修正されます。この画像が少なくとも1回表示されると、追加のリロードなしで他のブラウザで引き続き機能します。

だから私の質問は：このURLの最初の呼び出しが画像を表示しない理由を誰かが知っていますか？

詳細

共有ダイアログを開くためのリンク

これはFacebookデバッガーの出力であり、エラーがなく、画像も表示されます。

Facebookデバッガー出力

更新

問題なくフィードダイアログで動作するようです。ただし、これはアプリIDが必要なため、防止したいもう1つの共有方法です。

facebookimagethumbnailsshare
20
Sven Bluege

私はついに問題を見つけたと思います。共有したい画像は、プレーンファイルではなくPHPスクリプトで配信されます。これは、PHPが画像を配信する方法に関連しているようです：

悪い：

echo readfile($image_thumb_file);

良い：

$fp   = fopen($image_thumb_file, "rb");
fpassthru($fp);

この変更を行った後、私の画像は最終的にFacebookデバッガーに表示されます。

0
Sven Bluege

私もこの問題に遭遇しましたが、Facebookには文書化されていない「機能」があり、おそらく最適化のために実装されていることがわかりました。最初の共有時に画像が読み込まれることはありません。

バグの説明はここにあります： https://developers.facebook.com/bugs/6576961043210

要するに、解決策は2つの可能性のうちの1つです。

  1. 最も簡単なのは、画像のピクセル幅と高さを説明するogtagの一部としてog：image：widthとog：image：heightを含めることです。不思議なことに、これは（明らかに設計上）Facebookに画像を含めてサイトをすぐにスクレイプするように説得します。

    <meta property = "og：image" content = " http://example.com/image.jpg" / >

    <meta property = "og：image：width" content = "450" />

    <meta property = "og：image：height" content = "298" />

  2. 2番目の解決策は、APIを介して手動でスクレイプをトリガーすることです。私はこれをテストしていませんが、理論的には可能です。このトピックについては、 関連するStackoverflowの説明 を参照してください。

24
Aron

Facebookはキャッシュされた画像を表示します。これは、共有が最初に送信されたとき、またはFacebookクローラーがページでog：imageタグを見つけたときに行われます。

Facebookのドキュメントによると https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images

「一部のソーシャルプラグインは、誰かが操作しているときに画像をレンダリングします。画像は、ページ上のog：imageに基づいており、og：imageが設定されていない場合はページ上の他の画像に基づいています。ソーシャルプラグインができる前に画像をレンダリングするFacebookのクローラーは少なくとも1回は画像を見る必要があります。ページが頻繁に変更されるサイト（eコマースなど）の場合、これらのプラグインを最初にクリックした人にはレンダリングされた画像は表示されません。」

2
SoHo

アーロンズの答えに基づいて構築するには、

最も簡単なのは、画像のピクセル幅と高さを説明するogtagの一部としてog：image：widthとog：image：heightを含めることです。不思議なことに、これは（明らかに設計上）Facebookに画像を含めてサイトをすぐにスクレイプするように説得します。

<meta property="og:image" content="http://example.com/image.jpg"/ >

<!-- NOTE: This size should be the exact width of the image -->
<meta property="og:image:width" content="450"/>

<!-- NOTE: This size should be the exact height of the image -->
<meta property="og:image:height" content="298"/>

「og：image：width」タグと「og：image：height」タグは、Facebookが画像を正しくスクレイプするために、画像の正確なサイズである必要があります。

この記事は、「og：image：height」と「og：image：width」がheadタグにハードコードされているCMSシステムを介してhtmlページを生成していたので、正解につながりました。

https://medium.com/web-design-web-developer-magazine/facebook-share-dialog-box-not-showing-image-the-first-time-you-share-a-story- ed19d0f3ad36

0
Cavin Rauch

og:image:widthおよびog:image:heightプロパティを確認することもできます。
これは私にとってはうまくいきます。

0
Pablo Barbie Fumarola

共有ボタンをクリックする前にFacebookクローラーにページをチェックさせる別の方法を見つけました。共有者のFacebookリンクに非表示のiFrameを含めるだけです。

例：

<iframe src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></iframe>
0
Dan