web-dev-qa-db-ja.com

Facebookのような画像を制御するにはどうすればよいですか。

私はいくつかの投稿があるブログを持っています、そしてそれぞれの投稿は埋め込まれたFacebook likeボタン を持っています。ボタンを押すとダイアログが開き、Facebookの投稿をコメント付きで共有できます。

ただし、共有する場合、Facebookによって選択された画像は一般的なメールアイコンであり、投稿のサムネイルではありません。

共有時に使用される画像を制御する方法

facebook
13
hannit cohen

共有に使用される画像は、サイトのヘッダーにある次のようなコードの塊から取得されます。

<link rel="image_src" href="path/to/theme/screenshot.png" />

通常、テーマ内のサイトのスクリーンショットにリンクしています。ファイルのヘッダーからコードを削除してsingle.phpにしてループ内に配置し、投稿のサムネイル画像をhref要素に呼び出した場合、問題ないと考えられます。だからそれは次のようになります。

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

これは、複数の投稿を一覧表示するページにボタンが好きな場合は、おそらく画像が表示されないことを意味します。 single.phpでのみ削除する条件付きコードを含めると、single.phpテンプレートを使用しているときに、複数の投稿と、likeボタンと投稿のサムネイルが表示されたページに通常の画像が表示されます。したがって、ヘッダーコードは次のようになります。

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

それからあなたはまだsingle.phpに投稿のサムネイルを含めるためにコードを使うでしょう。

7
curtismchale

Facebookは現在opengraphプロトコルを使用しています。あなたが使用して画像を追加することができます：

<meta property = "og：image" content = "http：// YOUR_IMAGE_URL" />

この行をページヘッダーに追加してください。

代わりにあなたはこれを自動的に行うために私のプラグインを使うことができます。

それはこの仕事をするだけで、設定は必要ありません。

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/ /

11
mattsay

あなたはFacebook Open Graph Protocolを使う必要があります。承認された回答が多くのOG：関連回答（私が投票したもの）の1つではないのはよくわかりませんが、それは間違っています。

http://developers.facebook.com/docs/opengraph/

Open Graphを使用している場合は、タイトル、画像、説明、カテゴリ、最終更新日など、さまざまなものをカスタマイズできます。あなたがこれらの他の半解決策を使うならば、あなたは全体像を見失っています。

私がしているすべてのFB作業についてOGプロトコルに従わなかった場合、私は解雇されるでしょう。

5
bitwit

次のようにします。

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

あなたはWordpressがあなたが本当に欲しいものであるSRCだけではなく、画像を表示するのに必要とされるhtmlを出力することを見つけるでしょう。

次のようなことをします。

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

あなただけのURLを取得します。それはおそらく長い道のりであり、おそらく短縮することができますが、それは間違いなく問題を解決します。

これであなたが正しい方向に進むことを願っています。

マット.

1
user4050

指定された画像が正しく表示されない場合は、URLをここに入力してください。

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

1
Justin Burrow

[OK]をクリックして、Meta og：imageに自分が選んだおすすめの画像を追加するためのJavaScriptを少し書きました。それはあなたがあなたのヘッダファイルに追加するワンタイムハックです。

私のワードプレスの投稿に、私はid "featured-image"を追加しました（私は後のワードプレスでこれが組み込まれていることを知っています、私は古いものの上にいます）。

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

私のブログログなどのプレースホルダーを使ってog：imageのメタタグを書きます。タグに "id =" meta-image "を追加します。

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

次に、このJavaScriptをヘッダーに追加します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});
0
Anna Billstrom

あなたのロゴのようなものへの後退を伴うサムネイルとしてあなたの投稿の最初の画像を使用したい場合は、私のプラグインを試してください - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ /代替ロゴ画像を追加するための説明は http://blog.ashfame.com/？p = 888 にあります。

0
Ashfame
<meta property="og:image" content="http://YOUR_IMAGE_URL" />

このメソッドは "like"に対して機能します。しかし、後でur logでリンクを共有したい場合（例えば）、この図は自動選択されています。

このメタタグがなくても、リンク先サイトのすべての画像から選択できます。

静的な "like"画像を維持する方法を知っているが、それでもURLを共有するときに画像を選択させる方法はありますか。

0
Yo-L