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

opengraphlike-title.png

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

OpenGraphLike プラグイン、いいね!

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

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

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

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

インストール&設定

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

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

opengraphlike-setting.png

エントリーテンプレートへのMTタグ導入

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

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

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

ソーシャルボタンごとの独自テンプレートタグを記述

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

ボタン名 テンプレートタグ 備考
Facebook いいね!ボタン <$MTFaceBookLike$>  
Google+ボタン <$MTGooglePlusButton$>  
Twitter ツイートボタン <$MTTweetButton$>  
Evernoteクリップボタン <$MTEvernoteButton$>  
はてなブックマークボタン <$MTHatenaBookmarkButton$>  
Tumblrボタン <$MTTumblrButton$>  
mixiチェックボタン <$MTMixiButton$> mixi Check Keyが必須
Greeいいねボタン <$MTGreeButton$>  

MovableType4.2でもいけました

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

はてなブックマーク用の設置タグで文字化けが起こる

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

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

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

綺麗にそろえて表示するにはCSSの調整が必要

普通にタグを並べると、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 をつけないと直接スタイル指定に負けてしまいます。

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

opengraphlike-title.png

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

このページをシェアする

コメントを残す

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

2012-11-12