Facebook share and like with javascript callback

1. Like button,

Here is the html of what url in the “like” box,

<div class="fb-like-box"></div>

You have to create a facebook application, and assign the “appId” in the fbAsyncInit method,

    window.fbAsyncInit = function () {
        FB.init({
            appId: '#Replace Your AppID#',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true
        });
        FB.Event.subscribe('edge.create', function (response) {
            alert('You liked the URL: ' + response);
        });
    };
    (function (d) {
        var js, id = 'facebook-jssdk';
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));

With the FB.event.subscribe callback method, you can put some of your stuff, like award the guy who liked your site =)

2. Share button

This is calling FB.init(), then FB.ui() to load the dialog and with callback, the callback response, you can retrieve the post_id for your tracking.

window.fbAsyncInit = function () {
        FB.init({
            appId: '#Replace Your AppID#',
            status: true,
            cookie: true,
            xfbml: true,
            oauth: true
        });

        FB.ui(
        {
            method: 'feed',
            name: 'Facebook Dialogs',
            link: 'http://youtubeplaylist.net',
            picture: 'http://fbrell.com/f8.jpg',
            caption: 'Reference Documentation',
            description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
        },
            function (response) {
                if (response && response.post_id) {
                    alert('Post was published.');
                } else {
                    alert('Post was not published.');
                }
            }
        );

    };
    (function (d) {
        var js, id = 'facebook-jssdk';
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s