WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

JQ

2015/12/26

これで解決!消えてしまったTwitterのシェア回数表示を復活させる方法

投稿者: JQ
カテゴリー: マークアップ >Twitter

Twitter Ballon

最近、さまざまなWebサイトで見かけるようになった押すとSNSでシェアすることのできるボタン。中には、どのくらいSNSでシェアされたかを数で表示しているものもよく見かけます。

そのWebサイトがどれだけ話題になっているのかを示す、一つのバロメータになっていたのですが、これまでTwitterが公式に提供していたツイート数を表示する機能を、2015年11月20日をもって提供を打ち切りました。
それにより、これまでツイート数が表示されていた部分は、数値が消え、ただのツイートボタンになっていました。

Twitter公式からの提供がなくなったことで、この機能は使えなくなってしまったと思われましたが、先日、株式会社ディジティ・ミニミさんが新たに、ツイート数を表示する機能を発表しました。

今日は、その機能を使用する方法を紹介します。

まずは利用登録

まず最初に、サービスを利用するWebサイトを登録します。
こちらのページにアクセスし、WebサイトのURLと連絡のつくメールアドレスを入力します。

利用登録

登録が完了するとカウント対象となるツイートを検索・収集し始めます。また、Twitterアカウントを連携することも可能で、ツイートの収集速度や収集内容の向上が期待できます。

連携前 連携後
ツイートの収集量 10分~15分ごとに100ツイート 10秒~3分ごとに100ツイート
登録以前の
ツイートの収集
なし あり

ツイートの検索・収集の状況はマイページで確認することができます。連携したTwitterアカウントを使ってログインすることで、下記のような情報を見ることができます。

img_20151225_002

カウントつきボタンの作り方

ここからは、実際にツイートカウント付きのボタンの作成方法を見ていきます。

1.【widgetoon.js】を読み込む

まずは、ボタンを作るために必要なjavascriptを読み込みます。下記のコードを使って読み込みます。

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>

2.aタグで「ボタンの素」になるリンクを作成

javascript本体の読み込みが終わったら実際にボタンを表示したい位置に、下記のコードを記述して「ボタンの素」を作ります。(下記サンプルは、バルーンが上、ツイートボタンが下の体裁のものです。)

<a href="http://twitter.com/share"
   class="twitter-share-buttoon"
   data-url="★★★シェアしたいURL★★★"
   data-text="★★★シェアしたいテキスト★★★"
   data-count="vertical"
   data-lang="ja">ツイート</a>

3.最後に【widgetoon_main】を実行

上記のようにボタンの素の記述まで完了したら、最後にwidgetoon_mainを実行してボタンの形に変化させます。
<body>タグの終了直前に下記コードを記述し、実行します。

<script> widgetoon_main(); </script>

すると、このページの下の方でも使われている、ツイート件数の表示されたボタンが表示されるようになります。

まとめ

一時は消えてしまったTwitterのツイート数表示。サイトの人気をアピールするポイントにしていた人も少なくないと思います。
今回新たに開発されたこのコードは、まだ今の段階では、色々と実験段階のプロジェクトのようです。
そのため、終了してしまう可能性もありますが、今となっては全く使えなくなってしまった公式の機能の代わりには十分なっていると思いますので、困っていたサイトの管理者様は試してみてはいかがでしょうか。

ではまた次回もよろしくお願いします。

※公式サイトで色々なパターンのボタンの作り方が掲載されています。こちらもぜひご覧ください。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