JetPackの共有ボタンのデザインが統一された(Jetpack 3.0 リリース！SNS 共有ボタンのデザインを変えてみました。)のが羨ましくなってこのブログのテーマでもやってみることにした。
ブランドアイコン対応
ただのリンクボタンにするだけなので技術的には難しくないのだが、ブランドアイコンの表示は少し苦労する。このテーマではTwitter, Facebook, Google+, はてなブックマーク, Pocketの共有ボタンを出しているんだけどこれらを全部サポートしているフォントアイコンがあるのかよくわからなかった。海外のフォントは大抵はてなブックマークを対応してない、Pocketの対応もまばらな感じ。
そんな中EntypoSocialIconがはてなブックマークに対応してくれていた。しかしPocketに対応していないので、はてなブックマークだけEntypoSocialIconを使って、それ以外をWordPressのテーマでも利用されているGenericonsで補うことにした。他の箇所ではFont Awesomeを使ってるんで共有ボタンのためだけにアイコンつかうの微妙っすわ・・・
前にWebフォントの作り方みたいな記事かサイトを見た記憶があるので必要に迫られたら自分用フォントアイコン作るかもしれない。
共有数を出せない
今までは各SNSの公式なボタンを使っていた。それらはiframeなどでゴニョゴニョしてカウントを出してくたりした。自前のデザインにするとその共有数のカウントを出すのが難しくなる。
具体的にはPocketとGoogle+が難しい。Pocketはそもそもカウントを取得するAPIが見当たらなかった。Google+はAPIはあるのだがPOSTパラメータが必要なのでCross-Originの制限に合う。結局Jsonpでカウントが取れるのは残りのTwitter, Facebook, はてなブックマークだけだった。
共有数を出さない
中途半端になるからどうしようかと考えて、URLに対する各種SNSの共有数を返す自前のAPIをつくろうかと思ったけどPVの数だけリクエストされるので負荷対策を考えるのが面倒くさくなった。
何のためにそこまでするのかと考えた結果、カウント数を出さないことにした。そもそも僕は人に流されて物事を決めるのが嫌いである。だからみんなが共有しているから読むというのは天邪鬼的に嫌なのである。それを訪問者に押し付ける必要はないと思ってたけど、思い切って押し付けてみることにした。
俺だけカウント表示
共有数を出す目的はその記事がどれくらい話題になっているのか評価の尺度にしたいからだと思う。それは著者にとっても同様である。
WordPressでは管理ユーザでログインしているかどうかで分岐して管理者と訪問者とで表示を変えることができる。そこで自分がブログのWordPressにログインしているときだけ自前のAPIを使って共有数を取得して表示することにした。これなら自分がアクセスするだけの負荷しかかからないので、HerokuにAPIを実装しても問題ない。我ながら良い落としどころだと思った。
というわけで作った自分用APIはこちら。
これをherokuにあげて http://appname.heroku.com/count.json?url=xxxxx?all=1 にjQueryとかでjsonpで取ると以下みたいなオブジェクトが返ってくるんで頑張って表示する。
{url: "https://blog.makotokw.com/2014/07/11/in-trouble-redmine/",
twitter: 385,
hatena: 414,
facebook: 462,
pocket: 402,
google: 29}
スクロールしてボタンが表示されてからXMLHttpRequestを呼ぶようにしたことと、Herokuのdynoが寝てしまうので最初に表示したときは少し待たないといけない。まぁそれはdynoを叩き起こすcronでも動かせば解決するし、とりあえず今はデザイン重視で行くことにする。
wp-gfm