WordPress記事をいいね!されたとき、表示される画像を指定する方法

WordPress記事をいいね!されたとき、表示される画像を指定する方法

facebookでいいね!やシェアして頂いた際、画像が全然関係ないモノだったりすることに今更気がついて、これは直さねばとあれこれ調べてみました。facebookのTL上に表示される画像を、WordPressで設定したアイキャッチに指定する方法です。


参考サイト

『いいね!ボタンを設置したい』WordPressにソーシャルプラグインを設置する -Facebook篇 其の壱-

『いいね!ボタンのOGP設定』WordPressにソーシャルプラグインを設置する -Facebook篇 其の弐-

こちらのサイトの記事で、これでもかというくらい丁寧に説明されていました。非常に参考になります。私は、記事を書くときには必ずアイキャッチを作成しているので、「いいねを押されたとき、アイキャッチの画像を指定する」という条件で省コードでやってみたいと思います。

「アイキャッチがない場合はあらかじめ用意した画像を指定する」という方法も紹介されていますので、リンク先をご参照ください。

目次

  1. Facebookデベロッパーの登録
  2. アプリを作成
  3. いいね!ボタンを設置
  4. OGP設定をヘッダーに書き込む
  5. 動作チェック

1.Facebookデベロッパーの登録

私はもう登録してあったので、登録方法をイチからご紹介できなくて申し訳ないのですが…。どうも会社のfacebookページ作ったときに登録してたみたいです。すっかり忘れていました。先ほど紹介させてもらったリンク先に、詳しい説明動画があります。

2.アプリを作成

120724-1

右上にこういうのが出てくると思うので、[新しいアプリを作成]をクリック。

120724-2

[App Name]のところに好きな名前を書いて、続行。その後、セキュリティチェックで認証。

120724-3

この2点だけチェックして、変更を保存。

3.いいね!ボタンを設置

詳しい説明は参考サイトにがっつり書いてあるので、ばっさり省略します。

<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

こちらのコードをアプリIDの部分を先程取得したIDに書き換えてsingle.phpに貼り付ければOK。layout=button_countを、layout=standardlayout=box_countに変えればボタンの形が変わります。大きさは適宜変更してください。

4.OGP設定をヘッダーに書き込む

まず、htmlタグを

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

のように書き換え。

追記:HTML5の場合はこのように書いたほうが良さそうです。

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

こちらを参考にさせていただきました!

そして、

<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:description" content="<?php the_excerpt() ; ?>"/>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'full');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>">
<meta property="og:site_name" content="Ateitexe" />
<meta property="fb:app_id" content="アプリID" />

このコードを11行目のアプリIDを書き換えて、header閉じタグの直前に貼り付けると、その記事に設定したサムネイルをimageとして取り込んでくれます。その他、記事タイトルや概要などもWordPress仕様で設定しています。

All in One SEO Packをお使いの場合

4行目を以下と差し替えが必要だそうです。

<meta property="og:description" content="<?php echo get_post_meta($post-<ID, _aioseop_description, true); ?>"/>

5.動作チェック

120724-4

こちらに任意の記事のURLを入力してみると、画像をはじめ、先ほど設定したOGPがちゃんと反映されているか確認することができます。

これで適切な画像でシェアして頂けますね!最初から最後まで参考にさせて頂いてしまったThe Present Noteさん、ありがとうございました!

追記:この記事を書いたときはまだ良かったんですが、facebookでのOGP画像の推奨サイズがどんどん大きくなってきて、このブログで使ってるアイキャッチ(200×150px)は小さすぎて候補に上がらなくなってしまいました…。対策した記事はこちら。
公開日:2012/07/24
更新日:2014/02/26

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。