Movable Type(ムーバブルタイプ)に四角いSNSシェアボタンを配置する方法

2021.12.19｜Movable Type

最近のホームページを見るとTwitter、Facebook、LINE等のシェアボタンを設置しているサイトも増えてきています。それぞれのSNS公式のシェアボタンや外部サービスを利用するとJavaScriptを配置して読み込みをする為、ページの表示速度が遅くなる原因となります。
また、いいねボタンやシェアボタンの数や画像を利用して配置する事も同じように、表示速度を遅くする恐れがある為、パフォーマンスに影響しないようにcssのみでボタンを配置します。

Movable Type(ムーバブルタイプ)に四角いSNSシェアボタンを配置する方法を解説します。

SNSシェアボタンを配置する方法

テンプレートファイル内にコードを追加

Movable Type(ムーバブルタイプ)の投稿のループ内の表示したい位置にコードを追加してください。
Movable Type(ムーバブルタイプ)の場合は、テンプレート内の「記事の詳細」のテンプレートファイル等に記述します。
動的にタイトルを表示するために「mt:EntryTitle」を記述。
記事毎のURLを表示するために「mt:EntryPermalink」を記述。
※Twitter・Facebook・はてなブックマーク・Pocket・LINEボタンを設置出来ます。

Twitterツイートボタン

<a href="http://twitter.com/share?url=<$mt:EntryPermalink$>&text=<$mt:EntryTitle$>&via=designer_king&tw_p=tweetbutton&related=designer_king" target="_blank">Twitter</a>

Facebookシェアボタン

<a href="https://www.facebook.com/sharer/sharer.php?u=<$mt:EntryPermalink$>" target="_blank">Facebook</a>

はてなブックマークボタン

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<$mt:EntryPermalink$>&title=<$mt:EntryTitle$>" target="_blank">はてブ</a>

Pocketボタン

<a href="http://getpocket.com/edit?url=<$mt:EntryPermalink$>" target="_blank">Pocket</a>

LINEで送るボタン

<a href="http://line.me/R/msg/text/?<$mt:EntryTitle$>%0D%0A<$mt:EntryPermalink$>">LINE</a>

まとめてSNSシェアボタンリストで配置

シェアボタンをまとめてリスト表示する方法を解説します。

記事の詳細テンプレートに追加

<!-- いいね -->
<div id="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/share?url=<$mt:EntryPermalink$>&text=<$mt:EntryTitle$>&via=designer_king&tw_p=tweetbutton&related=designer_king" 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>
<!-- はてなブックマーク -->
<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$>%0D%0A<$mt:EntryPermalink$>">LINE</a>
</li>
</ul>
</div>
<!-- いいね -->

cssファイルに追加

#share{
	width:100%;
	margin:auto;
	text-align:center;
	padding:10px 0 10px 0;
	clear:both;
}
#share ul{
	height:auto;
}
#share li{
	font-size:14px;
	display:inline-block;
	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;
}