みかづきブログ その3

3ヶ月つづけてみました。

いいねボタンにコールバックを設定して、いいねした時・取り消したときの処理をハンドリングする

Facebookのいいねボタンに対してコールバックを設定したかったので調査してみると、意外と簡単にコールバックを設定できることがわかったので試してみます。


HTML

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : "#{アプリID}",
      xfbml      : true,
      version    : "v2.5"
    });

    // いいねした際のコールバック
    FB.Event.subscribe("edge.create",
      function(evt) {
        console.log(evt); // => URLが返ってくる
        alert("いいね!");
      }
    );
    
    // いいねを取り消した際のコールバック
    FB.Event.subscribe("edge.remove",
      function(evt) {
        console.log(evt); // => URLが返ってくる
        alert("よくないね!");
      }
    );
  };
    
  (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>
<div id="fb-root"></div>
<div class="fb-like" data-href="http://jsrun.it/kimmy/O9Gj" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

DEMO

http://jsrun.it/kimmy/O9Gj



いいねボタンを押すとアラートが表示されます。