表示が速いSNSシェアボタンを作ってみた(はてなブログのカスタマイズ)+追記

できるだけ表示スピードの速いSNSシェアボタンを設置したくて、いろいろやってみました。

とはいえ私はド素人なんで、偉大な先人たちの仕事を参考にしまくった感じです。

先人たちに感謝!

 

自分でゼロから作り上げるほどの知識はございませんので、いろいろ参考にさせていただきました。感謝です!

まず、はてなブログにデフォルトで用意されているSNSシェアボタンって、こんな感じなんですよね。

記事下にある、はてなスターの真下に表示されています。

f:id:gattolibero:20180310204942j:plain

なんかもう、サイズとかもバラバラだし、そして何より、表示されるまでに時間がかかります。

これ、非常~~にストレスになりますよね。

 

ホントかどうか分かりませんが、

「サイトの表示が2秒遅れると直帰率は50%増加する」なんていう話もあったりするようですし。

サクサク表示されるに越したことはないわけです。

 

んで、考えました。

これってきっと、シェア数を取得するのに時間がかかってるんですよね?

だったら、

数字を表示しなけりゃいいんじゃないのか?って。

 

 

ということで、理想のSNSシェアボタンを求める旅が始まった…。

まずはベースになるSNSボタンですね。

個人的に求めているポイントは、分かりやすさ。

「あっ、ここにSNSボタンがあるな」って、誰が見ても一瞬で分かるようなボタンが理想的。

オシャレさとか、トータルバランスなんかを追求しすぎて、サイトに馴染み過ぎて同化してるようなタイプは、今回は求めておりません。

 

誰が見てもハッキリ分かる。

これが重要かと考えております。

 

あ、あとね、PCで見た時とスマホで見た時でいちいち変化するような、レスポンシブ的なボタンである必要は無いかなと。

(変な小技とか使ってると意味分かんないからカスタマイズできないw)

 

大きすぎない。変に凝っていない。そして分かりやすい。

これがベスト。

 

んで、「SNSボタン」で画像検索したりして、いろいろ見たんですけどね、結局、ここへ帰ってきてしまいました。

 

ニン!

 

f:id:gattolibero:20180310211359p:plain

 

シンプル伊豆ベスト!

私が愛してやまない、はてなブログのデザインテーマ「Brooklyn(ブルックリン)」の生みの親。

シロマさんの作ったシェアボタン。

www.notitle-weblog.com

 

こちらを参考にさせていただきました。

っていうかね、ほぼそのまんま。

 

んで、どこに手を加えたかっていうと、

はてなブックマークの数」と「フェイスブックのシェア数」を表示しないようにしました。

表示スピードが遅くなる諸悪の根源って、この「シェア数の取得」だと思うんで。

 

そうするとこんな感じ。

f:id:gattolibero:20180310212321p:plain

 

数字が入る部分にそれぞれ「Hatebu」と「facebook」の文字を入れてみました。

facebookは、ちょっと文字数多いんだけどねぇ…。

まぁしょうがない。

 

あと、それぞれのボタンをクリックすると、小さなウィンドウが開くようになってるんですが、Pocketのボタンだけ、クリックするとタブで開くようになっていたので、他のボタンと同じように小窓で開くようにしてみました。

 

参考にさせていただいたのはコチラ。

webgaku.hateblo.jp

ただ、Pocketのリンク先のURLを記事下のHTML部分に書き込んだ時に、バツのマークが出て、

Name entity expected.

Got none.

だったかな、表示されたので、ちょこっと変更して、

&title={Title}

という部分を削除しました。

 

【追記】

それと、ツイートした時に記事タイトルは表示されるけど、ブログのタイトルは表示されなかったので修正しました。

記事タイトル - ブログタイトル 

という感じで表示したかったのです。

そうすると、ツイッター内でブログのタイトルで検索した時にヒットするようになる…はずなので。

 

そしてさらに。

カスタマイズ画面でSNSシェアボタンに関するコードを記事下に書き込んだだけでは終わりません。

 

このままでは、

 

記事本文

はてなスター

はてな運営側の広告(有料版には無し)

SNSシェアボタン

 

という、並びで表示されてしまいます。

シェアボタンが、記事のすぐ下に表示されるようにしたいので、

こちらのカスタマイズを施しました。

chipspd.hatenadiary.jp

 

これで、表示の順番は上から順に

 

記事本文

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: 1px;
padding-bottom: 6px;
}
.share-button .twitter-button {
padding-top: 5px;
}
.share-button .facebook-button .lg {
font-size: 27px;
margin-top: -1px;
}
.share-button .twitter-button .lg {
font-size: 27px;
}
.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シェアボタン」が実現しました!

(まるでリニアモーターカーのように言う)

 

【追記】

まだちょっと修正が必要っぽいです💦

ツイートした時に、記事タイトルは出るんだけどブログのタイトルは出ないとか。

ツイート時に記事タイトルだけでなくブログタイトルも表示されるようにしました。

ブログタイトルの変数は {BlogTitle} 。これを書き足した。

参考

記事ページにブログパーツなどを配置するときに利用できる変数を追加しました - はてなブログ開発ブログ

 

あと、「Add This」というWEBサービス?でSNSボタンを作ると表示が速いという情報をいただきましたので、試してみたいと思います。

もしかすると「Add This」でボタンを全部、作り直すかも…。