高速化！自作SNSシェアボタンの作り方。本物に似ているけど微妙に違う、この違和感。ざっくりコピペできます。

作りました。今更。超いまさら。知っていますか？小柳ルミ子。

せっかく苦労してやったので、自作ＳＮＳシェアボタンの作り方を紹介します。
フラットデザインが味気ないとか思っている人、しっくり来ないと感じている方にオススメです。

オリジナルのシェアボタンはやたらめったら読み込みに時間が掛かるので、特に思い入れとか拘りがないのであれば切り替えた方が良いと思います。機能は一緒ですから。

似ているけど微妙に違うSNSシェアボタンを作る手順

取り敢えず、細かい話はさておき、これから紹介するコードをコピペすればすぐ完成します。
※これはStinger5の子テーマを使った場合の話です。人それぞれ微妙に違うと思いますが、多分だいたいいけるはずです。

①アイコンフォントをダウンロードして使えるようにしておく。
②はてブ用の関数をfunctions.phpに書く
③HTMLを書く
④CSSを書く
⑤プラグインでシャア数を表示させる

これで出来ます。

①WEBアイコンを駆使して、効率よく洒落れてみる

アイコンをダウンロードする

Webフォントアイコンをダウンロードします。
出来る人はこの段階から気合を入れて自作しても良いのですが、ドウラクのさわさわさんがアイコンを作成し、無料で配布されています。
・ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！

ありがたいことです。

ダウンロードしたら、テーマ直下にアップロードします。

は？と思いまいすよね。私は思いました。

アイコンを使える状態にするFFFTPの場合

先ほどのアイコンのファイルをデスクトップにダウンロードして置いておいて下さい。

まずFFFTPを立ち上げます。立ち上げて、接続は出来るものとして話を進めます。

右側の窓から自分のサイトのドメインを選択し、ダブルクリックでどんどん突き進んで行きます。
「public_html」
　⇩
「wp-content」
　⇩
「themes」
　⇩
「stinger-child」
　⇩←ここです。
ここが『テーマ直下』です。もう先には行かないで下さい。

そして、今度は左側。

左側の半開きになっているフォルダのアイコンをクリックすると、ファイルを選ぶ場所をパソコンの中から選べます。

デスクトップには「icomoon」がありますよね？

(解凍して)ありますよね？

それを右クリックしてアップロードします。

これで、

ダウンロードしたファイルをテーマ直下にアップ

したことになります。

アイコンを使えるようにする②。CSSの呼び出し。

header.phpを開いて、の前上に以下のコードを貼り付けます。

子テーマの人はこれ。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">

親テーマの人はこれ。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

これで「icomoon」専用のCSSを読み込めるようになりました。

完了です。

はてぶ準備。すぐ終わる。

はてなブックマーク用の準備

他は良いのですが、はてなブックマークだけは一手間あります。

「functions.php」に以下のコードを貼り付けます。
※子テーマを使っていてfunctions.phpがまっさらの人は、一番最初に＜?phpを付け足して下さい。
逆に、既に何かしら利用している人で、functions.phpの最後が?php＞になっている人は、それよりも上に書いて下さい。

function get_encoded_url($url){
  return urlencode(mb_convert_encoding($url, "UTF-8"));
}
function get_encoded_title($title){
  return urlencode(mb_convert_encoding($title, "UTF-8"));
}

SNSシェアボタンのリスト。HTML編

以下のコードを、「sns.php」か、それ用に新たにファイルを用意して、まるっと貼り付けて下さい。
調子にのって半角スペースじゃなくてTABを使ってみました。

<div class="sns">
	<ul class="snsb clearfix">
<!--Twitter-->
		<li class="twitter">
			<span class="set twitter-set">
				<span class="fukidashi twitter-fukidashi">
					<a href="https://twitter.com/search?q=<?php echo urlencode(get_the_permalink()); ?>" target="blank" class="twitter-fukidashi-link" rel="nofollow">
						<span class="social-count twitter-count">(´ε｀)
					</a>
				</span>
				<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>" target="blank" class="btn twitter-btn" rel="nofollow">
					<i class="icon-twitter"></i><span class=moji-t>ツイート</span>
				</a>
			</span>
		</li>
<!--はてブ-->
		<li class="hatena">
			<span class="set hatena-set">
				<span class="fukidashi hatena-fukidashi">
					<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" target="blank" class="hatena-fukidashi-link" rel="nofollow">
						<span class="social-count hatebu-count"><?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?></span>0
					</a>
				</span>
				<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="btn hatena-btn" rel="nofollow">
					<span class="hatena-blue"><i class="icon-hatena"></i></span><span class=moji-b>ブックマーク</span>
				</a>
			</span>
		</li>
