TES Blog

株式会社テクニカルエンジニアリングサポートに所属する社員が、自身が携わるテクノロジーやイベントに関する情報を発信しています。

jQuery を使わずに、記事のシェア数を表示するソーシャルパーツをフラットデザインっぽくカスタマイズする

はじめに

TES で Web エンジニアをしている Hayato Yamashita です。

今回は、はてなブログのソーシャルパーツをフラットデザインっぽくカスタマイズする方法を紹介します。

カスタマイズ後の見た目

こんな感じの見た目になります。
こういうカスタマイズをしたい、どうやってカスタマイズするのか知りたい、という方は本記事をご覧ください。

f:id:h-yamashita:20180402135652p:plain

この記事のポイント

  • ソーシャルパーツをフラットデザインっぽくカスタマイズできる
    • コピペで使える!
  • はてなブックマークと Facebook のシェア数を表示できる
    • jQuery を使わず IE11 対応!
  • 簡単なコード解説付き
    • 理解しやすいかも

ソーシャルパーツって?

はてなブログの記事下部にある、以下のようなボタン群のことを指しています。

f:id:h-yamashita:20180402103034p:plain

これらは、はてなブログ標準でサポートしており、設定機能から簡単に設置することができます。
ボタンを押すだけで各 SNS にシェアすることができる、とても便利なツールですよね。

しかし標準のソーシャルパーツ、ちょっと表示速度が遅い問題を抱えています。
どのくらい遅いのかは、以下の記事で書かれています。

www.stdio.jp

カスタマイズすることでデザインを変えられるし、表示速度の改善もできちゃうので、これはやるっきゃありません。

ソーシャルパーツをカスタマイズする方法

先に紹介しましたが、本記事のカスタマイズにより、以下の見た目で表示されることを目指します。
フラットデザインっぽい感じですね。

f:id:h-yamashita:20180402135652p:plain

謝辞

カスタマイズ方法は、以下の記事を参考にさせていただきました。
ありがとうございます。

www.yukihy.com

こちらの内容を参考にして、jQuery を使わない書き方にしています。

標準のソーシャルパーツを無効化

カスタマイズしたソーシャルパーツを設置するので、標準のボタンは不要です。
そのため、まずは標準のソーシャルパーツを全て無効化します。

f:id:h-yamashita:20180402130728p:plain

デザイン設定 > カスタマイズ > 記事 > ソーシャルパーツ

で、全てのチェックボックスのチェックを外してください。

記事下のカスタマイズ

必要に応じて、カスタマイズ前のコードはバックアップしておいてください。

f:id:h-yamashita:20180402130752p:plain

デザイン設定 > カスタマイズ > 記事 > 記事上下のカスタマイズ > 記事下

に、以下のコードを追加してください。解説は後述します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="share-buttons">
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" class="share-button share-hatena hatena-bookmark-button" data-hatena-bookmark-layout="simple">
    <div class="share-icon"><i class="blogicon-bookmark lg"></i></div>
    <div class="share-text hatebu-count"><i class="fa fa-spinner fa-pulse"></i></div>
  </a>
  <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank" class="share-button share-facebook">
    <div class="share-icon"><i class="fa fa-facebook"></i></div>
    <div class="share-text facebook-count"><i class="fa fa-spinner fa-pulse"></i></div>
  </a>
  <a href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&amp;text={Title}" target="_blank" class="share-button share-twitter">
    <div class="share-icon"><i class="fa fa-twitter"></i></div>
    <div class="share-text">Twitter</div>
  </a>
  <a href="https://plus.google.com/share?url={URLEncodedPermalink}" target="_blank" class="share-button share-google-plus">
    <div class="share-icon"><i class="fa fa-google-plus"></i></div>
    <div class="share-text">Google+</div>
  </a>
  <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" class="share-button share-pocket">
    <div class="share-icon"><i class="fa fa-get-pocket"></i></div>
    <div class="share-text">Pocket</div>
  </a>
</div>

<script type="text/javascript">
  var countHatebu = function (response) {
    var nodeList = document.querySelectorAll('.hatebu-count')
    Array.prototype.forEach.call(nodeList, function (v) {
      v.innerHTML = response || 0
    })
  }

  var countFacebook = function (response) {
    var nodeList = document.querySelectorAll('.facebook-count')
    if (response.share && response.share.share_count) {
      Array.prototype.forEach.call(nodeList, function (v) {
        v.innerHTML = response.share.share_count
      })
    } else {
      Array.prototype.forEach.call(nodeList, function (v) {
        v.innerHTML = 0
      })
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    var addScript = function (src) {
      var script = document.createElement('script')
      script.src = src
      document.body.appendChild(script)
    }

    addScript('https://b.hatena.ne.jp/entry.count?url={Permalink}&callback=countHatebu')
    addScript('https://graph.facebook.com/?id={Permalink}&callback=countFacebook')
  })
</script>

デザイン CSS のカスタマイズ

必要に応じて、カスタマイズ前のコードはバックアップしておいてください。

f:id:h-yamashita:20180402130913p:plain

デザイン設定 > カスタマイズ > デザインCSS

