Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

ツイートボタンの件数表示+リンクサポート終了後の対応を2サイトの事例からみる

f:id:tbpg:20160223150722j:plain

経緯

2015年11月20日でツイートボタンのツイート数表示のサポートが打ち切られました。

blog.twitter.com

ツイートボタンでツイート数を知ることができ、そのツイートをリンクから参照できることは、
読者にとってとても有用でした。読者にとって有用な機能は運営にとっても重要なはず。
ということで、2つのサイトの対応事例をみてみます。

Hatenaの例

f:id:tbpg:20160223150722j:plain

list の吹き出し部分がツイートへのリンクになっています。 ツイート件数は判別できません。

リンクの部分は https://twitter.com/search?q=<URL> に対象URLを指定しているだけですね。

ちなみに上記の画像は下記の私の記事をキャプチャしました。

tbpgr.hatenablog.com

ソースコード

ソースコ-ドを確認してみると以下のようになっています。

    <div class="social-button-item">
      <a href="https://twitter.com/search?q=http%3A%2F%2Ftbpgr.hatenablog.com%2Fentry%2F2016%2F02%2F19%2F023017" class="social-button-twitter-balloon" target="_blank">
        <span class="social-button-twitter-balloon-list">list</span>
        <i class="social-button-twitter-balloon-arrow-border"></i>
        <u class="social-button-twitter-balloon-arrow"></u>
      </a>
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tbpgr.hatenablog.com/entry/2016/02/19/023017" data-count="vertical" data-text="GitHub Flow(っぽいものも含む)の事例を3件ながめてみた - Tbpgr Blog" data-lang="ja">Tweet</a>
    </div>

オモコロの例

f:id:tbpg:20160223150739j:plain

link の吹き出し部分がツイートへのリンクになっています。 ツイート件数も判別できます。

上記の画像はヨッピーさんの記事一覧からキャプチャしました。

omocoro.jp

ソースコード

ソースコ-ドを確認してみると以下のようになっています。

<script type="text/javascript" src="//jsoon.digitiminimi.com/js/widgetoon.js"></script>
<!-- 中略 -->
<span class="twitter">
<a href="http://twitter.com/share" class="twitter-share-buttoon" data-text="「湯葉の服を着る」という若者の夢を石油王が叶えてきた|オモコロ" data-count="horizontal" data-lang="ja" data-url="http://omocoro.jp/kiji/72807/">ツイート</a>
</span>

ツイート件数とリンクの部分はwidgetoon.jsを利用しているようです。

widgetoon.js