MTにSNSボタンを設置する

Movable Typeのテンプレートを公式でリリースしている「Rimo」に入れ替えたところ、SNSボタンが初期設定されていた。

8296.png

当サイトでは以前独自にSNSボタンを設置していたが、Google+が廃止となったのを機に、利用頻度も低いだろうからと撤去していた。

8294.png

でも、せっかくテンプレートにあるので利用することにし、ついでにいろいろ改変。

テンプレート

表示文字や順番を変更、「はてなブックマーク」を追加。初期設定では各公式トップページへのリンクだったのを、記事をシェアする形のリンク記述に変更。参考サイト様の情報を一部流用させて頂いた。

<section class="follow-action">
<ul>
<li class="twitter"><a href="//twitter.com/share?url=<mt:CanonicalURL>&text=<mt:EntryTitle encode_html="1">" target="_blank"><span>twitter</span></a></li>
<li class="facebook"><a href="//www.facebook.com/sharer/sharer.php?u=<mt:CanonicalURL>" target="_blank"><span>facebook</span></a></li>
<li class="hatena"><a href="//b.hatena.ne.jp/add?mode=confirm&url=<mt:CanonicalURL>&title=<mt:EntryTitle encode_html="1"> - <mt:BlogName encode_html="1">" target="_blank"><span>hatena</span></a></li>
<li class="feedly"><a href="//feedly.com/i/subscription/feed/<mt:Link template="feed_recent">" target="_blank"><span>feedly</span></a></li>
</ul>
</section>

スタイルシート

ボタンが四つなので、幅を4分の1以下の「23%」にしてある。(きっちり25%だとはみ出す)

.follow-action ul{
text-align: center;
}
.follow-action ul li{
width: 23%;
margin: 0 0.1em;
display: inline-block;
}
.follow-action ul li a{
width: 100%;
display: inline-block;
padding: 10px 10px 10px 60px;
color: #ffffff;
text-align:left;
}
.follow-action ul li.twitter a{
background: #55ADEF url(<mt:BlogURL>icon-follow-twitter.png) no-repeat 10px 3px;
}
.follow-action ul li.facebook a{
background: #3B579E url(<mt:BlogURL>icon-follow-facebook.png) no-repeat 10px 3px;
}
.follow-action ul li.hatena a{
background: #00A4DE url(<mt:BlogURL>icon-follow-hatena.png) no-repeat 10px 3px;
}
.follow-action ul li.feedly a{
background: #89C131 url(<mt:BlogURL>icon-follow-feedly.png) no-repeat 10px 3px;
}

スマートフォンの場合、アイコンのみで文字を非表示に。サイズも微調整。

@media(max-width:480px) {
 
.follow-action ul li{
width: 22%;
}
.follow-action ul li a{
display: block;
height: 50px;
}
.follow-action ul li a span{
display: none;
}
.follow-action ul li.twitter a{
background: #55ADEF url(<mt:BlogURL>icon-follow-twitter.png) no-repeat 50%;
}
.follow-action ul li.facebook a{
background: #3B579E url(<mt:BlogURL>icon-follow-facebook.png) no-repeat 50%;
}
.follow-action ul li.hatena a{
background:#00A4DE url(<mt:BlogURL>icon-follow-hatena.png) no-repeat 50%;
}
.follow-action ul li.feedly a{
background: #89C131 url(<mt:BlogURL>icon-follow-feedly.png) no-repeat 50%;
}
 
}

アイコン部分は背景として設定。コピーするならば、URLなど各自で改変して下さい。Movable Type以外でSNSボタンを設置したい場合も、<mt:~>というMT独自タグを各自の環境のURLに置き換えて下さい。

icon   icon   icon   icon

実際の表示

パソコン。

8295.png

タブレット。

8298.png

スマートフォン。アイコンのみで、文字は非表示。

8297.png

一般的には「はてなブックマーク」ではなく「Pocket」や「LINE」なのだろうが、それは今後また考える。とりあえずコードだけメモしておく。

<a href="//getpocket.com/edit?url=<mt:CanonicalURL>" target="_blank">Pocket</a>
background: #f13d53;
<a href="//line.me/R/msg/text/?<mt:EntryTitle>%0D%0A<mt:CanonicalURL>">LINE</a>
background: #00C300;

share