How to add FB Like button to Sencha Touch

Today, we are going to see how to integrate facebook like button to the panel component in the Sencha touch 2. Facebook likes button is used to share the content to the facebook. Let's see the demonstration with the working example


Implementation:

Ext.define('MyApp.view.LikeUs', {
    extend: 'Ext.Panel',

    config: {
        title: "LikeUs",
        layout: 'fit',
        listeners: {
            show: function () {
                window.fbAsyncInit = function () {

                    FB.init({
                        appId: '<appID>',
                        status: true,
                        cookie: true,
                        xfbml: true
                    });
                };

                (function () {
                    var e = document.createElement('script');
                    e.type = 'text/javascript';
                    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
                    e.async = true;
                    document.getElementById('fb-root').appendChild(e);
                }());
            }
        },

        items: [{
            xtype: 'container',
            html: '<div id="fb-login-button"><fb:like align="right" href="http://<share URL>" layout="button_count"></fb:like></div><div id="fb-root"></div>',
        }]
    }
});

Explanation

Lets take a panel class with name LikeUS and attach show event to the panel using listener configuration. This show event will be triggered at the time of panel is getting displayed in the browser. Inside the show event method, we are initializing the facebook SDK in asynchronous using FB.int() with configurations passed as the parameter.

Also we are including the facebook JS SDK library file inside div element with id fb-root, which is added in container html configuration. This html configuration also contains the facebook share button code.

If you want to learn more about facebook Javascript SDK, Please visit the facebook developers

Important Note: You need to replace the <AppID> and <share URL> with your data when you are integrating the above code.

Hope, you enjoyed this Post.