1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    7
    Vote Rating
    0
    joelphilipgarcia is on a distinguished road

      0  

    Default FB:Like button on Sencha Touch Toolbar

    FB:Like button on Sencha Touch Toolbar


    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

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    17
    Vote Rating
    0
    BlackBook is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    jayellis is on a distinguished road

      0  

    Default Help!

    Help!


    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

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
    jayellis is on a distinguished road

      0  

    Default fwd

    fwd


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

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    0
    koolaid1551 is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    0
    koolaid1551 is on a distinguished road

      0  

    Default


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

    PHP Code:
    myapp.views.TestPage Ext.extend(Ext.Panel, {
        
    scroll"vertical",
        
    layout"fit",
        
    contentEl"fb-feed",
        
    initComponent: function () {
            var 
    = {
                
    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)
    PHP Code:
    <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

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    whatadewitt is on a distinguished road

      0  

    Default


    Hi,

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

    Code:
    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?
    Last edited by whatadewitt; 24 Aug 2011 at 5:23 PM. Reason: one more question...

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    14
    Vote Rating
    0
    bhavin is on a distinguished road

      0  

    Default FB-LIKE button in sencha touch 2.0.0 penal

    FB-LIKE button in sencha touch 2.0.0 penal


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


    just follow the code :


    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>',            
            }]
        }
    
    
        });

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    Eskim0 is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    Coopxl is on a distinguished road

      0  

    Default Trying to add FB like button to Sencha container

    Trying to add FB like button to Sencha container


    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?
    Code:
    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

Similar Threads

  1. Replies: 10
    Last Post: 20 Jan 2012, 10:10 AM
  2. Sencha Touch 1.0.1 toolbar of show
    By helloaccp in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 5 Jan 2011, 6:04 PM
  3. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  4. Sencha Touch - Overlay on Click of TabPanel tab button
    By meshwerk in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 13 Oct 2010, 7:14 AM

Thread Participants: 7

Tags for this Thread