できるだけ表示スピードの速いSNSシェアボタンを設置したくて、いろいろやってみました。
とはいえ私はド素人なんで、偉大な先人たちの仕事を参考にしまくった感じです。
先人たちに感謝！
【2019年4月6日追記】
何故かいつの間にか、シェアボタン内のアイコンの上下位置が若干ズレていた（特に「はてブ」と「フェイスブック」のアイコンのズレが気持ち悪かった）ので、なんとなくほぼ同じ位置になるように修正しました。
CSSの部分の赤いテキスト部分が、今回修正した部分です。ボタン内のアイコンの位置に関する指定は、だいたいこのへんですので、もしも違和感がある方は、自分なりにちょっといじってみてはいかがでしょうか。
自分でゼロから作り上げるほどの知識はございませんので、いろいろ参考にさせていただきました。感謝です！
まず、はてなブログにデフォルトで用意されているSNSシェアボタンって、こんな感じなんですよね。
記事下にある、はてなスターの真下に表示されています。
↓
なんかもう、サイズとかもバラバラだし、そして何より、表示されるまでに時間がかかります。
これ、非常～～にストレスになりますよね。
ホントかどうか分かりませんが、
「サイトの表示が2秒遅れると直帰率は50％増加する」なんていう話もあったりするようですし。
サクサク表示されるに越したことはないわけです。
んで、考えました。
これってきっと、シェア数を取得するのに時間がかかってるんですよね？
だったら、
数字を表示しなけりゃいいんじゃないのか？って。
ということで、理想のSNSシェアボタンを求める旅が始まった…。
まずはベースになるSNSボタンですね。
個人的に求めているポイントは、分かりやすさ。
「あっ、ここにSNSボタンがあるな」って、誰が見ても一瞬で分かるようなボタンが理想的。
オシャレさとか、トータルバランスなんかを追求しすぎて、サイトに馴染み過ぎて同化してるようなタイプは、今回は求めておりません。
誰が見てもハッキリ分かる。
これが重要かと考えております。
あ、あとね、PCで見た時とスマホで見た時でいちいち変化するような、レスポンシブ的なボタンである必要は無いかなと。
（変な小技とか使ってると意味分かんないからカスタマイズできないｗ）
大きすぎない。変に凝っていない。そして分かりやすい。
これがベスト。
んで、「SNSボタン」で画像検索したりして、いろいろ見たんですけどね、結局、ここへ帰ってきてしまいました。
ニン！
シンプル伊豆ベスト！
私が愛してやまない、はてなブログのデザインテーマ「Brooklyn（ブルックリン）」の生みの親。
シロマさんの作ったシェアボタン。
こちらを参考にさせていただきました。
っていうかね、ほぼそのまんま。
んで、どこに手を加えたかっていうと、
「はてなブックマークの数」と「フェイスブックのシェア数」を表示しないようにしました。
表示スピードが遅くなる諸悪の根源って、この「シェア数の取得」だと思うんで。
そうするとこんな感じ。
↓
数字が入る部分にそれぞれ「Hatebu」と「facebook」の文字を入れてみました。
facebookは、ちょっと文字数多いんだけどねぇ…。
まぁしょうがない。
あと、それぞれのボタンをクリックすると、小さなウィンドウが開くようになってるんですが、Pocketのボタンだけ、クリックするとタブで開くようになっていたので、他のボタンと同じように小窓で開くようにしてみました。
参考にさせていただいたのはコチラ。
ただ、Pocketのリンク先のURLを記事下のHTML部分に書き込んだ時に、バツのマークが出て、
Name entity expected.
Got none.
だったかな、表示されたので、ちょこっと変更して、
&title={Title}
という部分を削除しました。
【追記】
それと、ツイートした時に記事タイトルは表示されるけど、ブログのタイトルは表示されなかったので修正しました。
記事タイトル - ブログタイトル
という感じで表示したかったのです。
そうすると、ツイッター内でブログのタイトルで検索した時にヒットするようになる…はずなので。
ブログタイトルの変数は {BlogTitle} 。これを書き足しました。
参考
記事ページにブログパーツなどを配置するときに利用できる変数を追加しました - はてなブログ開発ブログ
そしてさらに。
カスタマイズ画面でSNSシェアボタンに関するコードを記事下に書き込んだだけでは終わりません。
このままでは、
記事本文
はてなスター
はてな運営側の広告（有料版には無し）
SNSシェアボタン
という、並びで表示されてしまいます。
シェアボタンが、記事のすぐ下に表示されるようにしたいので、
こちらのカスタマイズを施しました。
これで、表示の順番は上から順に
記事本文
SNSシェアボタン
はてなスター
はてな運営側の広告
となって、記事の直後にSNSシェアボタンが表示されるようになりました。
はい、もう一回、やったことを整理しまーす。コピペでOK！な、はず。
ダッシュボード
↓
設定
↓
詳細設定
↓
ひらすら下にスクロール
↓
「headに要素を追加」で、以下のコードを記入。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
アイコン、すなわちそれぞれのボタンに表示されるマークを取得。
さて、お次。
シェア数をカウントするコード（jQuery）は書き込みません。
華麗にスルーします。
そんでもって記事下にHTMLを書き込みます。
ダッシュボード
↓
デザイン
↓
カスタマイズ
↓
記事
↓
「記事下」と進んで、以下のコードを記入。
<div id="my-footer">
<!--シェアボタン-->
<div class="share-area">
<div class="share-button">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br><span class="hatebu-count small-text">Hatebu</span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="fa fa-facebook-square lg"></i><br><span class="facebook-count small-text">facebook</span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--Google＋-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="pocket-button">
<i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
そしてあとはCSSで装飾していきます。色とか形とか。
ダッシュボード
↓
デザイン
↓
カスタマイズ
↓
「デザインCSS」へと辿り着き、以下を記入。
/* シェアボタン */
.share-area {
margin: 20px 0;
}
.share-button a {
display: inline-block;
width: 52px;
height: 52px;
padding: 4px 0;
line-height: 18px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
vertical-align: bottom;
transition: all 0.4s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.share-button a:hover {
opacity: 0.6;
transition: all 0.4s;
}
.share-area i,
.share-area .lg {
font-size: 24px;
}
.share-button .hatena-bookmark-button .lg {
font-size: 32px;
}
.share-button .hatena-bookmark-button {
padding-top: 5px;
padding-bottom: 6px;
}
.share-button .twitter-button .lg {
font-size: 27px;
}
.share-button .twitter-button {
padding-top: 8px;
}
.share-button .facebook-button .lg {
font-size: 26px;
}
.share-button .facebook-button {
padding-top: 4px;
}
.share-area .small-text {
font-size: 11px;
}
.share-area .fa-spin {
font-size: 8px;
color: #fff;
}
.share-button .hatena-bookmark-button {
background: #00A4DE;
}
.share-button .facebook-button {
background: #405BA7;
}
.share-button .twitter-button {
background: #55ACEE;
}
.share-button .googleplus-button {
background: #C53727;
}
.share-button .pocket-button {
background: #EE4256;
}
以上で一応、完成！
…な、はずです。
この記事の一番下に、イイ感じのSNSシェアボタンが表示されていれば、まんまと成功です。
実際に機能しているか、どうぞブックマークを付けつつ、お確かめください。
シェアしたりツイートしたり、してみてください。
それで、うまく機能してなかったら、ツイッターにでも連絡ください(笑)
多分大丈夫な…はず！
これで「夢の超高速SNSシェアボタン」が実現しました！
（まるでリニアモーターカーのように言う）
【さらに追記】
いずれ、これを改造して、もっとデザイン的に自由ネコオリジナル風味を加えたシェアボタンを作ろうと思います。
カミングスーン（かもしれない）
