読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

はてなブログ Web Tips

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


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



Twitter ツイートボタン

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

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ツイートボタンを埋め込んでいくようです。これは、はてな公式のツイートボタンと同じですので、今回は使いません。


ウェブインテント

もうひとつは、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);


ツイート数取得

公式サイトでのツイート数取得は昨年廃止されており、その後全く気にかけていなかったのですが、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++;

(略)

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