WordPressプラグイン WP-OGPの実装とカスタマイズ

2011年06月21日 18:16 正午の月齢：19.6 月名：更待月 潮汐：中潮 月齢:19.6[更待月] 潮汐:中潮 | In WordPress | No Comments(旧暦2011年05月20日・ 赤口)

← ‌ →

この記事を読むのに必要な時間の目安: 2分ぐらい

「いいね」ボタンをさらに有効にするために、OGPをパワーアップ!! テーマファイルに直接埋め込むのをやめて、プラグインWP-OGPを使ってみました。fb:adminsとfb:appidを設定してあげるだけで、meta要素を生成してくれます。また記事の1つ目の画像ファイルを引用してくれるので、Facebookでの訴求効果もバッチリ。

しかし残念なことにどうしても取得したtitleが文字化けしてしまうので、$data['og:title'] = get_bloginfo('name');を$data['og:title'] = 'susu type automatic coupler';と固定文字列にカスタマイズ。

さらに、

function get_wpogp_tag($property, $content) {
return "<meta property=\"{$property}\" content=\"".htmlentities($content, ENT_NOQUOTES, 'UTF-8')."\" />";
}

を

function get_wpogp_tag($property, $content) {
return "<meta name=\"{$property}\" content=\"".htmlentities($content, ENT_NOQUOTES, 'UTF-8')."\" />";

というふうに変更して、validなXHTMLにします。名前空間xmlns:ogをhtml-lintが理解してくれればなおさらいいンだケド。

関係あるかも知れない記事

WordPressにFacebookのいいねボタンをつけてみた。

2011年06月17日 0:33 正午の月齢：15.6 月名：満月 潮汐：大潮 月齢:15.6[満月] 潮汐:大潮 | In WordPress | No Comments(旧暦2011年05月16日・ 友引)

← ‌ →

この記事を読むのに必要な時間の目安: 6分ぐらい

「Second Life」の虚無感、「mixi」の閉鎖感、「Twitter」の孤独感。巷で流行したwebサービスはことごとく肌に合わなかったのですが、なぜか「Facebook」だけは結構楽しんでいます。(今のところ、ですが…)

さて、Facebookのキモチイイところは、端的に言えば「連続感」。SNS内外を問わず高速に連携します。そのうちの機能のひとつ「いいね(Like)」ボタンを実装してみました。

初めはWordPressのプラグインをいくつか試してみたのですが、どうも思い通りに動いてくれません。「いいね」ボタンの位置がおかしかったりします。結局いつものようにテーマファイル内に埋め込むことにしました。

  1. FacebookでApp IDを取得します。
    http://developers.facebook.com/setup/
    ここに自分のブログのURLとタイトルを入れて取得します。
    create-new-app
  2. 指示に従っていろいろと入力するとApp IDとサンプルコードが手に入ります。
    コピペでもいいのですが、html完全保存しておくといいでしょう。
    create-an-app
  3. 「いいね」ボタン設置に便利なソーシャルプラグイン「Like Button」があります。これを使うと各種設定を入れていくだけでコードを生成してくれます。説明書きは全部英語ですけど。
    like-button
    インラインフレームを使うものと、XFBMLを使うものの2種類のソースを吐き出してくれますが、そもそも当サイトのようにXHTMLで記述している場合はXFBMLしか選択の余地はないです。
  4. わざわざLike Buttonで生成しなくても、App IDと同時に書かれているサンプルコードをそのまま使えば、簡単にいいねボタンは作れます。

そうしてコードを埋め込んだものの、これで終わりではありません。というか、ここからがいろいろと大変でした。その理由とは…

早速「いいね」ボタンを押してみると、コメントを入力するフォームが開くのですが、ここに表示される画像がどうも気に入りません。記事内の画像を引っ張ってるようなのですが、関係ない画像(Another HTML-lint たいへんよくできましたバナー)だったりします。これではあまりにも不細工なので、まずはこれを解決します。そのためにはmeta要素をヘッダーに入れてやればよいとのことなので、

<meta property="og:title" content="<?php wp_title(' '); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="<?php bloginfo('template_directory'); ?>/images/banner.gif" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="fb:admins" content="137379896338515"/>

という感じでWordPressの関数を使いながら記述。いつも当サイトのバナーを表示することにしました。

次に、フォームが開いたときに記事のタイトル(日本語部分だけ)が盛大に文字化けします。scriptタグ内に文字コードを指定してもダメ。これを解決するために苦渋の決断をしました。それは「日本語を使った記事のタイトルをあきらめる」こと。

<meta property="og:title" content="<?php wp_title(' '); ?>" />

を、

<meta property="og:title" content="susu type automatic coupler" />

にしました。力任せな方法ですが、タイトルは化けなくなりました。ちっとも根本的な解決ではないですが別にいいんです。(ホントはちょっと悔しい。)

最後に、XHTML1.0 strictに準拠したマークアップの確認。Another HTML-lint gatewayでは<div id="fb-root"></div>の間に何も文字がないということで減点されるので、<div id="fb-root">&#8204;</div>という風に&#8204;(zero width non-joiner)を入れてごまかします。それからmeta要素のproperty属性で減点を喰らうので、name属性に変更しました。それでも正しく動いています。名前空間の宣言については特にいじっていません。

あとは今回の改造には関係ないのですが、WP-PageNaviを最新のものにしたらやたらと減点されたので、プルダウン式にしたりブロック要素で囲んだりして何とか100点を維持しています。

気が向いたら「いいね」ボタンを押してみて下さいませ。

関係あるかも知れない記事

WordPress プラグイン「famous 100 poems」公開。

2011年06月01日 0:49 正午の月齢：29.2 月名：月隠 潮汐：大潮 月齢:29.2[月隠] 潮汐:大潮 | In WordPress | No Comments(旧暦2011年04月30日・ 先負)

← ‌ →

この記事を読むのに必要な時間の目安: 2分ぐらい

WordPressには、もともとプラグインが1つ入っています。

Hello Dolly(ハロー・ドリー)

これはただのプラグインではありません。ルイ・アームストロングによって歌われた最も有名な二つの単語に要約される、同一世代のすべての人々の希望と情熱を象徴するものです。これは世界で最初のWordPress公式プラグインです。このプラグインが有効にされると、プラグイン管理画面以外の管理パネルの右上に「ハロー・ドリー」からの歌詞がランダムに表示されます。

WordPress パッケージに含まれているデフォルトプラグイン

しかし、ルイ・アームストロングなんて知らないし、何かよくわからない…。そんなわけでこのプラグインは停止していました。でも何かに使えそう。

そんなわけで、アレンジして作ったのが「famous 100 poems」。管理画面の右上にランダムに小倉百人一首の歌を表示する、純和風なプラグインです。

けど、同じようなことを考えている人はいるようでして、1年も前に先を越されていました。「WordPressのプラグイン Hello Dollyを楽しくカスタマイズ 日本語で使おう」では画像まで入れてもうやりたい放題!!

最近はプラグインの編集も管理画面内でできてしまうので、好きな言葉やメッセージに変えていろいろと楽しんでしまいましょう。

関係あるかも知れない記事

WordPress 3.1.1にしました。

2011年04月13日 0:12 正午の月齢：9.9 月名：十日月 潮汐：長潮 月齢:9.9[十日月] 潮汐:長潮 | In WordPress | 2 Comments(旧暦2011年03月11日・ 先勝)

← ‌ →

この記事を読むのに必要な時間の目安: 1分ぐらい

2.9あたりから、別に機能やバグに困っていなかったのでそのままでもいいやと考えることが多くてアップデート(アップグレード)をサボる傾向にあったのですが、なんとなく気が向いたので3.0.5から3.1.1にしてみました。

いつものように自動更新の後に、formatting.phpの文字置換まわりを自分なりにカスタマイズして終了。

そろそろテーマのデザインを変更しようかと考えているのですが、こちらもMoonPhaseやアレやコレやと散々いじりまくっているのでなかなか腰が重いです。あと半年で当サイト開設5周年なので、それに合わせてテーマを一新できたらいいナー。

関係あるかも知れない記事

WordPress 3.0.5にしました。

2011年02月12日 16:46 正午の月齢：9.4 月名：十日月 潮汐：長潮 月齢:9.4[十日月] 潮汐:長潮 | In WordPress | 1 Comment(旧暦2011年01月10日・ 仏滅)

← ‌ →

この記事を読むのに必要な時間の目安: 1分ぐらい

WordPress 3.0以降放置していたのですが、さすがにそろそろアップデートしておくべきかなと考えて、3.0.5にしました。

自動アップデート後にmedia.phpやformatting.phpをいつもどおり再カスタマイズして、今回の作業は終了です。

とくに何が変わったのか、全然わかりません…。詳しくはWordPress 3.0.5 日本語版リリースのお知らせを参照してください。

関係あるかも知れない記事

←前のページ - 次のページ→

powered by WordPress. designed by susu. Entries and comments feeds.