2021.12.19|SNS活用術

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

WordPress(ワードプレス)に四角いSNSシェアボタンの設置方法

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

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

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

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

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

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>
Facebookシェアボタン
<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>
Pocketボタン
<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>
LINEで送るボタン
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>

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

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

phpファイルに追加
<!-- いいね -->
<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>
<!-- いいね -->
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;
}

まとめ

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