IMUZA.com

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

ホーム / Facebook / 【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する

【はてなブログ高速化2】Facebookシェアボタン/シェアカウントを素の Javascript で取得する

2016/08/29 Facebook, javascript, WebTips, はてなブログ

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

前記事の「【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする」では、ブックマーク数を非同期で取得するために、XMLHttpRequest を使っています。

jQuery には Ajax 関数(でいいのかな?)が実装されていますので比較的簡単に非同期 HTTP 通信が可能ですが、素の javascript ですと情報も少なくなかなか難しいところがあります。

前記事にも書きましたように「はてなブックマーク」の取得はクロスドメイン制限でさらに面倒になりますので、その制限のない(のだと思う)Facebook のシェアカウント取得を先にやってみようと思います。

Facebook シェアボタン

その前に、そもそもの Facebook シェアボタンというものをあまり理解していませんので、あらためて「Facebook Developers」を読んでみました。「ウェブ上のシェア」です。

シェアボタンには2種類があるということかと思います。間違っていましたらご指摘ください。

  • ソーシャルプラグイン利用した「シェアボタン」
  • ダイアログを直接開く「シェアダイアログ」

どちらにしても、シェアするページが「Open Graphマークアップ」されていないといけないです。<meta property="og:ってやつですが、はてなブログはデフォルトで吐き出すようになっていますので問題ありません。

シェアボタン

やはり公式のシェアボタンから試した方がいいだろうとやってみたのですが、この方法でiframeを使わずダイアログを開くためには、イベントハンドラonclickを使って別ウィンドウを開くしかないですね。「シェアボタン」のドキュメントに素直にシェアダイアログを使えと書かれています。

ウェブサイトでシェアダイアログを開くためのボタンを使用しない場合や、Facebookが提供するボタンがウェブサイトのデザインに合わない場合は、リンクのシェアにウェブ版シェアダイアログを使用することもできます。

ただ、シェアボタンはコードを貼り付けるだけですが、シェアダイアログにはアプリ登録が必要になります。

イベントハンドラ onclick を使ったダイレクトリンク

カスタマイズ > フッタ に入れる html

<div id="myShareButtons">


<!-- hatena-bookmarkは略 -->


<a class="facebook-share-button" 
    href="" 
    onclick="window.open(this.href,'FacebookWindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" 
    title="Facebookでシェア">
    <i class="blogicon-facebook lg"></i> 
    <span class="facebook-count"></span></a>
</div>

同様に javascript の方も hatena-bookmark のコードは省略しています。最終的にはひとつにまとめる予定です。

(function(){
  var getFbShareCount = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var obj1 = JSON.parse(xhr.responseText),
          obj2 = 'share' in obj1 ? obj1.share : {},
            count = 'share_count' in obj2 ? obj2.share_count : 0;
        callback(count);
      } else {
        callback(0);
      }
    };
    xhr.send(null);
  };


  var myshareButtons = document.getElementById('myShareButtons');
  var articles = document.querySelectorAll('article');
  Array.prototype.forEach.call(articles, function(article) {
    var bm = article.querySelector('.bookmark');
    var permalink = bm.getAttribute('href');
    var title = bm.innerHTML;


    var shareButtons = myshareButtons.cloneNode(true);
    var facebookButton = shareButtons.querySelector('.facebook-share-button');
    facebookButton.setAttribute('href', 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(permalink));
    var url = 'https://graph.facebook.com/?id=' + encodeURIComponent(permalink);
    getFbShareCount(url ,function(data) {
      facebookButton.querySelector('.facebook-count').innerHTML = data;
    });


    article.querySelector('.social-buttons').appendChild(shareButtons);
  });
  myshareButtons.parentNode.removeChild(myshareButtons);


})();

XMLHttpRequest

XMLHttpRequest を使っての非同期通信は、わかりやす解説されているサイトがたくさんありますので省略しますが、open()メソッドの3つ目の引数にtrue(初期値)を指定しますと非同期通信になります。

受信に成功しますと、JSON形式のテキストで帰ってきますので、JSON.parseでオブジェクトに変換します。

{
   "og_object": {
      "id": "820791891355114",
      "type": "website",
      "updated_time": "2016-07-21T04:43:33+0000"
   },
   "share": {
      "comment_count": 0,
      "share_count": 0
   },
   "id": "http://test0.hatenablog.jp/entry/2016/06/03/102114"
}

後は読みだすだけですが、今回の場合、非公開のテスト用サイトだからなのか、id以外帰ってこないページがありましたので、その場合の処理も入れました。

長くなりましたので、「シェアダイアログ」の方は別記事です。また、ボタンの装飾もはてなブックマーク同様全て完成後になります。

【はてなブログ高速化】シェアボタン(ソーシャルボタン)を改良して読み込みを速くする
【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

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

2023/03/10

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

2023/02/28

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

2023/02/21

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

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • 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