View Full Version : FB:Like button on Sencha Touch Toolbar

8 Feb 2011, 10:24 AM

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 +
e.async = true;

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

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


8 Jun 2011, 1:11 AM
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.

24 Jun 2011, 4:13 AM

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.


24 Jun 2011, 4:13 AM
Sorry forgot to post the webpage - www.b4local.org/start

22 Jul 2011, 11:33 AM
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.

22 Jul 2011, 1:10 PM
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;
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

24 Aug 2011, 4:45 PM

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){
//this.setLoading(true, false);
Ext.getCmp('wrapper').setActiveItem(1, 'fade');
} , {

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!



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?

27 Apr 2012, 12:02 AM
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;
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>',


27 Apr 2012, 4:01 PM
That's pretty cool but I don't think it works in iOS...

27 Apr 2012, 5:22 PM
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: [
'<span id="social-facebook">',
'<fb:like href="http://www.myUrl.com" send="true" width="450" show_faces="true"></fb:like>',
'<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>',