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

最近のホームページを見るとTwitter、Facebook、LINE等のシェアボタンを設置しているサイトも増えてきています。それぞれのSNS公式のシェアボタンや外部サービスを利用するとJavaScriptを配置して読み込みをする為、ページの表示速度が遅くなる原因となります。

WordPress(ワードプレス)に丸いSNSシェアボタンを配置する方法を解説します。
※今回はアイコン画像を用いて設置する方法です。

SNSシェアボタン用のScriptを記述します。
※head内でもファイル内でも記述する個所はどちらでも問題ありません。

<script>
jQuery(function($){
	$('.socialBtn li a').click(function(){
	window.open(this.href,'popup','width=600,height=300');
	return false;
	});
});
</script>

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

<a class="twitter icon-twitter" href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_twitter.png" alt="twitterアカウント"></a>

<a class="facebook icon-facebook" href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_facebook.png" alt="facebookアカウント"></a>

<a class="hatena icon-hatena" href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_hatena.png" alt="はたなブックアカウント"></a>

<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank" rel="nofollow"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_pocket.png" alt="pocket"></a>

<a class="line icon-line" href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="LINEでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_line.png" alt="LINEアカウント"></a>

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

<ul class="socialBtn01">
<li><a class="twitter icon-twitter" href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_twitter.png" alt="twitterアカウント"></a></li>
<li><a class="facebook icon-facebook" href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_facebook.png" alt="facebookアカウント"></a></li>
<li><a class="hatena icon-hatena" href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_hatena.png" alt="はたなブックアカウント"></a></li>
<li><a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank" rel="nofollow"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_pocket.png" alt="pocket"></a></li>
<li><a class="line icon-line" href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="LINEでシェアする"><img src="<?php echo esc_url( home_url( '/' ) ); ?>img/icon_line.png" alt="LINEアカウント"></a></li>
</ul>

ul.socialBtn01 {
	text-align:center;
	margin:3% 0 3% 0;
	padding:3% 0 2% 0;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
ul.socialBtn01 li{
	width:8%;
	text-align:center;
	margin:0 1% 0 1%;
	display:inline-block;
}
ul.socialBtn01 li img{
	width:100%;
	height:auto;
}
ul.socialBtn01 li a {
	display: block;
	text-decoration: none;
	text-align: center;
}
ul.socialBtn01 [class^="icon-"]:before,ul.socialBtn [class*=" icon-"]:before {
	margin-right: 5px;
}

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