BloggerにTwitterのシェア数カウント表示付きボタンを設置する方法

2015年11月20日にTwitterのツイートカウント数表示が廃止されました。

参考

持続的なプラットフォームのための難しい決断

公式には終了したのですが、なんだか非公式な方法なら表示が可能らしいです。

自分が運営しているはてなブログでは、他の方が作成したコードをコピペして表示できています。

今回はそれのBloggerバージョンに挑戦しました。

例によってBloggerバージョンの参考記事を探したのですが見つからなかった。見つけられなかったのかもしれませんが、とりあえず参考にできるものがなかったので、自作です。

一応自分でできる範囲で検証はしてみたのですが、間違いがあるかもしれませんので、コードを利用される場合は自己責任でお願いします。

事前準備

今回Twitterシェア数を表示するために、ディジティ・ミニミ社がサービス提供している「widgetoon.js &count.jsoon」を利用します。(※ご利用の際には必ずサービス規約を熟読してください。)

参考

widgetoon.js & count.jsoon | digitiminimi

まずは集計対象サイトを登録します。サイトURLとメールアドレスが必要です。

登録が終わると、登録完了メールが送られてきます。けっこう時間がかかるようでして、私の場合は約5時間ぐらいかかったかな。

登録完了メールが届いたら、Twitter連携が求められます。問題なければ連携しましょう。

連携が完了すれば事前準備は終了です。

BloggerのHTMLを編集

私は個別ページ記事下にのみシェアボタンを表示していますので、今回はそこでの表示方法になります。

まずは貼り付ける場所を検索。

<data:post.body/>

多分3箇所ぐらいあって、一つ目はモバイルテンプレートかな? (私はレスポンシブデザインなのでわからない)PC表示は3個目の後がいいと思います。

そこに以下のコードを貼り付けます。

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a href="http://twitter.com/share"
  class="twitter-share-buttoon"
  expr:data-url='data:post.canonicalUrl'
  expr:data-text='data:post.title + &quot; | &quot;+ data:title' 
  data-count="vertical"
  data-lang="ja">ツイート</a>
<script> widgetoon_main(); </script>

この状態でバルーンの中の数字をクリックするとツイートリストが、Tweetボタンをクリックするとブログ記事タイトルと記事URLがシェアできる状態になります。以上です。