<!--google+-->
		<li class="googleplus">
			<span class="set googleplus-set">
				<span class="fukidashi googleplus-fukidashi">
					<a href="https://plus.google.com/share?url=<?php echo rawurlencode(get_permalink($post->ID)) ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="googleplus-fukidashi-link" rel="nofollow">
						<span class="googleplus-count"><?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?></span>0
					</a>
				</span>
				<a href="https://plus.google.com/share?url=<?php echo rawurlencode(get_permalink($post->ID)) ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="blank" class="btn googleplus-btn" rel="nofollow">
					<i class="icon-googleplus"></i>
				</a>
			</span>
		</li>
<!--facebook-->
		<li class="facebook">
			<span class="set facebook-set">
				<span class="fukidashi facebook-fukidashi">
					<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="blank" class="fukidashi-link facebook-fukidashi-link" rel="nofollow">
						<span class="social-count facebook-count"><i class="fa fa-thumbs-up fa-fw"></i><?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?></span>
					</a>
				</span>
				<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="blank" class="btn facebook-btn" rel="nofollow">
					<i class="icon-facebook"></i><span class=moji-f>シェア</span>
				</a>
			</span>
		</li>
<!--pocket-->
		<li class="pocket">
			<span class="set pocket-set">
				<span class="fukidashi pocket-fukidashi">
					<a href="https://getpocket.com/edit?url=<?php the_permalink() ?>" target="blank" class="pocket-fukidashi" rel="nofollow">
						<span class="social-count pocket-count no-count">後で読む</span>
					</a>
				</span>
				<a href="https://getpocket.com/edit?url=<?php the_permalink() ?>" target="blank" class="btn pocket2-btn" rel="nofollow"> //クラス名をpocket-btnだとホンモノと被るのでpocket2にしておく。でも特にいじってないのであまり意味はありません。
					<i class="icon-pocket"></i><span class=moji-p>Pocket</span>
				</a>
			</span>
		</li>
<!--LINE-->
		<li class="line">
			<span class="set line-set">
				<span class="fukidashi line-fukidashi">
					<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="blank" class="fukidashi-link line-fukidashi-link" rel="nofollow">
						<span class="social-count LINE-count">送る</span>
					</a>
				</span>
				<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="blank" class="btn line-btn" rel="nofollow">
					<i class="icon-line"></i>
				</a>
			</span>
		</li>
<!--feedly-->
		<li class="feedly">
			<span class="set feedly-set">
				<span class="fukidashi feedly-fukidashi">
					<a href="http://feedly.com/index.html#subscription%2Ffeed%2F<?php urlencode(bloginfo('rss2_url')); ?>" target="blank" class="fukidashi-link feedly-fukidashi-link" rel="nofollow">
						<span class="social-count feedly-count"><?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?></span>0
					</a>
				</span>
				<a href="http://feedly.com/index.html#subscription%2Ffeed%2F<?php urlencode(bloginfo('rss2_url')); ?>" target="blank" class="btn feedly-btn" rel="nofollow">
					<i class="icon-feedly"></i><span class=moji-fe>Follow</span>
				</a>
			</span>
		</li>
	</ul>
</div>

CSS・SNSシェアボタンのリスト

以下のコードを、「style.css」の一番下に貼り付けます。

/*----手作り感満載のホンモノに微妙に似ているSNSシェアボタン---- */

/*--リストの余白とか並びとか--*/

ul.sns-btn{
	padding: 0;
	margin-bottom: 20px;
}
ul.sns-btn li {
	float: left;/*--これでリスト縦並びが左からの横並びになります。--*/
	list-style-type: none;/*--点とか数字とか付けません。--*/
	margin: 5px 8px 10px 0;/*スマホでもそのままつかうので折り返しのときうまいこと間隔が開くようにmargin(特に下)を設定。*/
}

/*--吹き出し部分とボタンの部分を合わせて「set」と名づけます。短くて楽だから。--*/

.set {
	display: block;
	width: 65px;
	height: 63px;
}

/*--setのリンク文字(というか、このシェアボタンの中に刻まれる文字は全部リンクになるので全部)の設定。
吹き出しだろうが、ボタン部分だろうが、何もしなければここの設定に従います。--*/

.set a {
	display: block;
	color: #222;
	font-size: 15px;
	text-decoration: none;
}

/*--吹き出し部分--*/

.fukidashi {
	position: relative;
	background: #fff;
	border: 1px solid #bbb;
	text-align: center;
	width: 63px;	/*--ボーダー(border)があるので全体(set)よりも2px狭い。※borderが1pxなら左右合わせて2pxだから。--*/
	height: 33px;
	border-radius: 3px;
	line-height: 33px;
	display:inline-block;
}
/*--吹き出しの下の三角の部分--*/

