FB:Like button on Sencha Touch Toolbar

[joelphilipgarcia]

Hey,

It took me a little while to figure out how to put a FB:Like button on a Toolbar. I actually started investigating PhoneGap until I realized that I had to build separate versions for different Operating Systems.

In your html file, you'll want to stick the following.

<div id="fb-login-button"><fb:like align="right" href="http://apps.facebook.com/eplstat" layout="button_count"></fb:like></div>

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

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '153141023907', 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);
}());
</script>

In your js file, you'll want to put the following:

this.toolbar = new Ext.Toolbar(
{
items: [{xtype:'box', el:'fb-login-button', autoShow:true }]

});

When you reload the page, you should have a like button that points to your registered facebook app.

I've investigated putting in <fb:comment> but the amount of js scripts that are required seem a bit heavy, so I may just end up doing this on the backend.

Example app is here on Chrome
http://www.eplstat.com/Sencha/index.html

On your IPhone\Droid, http://www.eplstat.com should work.

Thanks,
Joel

[BlackBook]

Great example!

This helped me a lot. Thanks.

BTW, to change the page/link that the LIKE button will like.. just modify the HREF attribute of the <fb:like> tag.

[jayellis]

Hi,

looking at using this for a client and as I am only new to Sencha I can't work out where to put the code in the .js file

I would like it in the UI bar at the top like shown on your example

The website I am building looks like this at the movement,

Any help would be great thanks.

Jay

[jayellis]

Sorry forgot to post the webpage - www.b4local.org/start

[koolaid1551]

any ideas how i would add the like button to its own panel... I tried what you have now with the code i generated on facebook for a like box and it works but I need the like box to show up in a panel not in the tool bar.

[koolaid1551]

Well i figured it out what I did was I added it with contentEL

myapp.views.TestPage = Ext.extend(Ext.Panel, {
    scroll: "vertical",
    layout: "fit",
    contentEl: "fb-feed",
    initComponent: function () {
        var a = {
            xtype: "toolbar",
            title: "Facebook Feed"
        };
        this.dockedItems = a;
        myapp.views.TestPage.superclass.initComponent.call(this)
    }
});
Ext.reg("testpage", myapp.views.TestPage); 

in my html i inserted the following code (you might want to change your script to what I have since its smaller)

<div id="fb-feed"><fb:like-box href="http://www.facebook.com/cheezit" width="292" show_faces="false" border_color="" stream="true" header="false"></fb:like-box></div>
<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 

However now I can't scroll if I touch on the like box.. well at least on an iphone. also it flashes in chrome before the app loads. I tried to use class="x-hidden" but that didn't work



I also forgot to mention that after you login with facebook it crashes in iOS. for both my example and joels

[whatadewitt]

Hi,

I have the following in some of my code, attempting to get the "login" button to display in my app...:

buttons = {            layout: 'vbox',
            defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
            items: [{
                 text: 'Login',
                scope: this,
                hasDisabled: false,
                handler: function(btn){
                    console.log("Login");
                    //this.setLoading(true, false);
                    Ext.getCmp('wrapper').setActiveItem(1, 'fade');
                }
            } , {
                xtype:'box', 
                el:'fb-login-button', 
                autoShow:true 
            }]
        };

Now... I have the code loading... but the "login" button is not showing up... the other button is, and if I view in Chrome with the developer tools I can see that my "div"in the proper location, but it's not showing up... the iFrame is there, just invisible...

There are no javascript errors, and I feel that I am SO close... if anyone could help me out, I sure would appreciate it!

Thanks,

--d

EDIT: Fixed the bit... the iFrame is there... just not showing up...

EDIT 2: In my infinite wisdom, I was using fb:login and not fb:login-button... FML Thanks forum! You were a great help!

EDIT 3: Final edit for the night... when I get my user to login... what do I do about the callback to log the user in to my app?

[bhavin]

ok....got the way to integrate FACEBOOK-LIKE button with authentication into sencha touch 2.0.0 .


just follow the code :

Ext.define('Main.view.LikeUs', {
    extend: 'Ext.Panel',
    config: {
        title: "LikeUs",
        layout: 'fit',
    listeners: {
            show: function() {                
                    window.fbAsyncInit = function() {
            FB.init({appId: '0123456789123456', 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://www.facebook.com/appname" layout="button_count"></fb:like></div><div id="fb-root"></div>',            
        }]
    }


    });

[Eskim0]

That's pretty cool but I don't think it works in iOS...

[Coopxl]

Hi, I'm trying to add the like button to a container using the following code with no luck. I'm new to Sencha Touch 1 -- anyone see what I'm doing wrong?

socialSharingCmp = new Ext.Container({
      scroll: false,
      tpl: [  
        '<div>',
          '<span id="social-facebook">',
            '<fb:like href="http://www.myUrl.com" send="true" width="450" show_faces="true"></fb:like>',       
          '</span>',
          '<div id="fb-root"></div>',
          '<script type="text/javascript">',
          'window.fbAsyncInit = function() {FB.init({appId: \'myAppId\', 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); }()); </script>',  
        
        '</div>'        
      ],
    });

Thanks