NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2013.06.21

facebookのいいねボタンでコールバックを得る方法+おまけ

鳥よし

俺のターン!! 鳥よしです。

ちょっと前に、Twitterのツイートボタンでコールバックを得る方法という記事を書いたのですが、

そのまま放っておいたら知人より「気持ち悪いからfacebookも書いてよ」とクレームを受けたので(嫌々)書きます。

いいねボタンでコールバック

 

【JS】

alertしている部分に好きな処理を入れてください。

いいねをした時といいねを取り消した時の例を記載しています。

※1ページ内にいいねボタン一個の想定で書きます。

<script type="text/javascript">
window.fbAsyncInit = function() {
    FB.init({
        appId      : '[自分で作ったfacebookアプリID]',
        status     : false, // check the login status upon init?
        cookie     : true, // set sessions cookies to allow your server to access the session?
        xfbml      : true  // parse XFBML tags on this page?
    });

    FB.Event.subscribe('edge.create',
        function(response) {
            alert('いいねした');
        }
    );

    FB.Event.subscribe('edge.remove',
        function(response) {
            alert('いいね取り消した');
        }
    );
};
</script>
<script src='http://connect.facebook.net/ja_JP/all.js'></script>

【HTML】

<div id="fb-root"></div>

最後に、いいねボタンを設置します。
内容はお好きなようにしてください。

<div data-href="[いいねしたいURL]" data-send="false" data-width="450" data-show-faces="false"></div>

 

【おまけ】シェア(Feed Dialog)でコールバック

※自己責任でお願いします。

公式シェアボタンは廃止されてしまったので、下記記事を参考にFeed Dialogでシェアボタンの代替えを行い、コールバックを得る方法を書きます。

【JS】

alertしている部分に好きな処理を入れてください。

<script type="text/javascript">
window.fbAsyncInit = function() {
    FB.init({
        appId      : '[自分で作ったfacebookアプリID]',
        status     : false, // check the login status upon init?
        cookie     : true, // set sessions cookies to allow your server to access the session?
        xfbml      : true  // parse XFBML tags on this page?
    });
};
function postToFeed(url, description) {
    var obj = {
        method: 'feed',
        link: url,
        picture: '',
        name: '',
        caption: '',
        description: description
    };

    function callback(response) {
        if (response && response.post_id) {
            // コールバック後の処理
            alert('コールバック');
        }
    }

    FB.ui(obj, callback);
}
</script>
<script src='http://connect.facebook.net/ja_JP/all.js'></script>

【HTML】

<div id="fb-root"></div>

最後に、ボタンを設置します。
画像を使うなり、内容はお好きなようにしてください。

<a onclick='postToFeed("[シェアしたいURL]", "[デスクリプション]"); return false;'>シェア</a>

これで、いいねをしたかの判定などに使えると思います。