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

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

【はてなブログ高速化3】Facebookシェアダイアログでシェアする/Facebook SDK for JavaScript

はてなブログ Web Tips

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


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

シェアダイアログ」を使ってシェアボタンを作ります。

Facebook に新しいアプリを作成して、ウェブサイトを登録しておかないとエラーが出ます。

Facebook アプリの作成

  1. Facebook Developersにログイン
  2. 「新しいアプリを追加」をクリック
  3. 表示名(自由に)、連絡先アドレスを入力、カテゴリを選び、「アプリIDを作成」をクリック
  4. メニューの「設定」をクリック
  5. 「プラットフォームを追加」をクリックして、「ウェブサイト」を選び、シェアダイアログを挿入するサイトアドレスを入力する
  6. 変更を保存する
  7. 「アプリID」をコピーして、下のappID:'your-app-id'に入力する

シェアダイアログ

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

<div id="myShareButtons">
  <div class="facebook-share-button" style="display:inline-block; cursor:pointer;">
    <i class="blogicon-facebook lg"></i> 
    <span class="facebook-count"></span>
  </div>
</div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Javascript

(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.addEventListener('click', function() {
      FB.ui({
        method: 'share',
        href: permalink,
      }, function(response){});
    });

    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);
})();

完成です。