MovableTypeにソーシャルボタンを設置するプラグインを導入

MovableTypeでZenbackを使わずに、GUIで手軽にソーシャルボタンを付けたい！という要望が周りからありまして、良いプラグインがあったので設置しました。　今回はその記録をご紹介したいと思います。

OpenGraphLike プラグイン、いいね！

採用したのが、金子順さんが作って配布されている「OpenGraphLike」プラグインです。

設置できるソーシャルボタンもTwitter, Facebook, Google+ をはじめ、Tumblrやmixi、はてなブックマークなど多岐に渡っている点がお気に入りで、さらにMovableTypeのプラグイン管理画面からGUIで簡単に表示内容が設定、変更可能なのがすばらしいです。

意外と面倒なんですよね、こういう複数のボタン設置というのは。

さて、設置方法についてはOpenGraphLikeプラグインの紹介ページが分かりやすいと思いますが、簡単なのでここでも説明を。

まずインストールですが、ZIPファイルを解凍するとOpenGraphLikeフォルダができるので、これを /mt/plugins/ ディレクトリにアップロード。　これで完了です。

次に設定ですが、MovableType管理画面で導入したいブログを選択し、「ツール＞プラグイン」でプラグインリストを表示させると「OpenGraphLike 1.0」という行があるので、クリックして「設定」で各種ソーシャルボタンの設定ができます。　もちろん日本語にも対応してます。

設定ができたら、テンプレートページへのタグ導入です。　まず、headタグ内に<$MTOpenGraphMeta$>タグを記述します。　こんな感じ。

<title><$MTEntryTitle$></title>
<$MTOpenGraphMeta$>
<meta name="Description" content="<$MTEntryExcerpt$>" />

Tumblrボタンも表示するならば、</body> タグ直前に <$MTTumblrJS$>タグも記述します。

OpenGraphLikeプラグインではソーシャルボタンごとに独自のテンプレートタグが用意されているのでそれを利用します。　使えるボタンとテンプレートタグは以下のとおり。

このプラグインの仕様なんですが、MovableType5.0以上とあります。　私が設置したMovableTypeのバージョンは4.2だったんですが、基本的には問題ありませんでした。

インストールと設定をひと通り終えて、テンプレートページに「はてなブックマーク」用の設置タグ（<$MTHatenaBookmarkButton$>)を記載して再構築したのですが、ページ全体に文字化けが起こってしまいました。

今回、はてなブックマーク用のボタンの設置は必須要望ではなかったので、テンプレートタグの記述を外すことで問題回避できましたが、設置が必須の場合は注意が必要です。

もちろん、<$MTLikeButtons$> タグを導入した場合も文字化けします。

普通にタグを並べると、iframeやdivタグがズラーッと並ぶ形になるため、「<div class=”social-button”>…</div>」等でくくっておきましょう。

次に、それぞれのボタンに付けられたCSSを上書きしてレイアウトを揃えるために以下のコードをCSSファイルに追加しましょう。

.social-button iframe,
.social-button a,
.social-butoon img,
.social-button div {
vertical-align: top !important;
}

!important をつけないと直接スタイル指定に負けてしまいます。

これで以下のような整然と並んだソーシャルボタンレイアウトになると思います。

以上で終了です。　お役に立てば幸いです。　では！

2012-11-12