WP-OGPを改造してマルチサムネイル対応&正しいプロパティ表記にしました

WP-OGP

タイトル通りなのですが、
Wordpress用プラグインのWP-OGPをあれこれいじってみたので
勇気を出して公開してみます。

みなさんはOGPをご存知ですか?

今知らないと思った人はとりあえず今はこのエントリを読むのを止めてこれを読んでください。大分わかります。
IT戦記 – フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

私は大体分かった気になっただけでしたが、これを読んでいる方なら多分分かります。
読んで私はこう思ったわけです。

「探せばWordpress用のプラグインが多分見つかるっしょ」と。
他人任せ

検索したら速攻で見つかりました。
WP-OGP プラグインダウンロードページ

このプラグインすごく簡単で、有効化したらとりあえずすぐ使えます。
facebookアプリのIDなんかを入れる項目がありますがこのへんを見ればすぐできると思います。
GaiaX Social Media Lab.

こんなにも簡単に使えて、解説をしているサイトもたくさんある、のになぜ!
今こんなエントリを書いているのか!

事の発端は、このブログを始めて色んな機能のテストをしていたときのこと
Twitterで最近ちまちま仲良くしていただいてる@xxmiz0rexxさんが
自分のWebサイトに付けてるfacebookのボタンを押してもサムネイルが表示されないと困っていたので
どうしようもなく困った

何がおかしいんだろうと自分のとこのボタンと挙動を見比べてみたところなんと!
全く同じ挙動だったので「え?これなんかおかしいの?」と思いつつ
こういう部分の作りがしっかりしてそうな某ブログとか某ブログとか見てみたら

shareボタン押したらサムネイルが表示されてるじゃないのよ!なんで俺のとこ表示されないのよ!!
と思いましてソースを見てみると、WP-OGPさんがしっかりと

<meta property="og:image" content="アイキャッチ画像のURL" />

と付け足していてくれたので余計不思議になって色々調べてみると

facebook DEVELOPERS – Open Graph protocol
の中に

The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1.

ん?んお?
アスペクト比が3:1以上の画像じゃだめなの?
見て頂けると分かると思うんですけど、このサイトのアイキャッチ画像

どう考えてもアスペクト比3:1を超えています。

というわけで試しに違う画像のURLを直接テンプレートに書き込んでみたら、あっさり表示されました。

めでたしめでたし。
となればよかったのですが、なりません。

WP-OGPは、アイキャッチをog:image用の画像として使おうとするのでどうにもこうにもダメなのです。

とか思っていたところ、こんなページを見つけて
WP-OGPプラグインで出力される画像をアイキャッチ画像から記事内の最初の画像にする方法

おお!これだよこれ!と大はしゃぎしながら試してみた結果
見事に記事本文の先頭から一番最初にある画像をサムネイル用として設定してくれるようになりました。

めでたしめでたし。
となればよかったのですが、なりません。

本来、og:imageで複数枚の画像を指定しておけば、複数の画像からサムネイルを選択してシェアできるのです。
それが分かってるとちょっと悔しいのでなんとかしてみたくなったのです。

というわけで話が長くなりましたが、
WP-OGPを素人がいじくりまわしてマルチサムネイル対応版ぽいものにしてみました。
元々がGPL2ライセンスだったので、
ソース冒頭のコメント部分(WPのプラグイン画面に表示されたりするところ)に

  • 改変版であること
  • 改変した日時
  • オリジナルのバージョンとは違うということ
  • ライセンスは大元のままGPL2であるということ

を記載してあります。
一応ここにも書いといたほうがいいのかな?


このページにあるWP-OGP multi thumbnails modは
オリジナルのWP-OGPとは別のものです。
バージョンは「1.0.5.1」としてあります。
公開日時は2011年6月3日とします。
ライセンスはGPL2です

ダウンロードはこちら(要自己責任)

wp-ogp-multi-thumbnail-mod.zip
 


追記:色々アホなミスがあったので修正しました。
とりあえずそれっぽく動くはずです。

こんな感じ。

