Webデザイナーブログから学ぶホームページ制作

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

WordPress(ワードプレス)に四角いSNSシェアボタンを配置する方法を解説します。

WordPress(ワードプレス)の投稿のループ内の表示したい位置にコードを追加してください。
WordPress(ワードプレス)の場合は、テンプレート内の「content.php」や「single.php」のテンプレートファイル等に記述します。
動的にタイトルを表示するために「php the_title」を記述。
記事毎のURLを表示するために「php the_permalink」を記述。
※Twitter・Facebook・はてなブックマーク・Pocket・LINEボタンを設置出来ます。

<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title();?>&via=designer_king&tw_p=tweetbutton&related=designer_king" target="_blank">Twitter</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">Facebook</a>

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank">はてブ</a>

<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>

<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>

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

<!-- いいね -->
<div id="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title();?>&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=<?php the_permalink(); ?>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
</li>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank">はてブ</a>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>
</li>
</ul>
</div>
<!-- いいね -->

#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;
}

以上で設定完了となりますが、簡単に設定ができますね。
WordPress(ワードプレス)の場合は、SNSシェアボタンを自動で設置してくれるプラグインもありますが、プラグインを沢山入れることで表示速度やパフォーマンスが落ちるので出来る限りプラグインを使わず軽量化して配置することをおすすめ致します。