Facebook Tab Manager Update for Timeline Pages

The 3.2 release of Facebook Tab Manager for WordPress adds support for the Timeline for Pages 810-pixel-wide tab layout introduced at the beginning of March. I had previously published some workarounds but this is the first update to bake support for the new tab layout into the plugin.

There is now a Tab Layout dropdown menu under options. For existing tabs, it defaults to the 520-pixel layout. For new tabs, it defaults to 810 pixels. Facebook Tab Manager sets this width on the HTML <body> tag for your tab content to prevent it from overflowing the width of the iFrame that contains it and causing scroll bars to appear.

Layout option

When you record the parameters for your app in Facebook, you must also specify the 810-pixel width there. The new tabs (which Facebook now also refers to as “page apps”) also seem to require you to record the canvas URL parameters under “App on Facebook” in addition to the tab url parameters under “Page Tab.”

Facebook developer utility

You should also take the time to edit the large icon associated with your app, which will be used as the source for the image used to advertise your tab on the Timeline.

The larger icon must be set

You can see the results here. You can run this test yourself by creating a fbtab post containing the shortcode [fbtab_width_test]. Note that the border of the 810-pixel width box is clipped off because it’s right at the limits of the body width.

 

  • Torben Slot Petersen

    Hi
    I use the Facebook Tab Manager, but resently (as of Thursday d. 29th) all my apps are being cut off at the bottom. Maybe the ‘Set resize/autoresize (for tabs taller than 800 pixels)’-feature doesn’t work anymore? I’m pretty desperate as are my clients. Can you Help me?

    I also have some issues with my SSL certificate, but they are being delt with and I don’t think a certificate will help out the problems with cut-content – will it?

    Help is very much appreciated

    You’ll see one of my clients apps here on facebook: https://www.facebook.com/pages/Susanne-Schjerning-Studio/145056038949543?sk=app_160313427423155

    and here on wordpress: http://www.storyhunter.dk/fbtab/guide-til-vask/
     

    • http://www.carrcommunications.com David F. Carr

      It looks like the resizing code is being output correctly. When I tried to access the tab, I got a security certificate error, followed by a page not found, so I never got as far as seeing what was going on with the resizing.

      • http://www.carrcommunications.com David F. Carr

        That is, I was only able to access your content on the storyhunter domain

  • Lemarcus Lee

    I am having the same issue with a tab I have created.  I checked & rechecked the ‘Set resize/autoresize (for tabs taller than 800 pixels)’ feature several times on the individual post, as well as, in the FB Tab Settings.  I have also checked that I have made your suggested adjustments for Timelines, however, nothing has worked.  I actually changed nothing when this began.  I added a photo gallery one night last week, checked if it was working, and it was.  So, I went to bed.  The next day was intending to add more elements to the tab, and checked FB, and the tab was not showing completely, like the months before.  Please, help.  This is a client’s Tab & they are waiting.  The link is:

    http://www.facebook.com/pages/PureLuck/238021552942439?sk=app_254551197952152

    • http://www.carrcommunications.com David F. Carr

      OK, I do see that there’s a problem here. It seems that the resizing code is only working properly when the page is accessed via an https connection. I can see that one of my pages that displays fine via https has the bottom cut off when viewed via http. When you view the content via https, I also access the script library code from facebook via an https address. Otherwise, I access it via http for lower overhead. But Facebook is transitioning to https as the standard, I’m going to experiment with making the script load via https all the time. If that works, I will put out a bug fix update.

      I did notice that your content does not seem to be accessible at all via https – I get security certificate errors. So you need to fix that, too.

      • http://www.carrcommunications.com David F. Carr

        Sorry, my theory about how to fix the resizing bug did not work. For some reason the resizing code is only working when the user is in https “secure browsing” mode. I do not know how to fix this just yet.

        • http://keywordanalyse.dk/ Torben Slot Petersen

          Hi David

          As said I
          had the exact same issue as Lemarcus – but then I added the extra java script
          I found here: https://developers.facebook.com/docs/reference/javascript/
          in ‘More code to add to head (External Styles)’. The first code in the post was
          enough to get my apps working for non-admin facebook users that are logged into
          facebook. If your apps play audio or video, you need to set the channel code too
          as I understand it (read the post). I think I added the code, before you read
          my comment. That’s probably why you could affirm that resizing was ok.

          To my
          knowledge the Tab Manager has two problems: The current resizing java script is
          outdated and then there is the http-thing. I first experienced that problem two
          days after I shifted my pages to Timeline about the 1th or 2th of March. I
          could – and still can – only see apps on my pages from non-admin fb-profiles.

  • Charlotte_sommer

    I cant seem to get Facebook tab manager to show up on my fanpage. I have followed the step above. But its still not showing anything on my fanpage?  http://www.facebook.com/CharlotteLotusSommer Im not sure what im doing wrong?