<meta property="og:title" content="WP-OGPをマルチサムネイル対応に多分した" /> 
<meta property="og:type" content="article" /> 
<meta property="og:image" content="http://sinack.com/wp-content/uploads/2011/06/tanin_makase.png" /> 
<meta property="image_src" content="http://sinack.com/wp-content/uploads/2011/06/tanin_makase.png" /> 
<meta property="og:image" content="http://sinack.com/wp-content/uploads/2011/06/doushiyoumonai.png" /> 
<meta property="image_src" content="http://sinack.com/wp-content/uploads/2011/06/doushiyoumonai.png" /> 
<meta property="og:image" content="http://sinack.com/wp-content/plugins/wp-ogp-multi-thumbnail-mod/default.jpg" /> 
<meta property="image_src" content="http://sinack.com/wp-content/plugins/wp-ogp-multi-thumbnail-mod/default.jpg" /> 
<meta property="og:url" content="http://sinack.com/wordpress/wp-ogp-multithumb.html" /> 
<meta property="og:site_name" content="Sinack" />
<meta property="fb:admins" content="なんちゃら" /> 
<meta property="fb:app_id" content="かんちゃら" /> 

ね!

facebook DEVELOPERS – URLリンター

ここで確認してみて、エラーが出ていたらそれは良くないと思うのです。
ご注意とか言われるけど、複数回指定していいって言ってたじゃん・・・

というわけなんですが、本当にワタクシPHPってよく知らないのですよ。
一応普通に動くかくらいはテストしたりしたんですけど、やりはじめたのが今朝方なので
夜中のテンション+眠気も相まって、最高のカオスっぷりを発揮しています。
ので何かあっても責任負えません。

あと、これを見ているみなさんは多分99%俺よりPHP詳しい人だと思うので
おかしかったりしたら直しちゃったり、おかしいよとか教えてください。
そもそも元のコードをいじりたくなかったので強引に攻めています。

あ、あとそうでした。

オリジナルだと
facebookアプリIDの部分が
fb:appid とかtypoってたので fb:app_id に変えておきました。

以上です。
誰かが少しでも幸せになれば嬉しいです。
 
本音:一人でもこれ使った人がWordpressおかしくなったりしませんように。

最後まで読んで頂きありがとうございます。
よろしければ右のボタンからフォロー・RSS購読していただけると幸いです。
暇つぶしの相手に最適です。

  • follow me
  • subscribe rss
  • このエントリーをはてなブックマークに追加
  • Pin It

“WP-OGPを改造してマルチサムネイル対応&正しいプロパティ表記にしました” への6件のフィードバック

  1. […] WP-OGPを改造してマルチサムネイル対応&正しいプロパティ表記にしました | Sinack […]

  2. ロゴスタ より:

    こちらの記事で画像表示される様になりました!感謝です!

  3. 質問です。
    ギャラリー形式(※1)で画像を並べてあるページでは、メタタグOGPにリストアップされるのは、「プラグインのデフォルト画像」1つだけ、というのが、仕様的に、正しいのでしょうか?

    「ギャラリーページ」を示すデフォルト画像、或いは、ギャラリーとして配置されてる全画像を挙げるのが良いのでしょうか?

    ※1…Wordpressの記事編集画面で、[gallery ほげほげ link="file"]となるアレです。
     ページ例→ http://wordpress-book.webdesignmatome.com/news/info/infogallery/

    • S.i.N (シン) より:

      コメントありがとうございます。

      og:imageの仕様的には、複数枚の画像をog:imageとして設定しても問題ないので、正しい正しくないで言えば複数指定は正しいと言えると思います。

      ただ、ギャラリーページに限らず、複数の画像があるページに対して
      単一のog:imageしか設定されてない、という状況も間違いではないので
      こちらも仕様的には正しいと言えると思います。

      ちょっと調べてみたのですが、fbのシェアでは、シェア時にog:imageが選択できるのに対して、いいねの場合、選択できずに1枚がfb側で勝手に選ばれてしまうことがあるみたいなので、そういう状況を避けたい場合は

      og:imageで複数の画像を設定しないほうがいいのかもしれません。
      参考:http://blog.sixapart.jp/2012-06/ogimage.html

      的外れな回答になっていないか少し不安ですが、参考になれば幸いです。

  4. […] つけたのが以下のサイト。こちらのサイトの中断にある、WP-OGP プラグインの改変版である。 WP-OGPを改造してマルチサムネイル対応&正しいプロパティ表記にしました | Sinack こちら […]

コメントを残す

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