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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi