仕様変更と共に？

当ブログ記事のSNSシェアボタンですが
かなり前から忍者おまとめボタンを利用しておりまして…


設置当初は、そのカスタマイズ自由度の高さから
特に不満も無く使わせていただいていたんですが…

Twitterやgoogle+の仕様変更でツイート数やシェア数が表示されなくなったりして


サイトのレイアウト的にちょっとモヤっとしか感じに…

っつ〜事で。。
この度重い腰を上げて、オリジナルSNSボタンの設置に挑戦してみました。。

オリジナルSNSボタンの作成

ボタンの設置にあたり、下記サイトさんを参考にさせていただきました
紹介されてるのは丸型のSNSボタンの作り方ですけど


CSSの変更で角丸型のボタンにしてみました。。

各SNSのシェアURL

参考までに設置した各ボタンのリンク先を記載しておきます。。

【Twitter】

<a href="https://twitter.com/share?url=【ＵＲＬ】" target="_blank">Twitter</a>

【Facebook】

<a href="https://www.facebook.com/sharer/sharer.php?u=【ＵＲＬ】" target="_blank">Facebook</a>

【はてな】

<a href="http://b.hatena.ne.jp/add?url=【ＵＲＬ】" target="_blank">はてな</a>

【Pocket】

<a href="http://getpocket.com/edit?url=【ＵＲＬ】&title=【記事タイトル】" target="_blank">Pocket</a>

【google+】

<a href="https://plus.google.com/share?url=【ＵＲＬ】" target="_blank">google+</a>

【Feedly】

<a href="https://feedly.com/i/subscription/feed/【ブログのＲＳＳ】" target="_blank">Feedly</a>

【LINE】

<a href="https://timeline.line.me/social-plugin/share?url=【ＵＲＬ】" target="_blank">LINE</a>

シェア数取得と表示

今まで忍者おまとめボタンを卒業出来なかった理由の一つに
シェア数の表示が簡単に行えるってのがあったんで
今回オリジナルボタンを作るにあたっては是非ともシェア数の表示もさせたい…
って事で色々と調べてみた所
SNSシェア数取得が出来るjQueryのプラグイン
【cb-sharecount-js】があったので
そちらを導入させていただきました♪

「cb−sharecount-js v2.0」概要
・実装が簡単。プラグインを実行させたいjQueryオブジェクトに指定したセレクター要素のtitle属性に[シェア数を取得したいURL]を設定するだけ。JavaScriptの実装はたったの1行。
・同一ページ内で複数のURLの値の取得ができるので、ブログ記事の一覧などでの使用に最適。
・非同期かつ並列処理で値を取得するので、ページの表示にもやさしい。
・値だけを取得するので、レイアウトもデザインも自由に行える。
・localStorageを使ったcache機能付き（デフォルト有効期限: 1日）。同一ドメイン内であれば複数のページで共有可能。
・はてなブックマーク登録数、Facebookいいね数、Twitterツイート数、Pocketシェア数の4サービスに対応。表示するSNSを選択可能。
SNSシェア数取得JSプラグイン「cb-sharecount-js v2.0」リリース | maesblog

設置に関しては上記サイトを参考に…
っつ〜か、ぶっちゃけ当ブログの仕様とイマイチ相性が悪いのか？？
なかなか上手く表示されませんでしたが…
色々ゴニョゴニョ(謎…爆)して。。


なんとかシェア数付きのオリジナルSNSボタンの設置ができました[icon:ハート]

あ、google+については現在シェア数の取得が出来ない仕様っぽい(?)んで
とりあえずダミーで（爆

2021/1/30追記：SNSシェア数取得方法の変更しました。。