2012
7
24

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.いいね!ボタンを設置

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

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

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

まず、htmlタグを

のように書き換え。

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

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

そして、

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

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

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

5.動作チェック

120724-4

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

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

追記:この記事を書いたときはまだ良かったんですが、facebookでのOGP画像の推奨サイズがどんどん大きくなってきて、このブログで使ってるアイキャッチ(200×150px)は小さすぎて候補に上がらなくなってしまいました…。対策した記事はこちら。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/07/24
更新日:2014/02/26


コメントを残す




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


back to top