.fukidashi:after,
.fukidashi:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.fukidashi:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 3px;
	margin-left: -3px;
}
.fukidashi:before {
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #bbb;
	border-width: 5px;
	margin-left: -5px;
}

/*--吹き出しの中の部分--*/

a.fukidashi-link {
	font-weight: bold;/*--力強く太字で--*/
	text-align: center; /*--真ん中ですよね。そうですよね？--*/
	font-family: Arial;
	display: block;
}

/*--PocketとLINEは吹き出しに数字ではなく文字を入れるので少し小さく--*/

.no-count {
	font-size: 14px;
	font-weight: bold;
}

/*--ボタンの部分--*/

a.btn {
	width: 61px;/*--ボーダー(border)の分と、余白の分があるのでsetより4px狭くします。--*/
	height: 18px;
	line-height: 18px;
	position: relative;
	top: 4px;/*--吹き出しからちょっと離すために--*/
	border: 1px solid #bbb;/*--ボーダーの色で引き締まり具合も結構違う・・・--*/
	border-radius: 3px;/*--角は丸めたほうがそれっぽいですよね--*/
	text-align: left;
	display: block;
	padding-left: 2px;/*--アイコンと文字を組み合わせる関係で左に少々余白をとります。--*/
	font-size: 13px;/*--一応決めておきますが、個別にやるともはや関係なし--*/
	font-weight: normal;
	text-decoration: none;	
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );/*--この行から下がボタンの微妙なグラデーションを表現するための記述です--*/
	background:-ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
	background-color:#f9f9f9;
	color:#666666;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
	 -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
	 -moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
	 box-shadow:inset 1px 1px 0px 0px #ffffff;
}

/*----SNSボタンの中の文字です。
場合によっては微調整がすげーめんどくさいことになるかもしれません----*/

/*--TwitterとPocketの文字--*/

.moji-t, .moji-p {
	font-size: 11px;
	color: #333;
	font-weight: bold;
	margin-left: 2px;
}
.moji-p {
	font-size: 12px;/*--ほとんど一緒だけど、Pocketだけ12pxに--*/
}

/*--はてブ、Facebook、googole+、Feedlyの文字--*/

.moji-b, .moji-f, .moji-g,.moji-fe {
	font-size: 12px;
	color: #333;
	font-weight: bold;
	margin-left: 5px;
}
/*--hover マウスと載せた時の変化--*/
.moji-t:hover, .moji-b:hover, .moji-p:hover {
	color: #777;/*--Twitter、はてブ、Pocketはボタンの中の文字色が変わる。ラッキー７です--*/
	
}
.googleplus-btn:hover {
	background: #bd2e22;
}
.facebook-btn:hover {
	background: #6276b3;
}
.line-btn:hover {
	background: #00af00;
}
.feedly-btn:hover {
	background: #78a33f;
}

/*--ここから先は個別の設定です。
基本の設定と被っているところは端折って、変えるところだけいじります。--*/


/*--Twitter--*/
.icon-twitter {
	color: #55acee
}

/*----はてな---- */

.set.hatena-set {
	width: 80px;
}

