IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

【はてなブログ高速化4】ツイート数付きツイートボタンをオリジナルでつくる（素の javascript 付き）

unsplash-logoFrankie

【はてなブログ高速化4】ツイート数付きツイートボタンをオリジナルでつくる（素の javascript 付き）

2016.08.31 はてなブログ, プラグイン

（2016/9/6）完成版が「【はてなブログ高速化】自作ソーシャルボタン・シェアボタンで軽量化、ブログを高速に読み込む（完成） – IMUZA.com」にあります。

【はてなブログ高速化3】Facebookシェアダイアログでシェアする／Facebook SDK for JavaScript – IMUZA.com の続きです。

01Twitter ツイートボタン

Twitter のツイートボタンにも、Javascript を使う方法とリンクの２種類があるようです。

Javascript を使う場合は、はてなではすでにwidgets.jsが読み込まれていますので、下のコードのdata-urlにツイートするアドレス、data-textにページタイトルなどのテキストを入れればツイートボタンが表示されます。

<a href="https://twitter.com/share" 
    class="twitter-share-button" 
    data-url="" 
    data-text="" 
    ツイート</a>

公式のボタン作成ページ

DOM 構築時にclass="twitter-share-button"をスキャンしてiframeツイートボタンを埋め込んでいくようです。これは、はてな公式のツイートボタンと同じですので、今回は使いません。

02ウェブインテント

もうひとつは、Tweet Web Intentという方法で、送信URLに Text や Url などのパラメータを付加したリンクです。

前回記事に追加する html

以下すべて追加コードのみです。

  <a href=""
    class="twitter-button">
    <i class="blogicon-twitter lg"></i>
    <span class="twitter-counter"></span>
  </a>

クラス名をtwitter-share-buttonとしますとwidgets.jsからiframeでボタンが読み込まれてしまいます。

Javascript

var twitterButton = shareButtons.querySelector('a.twitter-button');
twitterButton.setAttribute('href', 'http://twitter.com/intent/tweet?url=' + encodeURIComponent(permalink) + '&text=' + title);

03ツイート数取得

公式サイトでのツイート数取得は昨年廃止されており、その後全く気にかけていなかったのですが、widgetoon.js & count.jsoon | digitiminimi というサードパーティーのサービスがあるんですね。

これを利用させていただきましょう。登録方法はたくさん紹介されていますのでググってみてください。

widgetoon.jsの方は、Javascript でツイートボタンを作成し、（多分）ツイート数もそこで埋め込む仕様だと思います。

ですので、今回利用するのは、count.jsoonの方です。

APIの使い方 | widgetoon.js & count.jsoon

JSONP を使うようですので、はてなブックマークと同じです。読み出しコードもそのまま使えそうです。

  var getCountByJSONP = function(url, count, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    var callbackName = 'ExternalCallback_' + count;
    window[callbackName] = function (data){
      if(script.parentNode){
        script.parentNode.removeChild(script);
      }
      try{
        delete window[callbackName];
      }catch(e){
        window[callbackName] = null;
      }
      callback(data);
    };
    script.src = url + '&callback=' + callbackName;
    document.body.appendChild(script);
  };

参考サイト：JavaScriptプログラミング講座【XMLHttpRequest について】

（略）


    var url = 'http://jsoon.digitiminimi.com/twitter/count.json?url=' + encodeURIComponent(permalink);
    getCountByJSONP(url, count, function(data) {
      console.log(data);
      twitterButton.querySelector('.twitter-count').innerHTML = data.count;
    });
    count++;


（略）

追加コードだけですと分かりにくいですね。そろそろまとめないといけないです。

#javascript, #Twitter, #WebTips, #はてなブログ

Twitter
Facebook
ブックマーク
LINEで送る