IMUZA.com

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

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

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

2016/08/31 javascript, Twitter, WebTips, はてなブログ

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

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

  • Twitter ツイートボタン
  • ウェブインテント
  • ツイート数取得

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++;


(略)

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

【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript
【はてなブログ高速化5】 Google+のシェアボタンをカウント付きで自作する
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/27

WordPress:Fetch(Ajax)でお問い合わせフォーム(プラグインなし)

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress66
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com