web-dev-qa-db-ja.com

Facebookで共有を実装しながら特定の画像をサムネイルとして表示するにはどうすればよいですか？

このメソッドを共有して実装しようとしています。私は次のようにコードを使用しています

http://www.facebook.com/share.php?u=my_website_url

Facebookが表示されているとき、左側にいくつかのサムネイルが表示されています。これらの画像は私のウェブサイトから選択されています。特定の画像をサムネイルとして選択する、または少なくともサムネイルの表示を停止するにはどうすればよいですか？

私の ブログアドレス で確認できます。

facebooksharethis
98
Tanmoy

このブログ投稿にはあなたの答えがあるようです： http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

具体的には、次のようなタグを使用します。

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

イメージの名前は、例と同じでなければなりません。

「プレビューの動作確認」をクリックします

注：タグは正しい可能性がありますが、ドキュメントによると、Facebookは24時間ごとにスクレイピングします。 Facebook Lintページを使用して、画像をFacebookに取り込みます。

http://developers.facebook.com/tools/lint/

80
Gdeglin

Facebookの仕様から、次のようなコードを使用してください。

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

ソース： Facebook Share

98
Efektiivsus Saavutamine

私のタグは正しかったが、ドキュメントによると、Facebookは24時間ごとにスクレイピングするだけだ。 Facebook Lintページを使用すると、画像がFacebookに取り込まれます。

ここにURLを入力すると、FBはページのメタデータを更新します。

https://developers.facebook.com/tools/debug （更新されたリンク）

34
Tim Scollick

Facebookはog:tagsと Open Graph Protocol を使用して、URLを 共有ダイアログ またはFacebookのニュースフィードでプレビューするときに表示する情報を解読します。

og:tagsには次のような情報が含まれます。

  • ページのタイトル
  • ページのタイプ
  • URL
  • ウェブサイト名
  • ページの説明
  • ページの管理者のFacebook user_id（facebookで）

いくつかのog:tagsの例（ facebook documentation からの抜粋）

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

og:tagsの正しいマークアップを実装し、値を設定したら、 Facebook Debugger を使用して、facebookがURLを表示する方法をテストできます。デバッガーツールは、ページ上のog:tagsで見つかった問題やその不足を強調表示します。

留意すべきことの1つは、facebookdoesがこの情報に関してキャッシュを行うため、変更を有効にするためです。ドキュメントに記載されているように、ページはscrapedになります：

メタタグの編集

ページのタグを更新することにより、ページの属性を更新できます。 og：titleとog：typeは最初にのみ編集可能であることに注意してください。50件のいいね！を受け取った後、タイトルは修正され、10,000件のいいね！を受け取った後、タイプは修正されます。これらのプロパティは、ページをすでに気に入っている驚くようなユーザーを避けるために修正されています。これらの制限に達した後にタイトルまたはタイプタグを変更しても何も起こりません。ページには元のタイトルとタイプが保持されます。

Facebookに変更を反映するには、ページを強制的にスクレイプする必要があります。ページの管理者が「いいね」ボタンをクリックしたとき、またはURLが Facebook URLリンター Facebook Debugger ...

22
Lix

提供された答えはすべて正しいことがわかりました。ただし、1つの重要な詳細を見落としていました。画像のサイズは少なくとも200 X 200ピクセルである必要があります。そうでない場合、Facebookはサムネイルをページの基準を満たす最初の利用可能な画像に置き換えます。別の事実として、最低限必要なのは、Facebookがog：imageを有効にするために必要な3つのメタを含めることです。

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

Facebookデバッガーを使用してページをデバッグし、すべての警告を修正すると、魅力的な動作をするはずです！ https://developers.facebook.com/tools/debug

11
chue x

私は同じ問題を抱えていて、それを解決したと信じています。ここで述べたリンクメタタグを使用して、必要な画像を指定しましたが、重要なのは、その場合、FBが他の画像を選択肢として取得しないことです。また、画像が大きすぎる場合は、選択肢がまったくありません。

サイトの修正方法は次のとおりです http://gnorml.com/blog/facebook-link-thumbnails/

2
Rob

これがすべての仕組みです：

  1. 共有している特定のWebページのHTMLにアクセスする機能が必要です。共通のヘッダーファイルを使用すると、おそらくサイト全体でも機能します。私はこれを試していませんが、うまくいくはずです。ただし、これを行うと、すべてのページで同じ画像が取得されます。

  2. これらのHTMLメタタグをのページに追加する必要があります。 。 a）画像、b）説明、c）URL、d）タイトルごとにカスタマイズしてください。

実際の例。

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />
  1. セーブ
  2. 新しいFacebook投稿を開き、共有したいページを再試行します。
  3. 問題がある場合は、このFacebookツールを使用してデバッグできます。それはそれよりもオタクっぽく見えます。共有するURLに投稿したときにFacebookに表示される内容がわかります。

https://developers.facebook.com/tools/debug/og/object/

大きなヒント.. HTMLで「引用符」が同じであることを確認してください（2つの直線マークのように見え、曲線がないはずです。プログラムがこれらを異なるフォントに変更し、コードを混乱させることがあります。

2
Aminul Islam

Facebookでの共有：画像、タイトル、テキストをカスタマイズして結果を改善する方法

上記のリンクから。可能な限り最高のシェアを得るには、HTMLで3つのデータを提案することをお勧めします。

  • タイトル
  • 簡単な説明
  • 画像

これは、HTMLの「head」タグ内に配置された以下によって達成されます。

  • タイトル：<title>INSERT POST TITLE</title>
  • 画像：<meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
  • 説明：<meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Webサイトが静的HTMLである場合、HTMLエディターを使用してすべてのページでこれを行う必要があります。

DrupalのようなCMSを使用している場合、その多くを自動化できます（上記のリンクを参照）。ワードプレスを使用している場合は、おそらくDrupalの例をガイドラインとして使用して、同様のものを実装できます。これらが役に立つことを願っています。

最後に、共有投稿をいつでも手動で編集できます。 この例とイラスト を参照してください。

1
rickmaneluis

Facebook Open GraphをすべてのJoomla記事に設定するために見つけた最も簡単な方法は、次のコードのcom_content/article/default.phpオーバーライドに配置することでした。

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

これにより、現在の記事の詳細とともにメタogタグがヘッドに配置されます。

0
A. D'Alfonso

site にも問題がありました。先週作業していました。類似ボックスを実装し、類似ボックスをテストしました。次に、ヘッダー（ob：imageメタ）に画像を追加しました。それでも、Facebookの通知に正しい画像が表示されませんでした。

私はすべてを試してみましたが、いいねボタンのすべての実装がキャッシュされているという結論に達しました。たとえば、URL Aの[いいね]ボタンをクロックし、ヘッダーで画像を指定し、URL Aの[Luke]ボタンをもう一度クリックしてテストするとします。ページがキャッシュされているため、画像は表示されません。 Bページの「いいね」ボタンをクリックすると、画像が表示されます。

キャッシュをリセットするには、上記のlintデバッガーツールを使用し、キャッシュされているURLのすべてのURLを検証する必要があります...それが私にとって唯一うまくいったことです。

0
Gerard