.hatena-fukidashi {
	border: 1px solid #B0C1D8;
	width: 80px;
}
.hatena-fukidashi:before {
	border-top-color: #b0c1d8;
}
.hatena-fukidashi-link {
	width: 80px;
} 
a.hatena-btn {
	width: 80px;
	padding:  0;
	text-shadow: none;
	font-size: 13px;
	border: 1px solid #B0C1D8;
}
.hatena-blue { 
	display: inline-block;/*--inline-blockにしないとうまくいきません。--*/
	height: 18px;
	background-color: #3c7dd1;
	border-top: 1px solid #3c7dd1;
	border-bottom: 0px solid #3c7dd1;
	border-left: 1px solid #3c7dd1;
	border-radius: 3px 0 0 3px;
	background:-moz-linear-gradient( center top, #3c7dd1 5%, #3B60CE 100% );
	background:-ms-linear-gradient( top, #3c7dd1 5%, #3B60CE 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c7dd1', endColorstr='#3B60CE');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #3c7dd1), color-stop(100%, #3B43CE) );
}

.icon-hatena:before {
	font-size: 10px;
	padding:  3px;
	color: #fff;
}
.moji-b {
	display: inline-block;
	font-size: 10px;
	color: #193A68;
	margin: 0 0 0 2px;
}

/*--google＋--*/

.googleplus {
	width: 41px;
}
.googleplus-set {
	width: 41px;
}
.googleplus-fukidashi {
	width:39px;
	border-radius: 1px;
}
.googleplus-fukidashi-link {
	width:39px;
}

a.googleplus-btn {
	top: 8px;
	width: 39px;
	padding: 0px;
	text-align: center;
	border:1px solid #db4437;
	border-radius: 2px;
	text-decoration:none;
	box-shadow: none;
	background:-moz-linear-gradient( center top, #db4437 5%, #db4437 100% );
	background:-ms-linear-gradient( top, #db4437 5%, #db4437 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#db4437', endColorstr='#db4437');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #db4437), color-stop(100%, #db4437) );
	background-color:#db4437;
}

.icon-googleplus:before {
	font-size: 18px;
	padding: 3px;
	color: #fff;
	text-shadow: none;
}

/*--フェイスブック--*/
a.facebook-btn {
	border:1px solid #3b55a0;
	background: #3b55a0;
	text-decoration: none;
	background:-moz-linear-gradient( center top, #3b55a0 5%, #3b55a0 100% );
	background:-ms-linear-gradient( top, #3b55a0 5%, #3b55a0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b55a0', endColorstr='#3b55a0');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, ##3b55a0), color-stop(100%, #3b55a0) );
	text-shadow: none;
	box-shadow: none;
}

.icon-facebook:before {
	color: #fff;
	font-size: 14px;
}

.moji-f {
	color :#fff;
}
/*--Pocket--*/

.icon-pocket:before {
	color: #ee4257;
}

.pocket-fukidashi {
	border-radius: 1px;
}

/*--LINE--*/
a.line-btn {
	text-align: center;
	width: 39px;
	height: 40px;
	background: #00c300;
	border-radius: 8px;
	margin: 5px 7px 5px;
	padding: 5px;
	box-shadow: none;
}
.icon-line:before {
	font-size: 40px;
	color: #fff;
	text-shadow: -1px 1px 1px #888;
}

.line-fukidashi {
	position: relative;
	background: #fff;
	border: 1px solid #8fbc8f;
	text-align:center;
	width: 63px;
	height: 33px;
	border-radius: 3px;
	margin-bottom: 4px;
}

.line-fukidashi:before {
	border-top-color: #8fbc8f;
}
/*--Feedly--*/

a.feedly-btn {
	width:61px;
	background: #86b646;
	text-shadow: none;
	box-shadow: none;
	border: 1px solid #888;
	top: 8px;
	font-size: 12px;
	padding: 0 0 0 2px;
	background:-moz-linear-gradient( center top, #86b646 5%, #78a43f 100% );
	background:-ms-linear-gradient( top, #86b646 5%, #78a43f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#86b646', endColorstr='#78a43f');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #86b646), color-stop(100%, #78a43f) );
}

.icon-feedly:before {
	color: #fff;
	font-size: 15px;	
	text-shadow: 1px 1px 1px #86b646;
	padding-left: 2px;
}

.moji-fe {
	font-size: 10px;
	color: #f4f4f4;
	text-shadow: 1px 1px 1px #888;
}

プラグイン「SNS Count Cache」でシェア数を表示する

SNS Count Cacheというプラグインをインストールします。
プラグインの新規追加画面で検索すれば出てきます。

インストールすれば、勝手に数え始めてくれる素晴らしいシステムです。

作者のまるぼんさんのブログに詳しい事が書いてあります。
・[試] WordPressプラグイン SNS Count Cache （Ver. 0.8.0）リリース | 日本語化、キャッシュ安定性向上等

数はいらないや、という人は上の吹き出しを全部取っ払うか、私のように好きな顔文字でも挿し込んでおけばいいんじゃないでしょうか。

完成予想図

最終的にこんな感じになります。

どうでしょうか。下がオリジナルバージョンです。（※時代が進み、Twitterボタンの雰囲気が変わってしまっています・・・）

どうでしょうか、この微妙な違い。ついでにここでF5ボタンを押して、読み込みの速さの違いを体感して欲しいです。

参考にしたサイト

仕組みから何から全体的にためになる

寝ログにお世話になりました。一から丁寧にわかりやすく書いてあります。
私のようにモノマネするのでなければ、こちらを参考にすると話が早いはずです。

・jQueryでシェア数を取得し表示を高速化！WordPressに自作バルーンボタンを作成する全手順まとめ
この記事以外にも参考になるページがあります。仕組みを理解したい方は是非ご覧になって下さい。

・WordPressで8種ソーシャルサービスに通常リンクからシェアアクションする方法まとめ

アイコンフォントをダウンロードさせて頂きました

ドラクウ：さわさわさん

プラグイン：SNS Count Cache

試行錯誤ライフハック：まるぼんさん

まとめ

なんとなく思いつきで始めたらかなり時間を食いました。とくにはてブが。「左側だけ青い」とかしんどかったんですがなんとか妥協できるところまで辿り着きました。

リストの横並びレイアウトはdisplayをinline-blockにするというのが大事なようです。

２０１５年１１月２０日以降、Twitterのシェア数が表示されなくなるため、みなさんそれぞれ対応しているようです。

どうなんでしょう。こういうのは変わるサイクルが早いですからね・・・