らっぱ王子

このブログではMovable Typeのプラグイン、OpenGraphLike でSNSボタンを設置していたのだけど、仕様が変わって正しく表示されないものが出てきた。最近、よく上の画像のようなSNSボタンを見かけるので、これを取り入れてみようと調べてみた。

すると、やはり近頃のブログツールはWordPressが主体で、そちら方面のプラグインは数多く見つかるのだけど、このブログで使ってるMovable Typeのものは、なかなかない。WordPressいいなぁ。やってみたいなぁ…だけど、このブログはさくらインターネットのライトプランなので、WordPressは使えない。（方法はないことはないのだけど）

いろいろ調べて、こちらのサイトの方法でうまくいったのでメモっとく。
Movable Type(ムーバブルタイプ)にSNSシェアボタンを設定する設置方法（ウェブデザイナーのお仕事）

MTのテンプレートに以下HTMLを追加する。※修正済み

<!-- いいね -->
<div id="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/share?url=<$mt:EntryPermalink$>&text=<$mt:EntryTitle encode_url="1"$>%ef%bc%9a<$mt:BlogName encode_url="1"$>" target="_blank">Twitter</a>
</li>
<!-- Facebook -->	
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<$mt:EntryPermalink$>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<$mt:EntryPermalink$>" target="_blank">Google+</a>
</li>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<$mt:EntryPermalink$>&title=<$mt:EntryTitle$>" target="_blank">はてブ</a>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<$mt:EntryPermalink$>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<$mt:EntryTitle encode_url="1"$>%ef%bc%9a<$mt:BlogName encode_url="1"$>%0D%0A<$mt:EntryPermalink$>" target="_blank">LINE</a>
</li>
</ul>
</div>
<!-- いいね -->

TwitterとLINEは表示をちょっと改造させてもらった。あと、Shift-JISでは「はてブ」の日本語の表示に不具合が出たので、UTF-8にしときました。

そして、上記HTMLに以下CSSを割り当てる。

@charset "utf-8";

#share ul{
	height:auto;
}
#share li{
	font-size:14px;
	float:left;
	text-align:center;
	width:84px;
	margin-right:1%;
	margin-bottom:8px;
	border-radius:3px;
	list-style:none;
}
#share li.share-twitter{
	background:#55acee;
	box-shadow:0 2px #2795e9;
}
#share li.share-twitter:hover{
	background:#83c3f3;
}
#share li.share-facebook{
	background:#3b5998;
	box-shadow:0 2px #2d4373;
}
#share li.share-facebook:hover{
	background:#4c70ba;
}
#share li.share-google{
	background:#dd4b39;
	box-shadow:0 2px #c23321;
}
#share li.share-google:hover{
	background:#e47365;
}
#share li.share-hatena{
	background:#2c6ebd;
	box-shadow:0 2px #225694;
}
#share li.share-hatena:hover{
	background:#4888d4;
}
#share li.share-pocket{
	background:#f13d53;
	box-shadow:0 2px #e6152f;
}
#share li.share-pocket:hover{
	background:#f26f7f;
}
#share li.share-line{
	background:#00C300;
	box-shadow:0 2px #009d00;
}
#share li.share-line:hover{
	background:#2bd92b;
}
#share a{
	display:block;
	height:27px;
	padding-top:6px;
	color:#ffffff;
	text-decoration:none;
}
#share a:hover{
	text-decoration:none;
	color:#ffffff;
}

こちらも、UTF-8で保存し、先頭に @charset "utf-8"; を加えた。

これで各記事にSNSボタンを設置できました。しかしすごいなぁ、CSSで ul li にこんな横並びのボタン風の体裁にできるとは。

追記
IE11だと、TwitterとLINEで400 エラーが出て動作しなかった。IE11の設定を以下のようにすると直る。 ツール → インターネット オプション → 詳細設定 → インターナショナル → イントラネット以外の URL の UTF-8 クエリ文字列を送信する にチェック。
閲覧者側で設定しないといけないので、エンコードとか指定しないといけないっぽい。対処が難しいな…　文字列を英数字だけにしとけば大丈夫そうだけど、タイトル：サイト名は入れときたいしなぁ。

追記2
タイトルとブログ名のタグに encode_url="1" を入れるとURLエンコードされる！知らなかった！以下のように修正しました。これでIE11でも大丈夫。
<$mt:EntryTitle encode_url="1"$>
<$mt:BlogName encode_url="1"$>