表示が爆速に！WordPressにオリジナルのシェアボタンを実装する方法

TwitterやFacebookなどの公式シェアボタンは、サイトに実装することでそれ単体だけでも表示がかなり遅く、問題の1つになりがちです。来年からのモバイルファーストインデックスも意識するのであれば、ぜひともこの問題は解決しておきたいところ。

そこで今回は、WordPressのオリジナルシェアボタンを実装し、サイト表示の高速化を図る方法をご紹介します。私のサイト制作でも実装の需要が多いので、備忘録的な内容となります。

シェアボタンのデザインは統一させた方がいいと思うよ

以前は、さまざまなSNSボタンを並べてあっても、サイズやかたちがある程度そろっていたので、きれいに表示させることができておりました。

しかし、ここ数年でサイズもバラバラになり、Twitterはカウント数の表示がなくなり、facebookはバルーン形式じゃなくなったり…、まったく統一感のないシェアボタンの一覧になってます。

さらに表示がかなり遅い。このブログでもFacebookページのいいねボタンだけは公式のものを利用しているのですが、そのボタンの表示が遅くイライラしているところです。

公式のボタンはさっさと捨てて、オリジナルボタンにしてしまいましょう！
デザインも表示速度もかなり改善できますので、訪問者にとって良い閲覧環境を与えることができますしね。

オリジナルシェアボタンのデモ

まずは、実際のデモ表示をご覧ください。
実際にシェアもできますので、ぜひクリックお願い致します。

※PC表示でも、スマホ表示でも最適化したボタンを実装できます。このデモボタンを両方のデバイスにてぜひご確認ください。

WordPressにオリジナルシェアボタンを実装する

実装はとても簡単です。
オリジナルシェアボタンを実装したい場所に、以下を記述します。

<ul class="share-btn">
	<li class="ha">
		<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo get_encoded_title( get_the_title() ) ?>" target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>ブックマーク</span>
		</a>
	</li>
	<li class="tw">
		<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>ツイート</span>
		</a>
	</li>
	<li class="fb">
		<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>シェア</span>
		</a>
	</li>
	<li class="pk">
		<a href="https://getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php echo get_encoded_title( get_the_title() ) ?>" target="blank" class="balloon-btn-link pocket-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>Pocket</span>
		</a>
	</li>
</ul>

4,9,14,19行目は、それぞれのボタンに表示させるテキストが記述されておりますので、好みのテキストに変更してみてください。ボタンの順番は『はてなブックマーク』『Twitter』『Facebook』『Pocket』です。

そして、以下をCSSに記述することでデザインが適用されます。

ul.share-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.share-btn li {
	width: 24%;
	font-size: 1.4rem;
}

.share-btn li a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 0;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.share-btn li:hover {
	opacity: .7;
}

.tw {
	border-radius: 4px;
	background-color: #55ACEE;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.fb {
	border-radius: 4px;
	background-color: #315096;
	text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
.ha {
	border-radius: 4px;
	background-color: #008FDE;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.pk {
	border-radius: 4px;
	background-color: #F03E51;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.tw span:before {
	content: '\f099';
	padding-right: .4em;
	font-family: FontAwesome;
}
.fb span:before {
	content: '\f09a';
	padding-right: .4em;
	font-family: FontAwesome;
}
.ha span:before {
	content: 'B!';
	padding-right: .4em;
	font-size: 1.7rem;
	font-family: Verdana;
	vertical-align: middle;
}
.pk span:before {
	content: '\f265';
	padding-right: .4em;
	font-family: FontAwesome;
}

@media screen and (max-width: 668px){
	.tw span:before,
	.fb span:before,
	.ha span:before,
	.pk span:before {
		display: block;
		padding: 0;
		font-size: 1.8rem;
		line-height: 1.2;
		text-align: center;
	}
}

横幅の指定がないので、記述した部分の親要素の横幅いっぱいに表示されます。もしサイズを指定したい場合には、ul.share-btnに指定してください。

また、レスポンシブデザインを採用し、スマートフォンに対応させております。ブレイクポイントを668pxに指定してありますが、好みで変更してみてください（72行目）。

あと、flexboxを採用してレイアウトしてありますので、モダンブラウザと、IE11以降の対応となります。もし、IE１０以前も対応の場合はdisplay: inline-block;などを利用すると対応できますが、もうIE11からの対応でも問題ないと思いますよ。