Facebookで共有を実装するときに特定の画像をサムネイルとして表示する方法は?


98

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

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

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

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


回答:


80

このブログ投稿にはあなたの答えがあるようです: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/


6
Facebookは、link rel属性を使用しても一部の人に必ずしも機能するとは限らないと指摘しています。meta property = "og:image"の方がはるかに信頼できると思います。以下の答えが正しいはずです。
ドウェインチャリントン、2011

多分両方のオプションを使用するのが良いでしょう
Yosef

6
この場合、画像のタイプは「image / gif」である必要がありますね。
ホアキンL.ロブレス

98

Facebookの仕様から、次のようなコードを使用します。

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

出典:Facebookシェア


これは新しいapiでのみ機能し、古いshare.phpリンクでは機能しないようです
chrismarx

34

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

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

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


22

Facebookの用途og:tagsオープングラフプロトコルにあなたのURLをプレビュー表示する情報解読するために、共有ダイアログ やFacebookのニュースフィードに。

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

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

以下は、いくつかの例(facebookのドキュメントから取得)です。og:tags

<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デバッガーを使用して、facebookがURLをどのように表示するかをテストできます。デバッガーツールはog:tags、ページ上で検出された問題や不足している問題も強調表示します。

覚えておくべきことの1つは、facebook この情報に関していくつかのキャッシュを行うことです。そのため、変更を有効にするために、ドキュメントに記載さているように、ページがスクラップされません。

メタタグの編集

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

変更をFacebookに反映するには、ページを強制的にスクラップする必要があります。ページの管理者が[いいね!]ボタンをクリックしたとき、またはURLがFacebook URLリンター Facebookデバッガーに入力されたときに、ページがスクレイピングされます ...


1
以下のタグを使用しました:<meta property = "og:url" content = "72.5.167.17:8003/"; /> <meta property = "og:image" content = "72.5.167.17:8003/img/header-logo.png"; /> <meta property = "og:title" content = "This is my title" /> <meta property = "og:description" content = "This is my description" />タイトルと説明は正常に変更されましたが、画像はまだ残っています来ていない。
Gaurav123 2014

11

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


上記のテキストは別の回答の編集として(誤って)提案されました。その後は拒否されましたが、重要な情報が含まれているようで、編集をここに移動しました。
キューx 2013

2

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

これが私のサイトを修正した方法ですhttp://gnorml.com/blog/facebook-link-thumbnails/


2

これがどのように機能するかを次に示します。

  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/

Big Tip ..「引用符」がHTMLで同じであることを確認してください(2つの直線のマークのように見え、曲線がないように見える必要があります...プログラムによってこれらが別のフォントに変更され、コードが損なわれることがあります。


1

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の例をガイドラインとして使用して、同様のことを実装できます。これらがお役に立てば幸いです。

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


0

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

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

キャッシュをリセットするには、上記のlintデバッガーツールを使用して、キャッシュされているURLのすべてのURLを検証する必要があります。


0

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;

これにより、現在の記事の詳細を含むmeta ogタグがヘッドに配置されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.