に、以下のコードを追加してください。
特徴的なのは CSS Flexbox を使っているくらいで難しくないので、こちらの解説は省略します。

.share-buttons {
  width: 100%;
  display: flex;
}
a.share-button {
  color: white;
  text-decoration: none;
  height: 3rem;
  border-radius: 0;
  transition: .3s ease;
  padding: .5rem 0;
  font-size: 18px;
  text-align: center;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
a.share-button:hover {
  opacity: .5;
}
.share-button .share-icon {
  font-size: 1.5rem;
}
.share-button .share-text {
  font-size: .75rem;
}
.share-button.share-hatena      { background: #37A5F2; }
.share-button.share-facebook    { background: #6680d8; }
.share-button.share-twitter     { background: #5BB6F0; }
.share-button.share-google-plus { background: #dd4b39; }
.share-button.share-pocket      { background: #ff6d82; }

変更を保存する

最後に、変更を保存してください。
保存した後、ブログに反映されます。

コードの解説

Font Awesome の CSS 読み込み

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

SNS アイコンの表示用に Font Awesome を使うため、CSS を読み込んでいます。
class の fa で始まるやつですね。

もし、他のカスタマイズをしていて、既に読み込んでいる場合は不要です。

SNS シェアボタン

<div class="share-buttons">
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" target="_blank" class="share-button share-hatena hatena-bookmark-button" data-hatena-bookmark-layout="simple">
    <div class="share-icon"><i class="blogicon-bookmark lg"></i></div>
    <div class="share-text hatebu-count"><i class="fa fa-spinner fa-pulse"></i></div>
  </a>
  <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" target="_blank" class="share-button share-facebook">
    <div class="share-icon"><i class="fa fa-facebook"></i></div>
    <div class="share-text facebook-count"><i class="fa fa-spinner fa-pulse"></i></div>
  </a>
  <a href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&amp;text={Title}" target="_blank" class="share-button share-twitter">
    <div class="share-icon"><i class="fa fa-twitter"></i></div>
    <div class="share-text">Twitter</div>
  </a>
  <a href="https://plus.google.com/share?url={URLEncodedPermalink}" target="_blank" class="share-button share-google-plus">
    <div class="share-icon"><i class="fa fa-google-plus"></i></div>
    <div class="share-text">Google+</div>
  </a>
  <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" target="_blank" class="share-button share-pocket">
    <div class="share-icon"><i class="fa fa-get-pocket"></i></div>
    <div class="share-text">Pocket</div>
  </a>
</div>

SNS シェアボタンを設置する HTML です。
独自の class 指定を行い、デザインやスクリプトが反映されるようにしています。

{URLEncodedPermalink} という記述がありますが、これは記事上下のカスタマイズで使える変数です。
詳細は、はてなブログ開発ブログの記事に載っています。

staff.hatenablog.com

はてなブックマークボタン

はてなブックマークボタンだけ、他のシェアボタンと違う特殊な設定があります。

<a
    class="hatena-bookmark-button"
    data-hatena-bookmark-layout="simple"
>

特殊な部分だけ抜き出すと、上記のような感じです。
これがあることによって、ボタン押下時に下図のような吹き出しで、はてなブックマークに登録できるようになります。

f:id:h-yamashita:20180409111735p:plain

シェア数を取得するスクリプト

<script type="text/javascript">
  var countHatebu = function (response) {
    var nodeList = document.querySelectorAll('.hatebu-count')
    Array.prototype.forEach.call(nodeList, function (v) {
      v.innerHTML = response || 0
    })
  }

  var countFacebook = function (response) {
    var nodeList = document.querySelectorAll('.facebook-count')
    if (response.share && response.share.share_count) {
      Array.prototype.forEach.call(nodeList, function (v) {
        v.innerHTML = response.share.share_count
      })
    } else {
      Array.prototype.forEach.call(nodeList, function (v) {
        v.innerHTML = 0
      })
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    var addScript = function (src) {
      var script = document.createElement('script')
      script.src = src
      document.body.appendChild(script)
    }

    addScript('https://b.hatena.ne.jp/entry.count?url={Permalink}&callback=countHatebu')
    addScript('https://graph.facebook.com/?id={Permalink}&callback=countFacebook')
  })
</script>

はてなブックマークと Facebook のシェア数を取得しています。
IE11 で動作することも確認済みです。

JSONP でデータを取得した後に呼び出される関数の定義と、JSONP リクエスト用に script タグを埋め込んでいます。
データ取得後、それぞれに対応した DOM にシェア数の値を書き込んでいます。

特徴的なのは、JSONP ではリクエスト時に callback する関数を指定しますので、対応する関数をグローバルに定義している点ですね。

また、この書き方ではエラーハンドリングできませんが、まあ特に複雑なことはしていませんので、このままで良しとしています。

おわりに

はてなブログのソーシャルパーツをカスタマイズする方法は、既にいくつもの記事で紹介されていますし、本記事も参考にさせていただいた記事があります。

しかし、どれも jQuery に依存したものばかりでしたので、非 jQuery にこだわってカスタマイズしてみました。
表示速度を改善するなら、読み込むデータ量を減らすのが基本ですよね。

宜しければ、ご活用ください。