Updates to Facebook Tab Manager for WordPress

Posted on February 22, 2011 by david

I continue to update Facebook Tab Manager aggressively, maybe too much so. I really should have called the first version 0.1, as I’ve now put out so many upgrades and fixes that it’s at version 2.1 — less than two weeks after the initial release.

Facebook Tab Manager lets you prepare and edit content to be displayed on Facebook as just another kind of post within the WordPress editor. When you publish your post, Facebook tab manager displays instructions for registering your content in the Facebook Developer application. This is a good way of maximizing the free resources Facebook provides for sharing your applications and marketing messages through the social media service. The content you display on Facebook can include the output of other plugins, using WordPress APIs such as shortcodes and content filters.

You can now create either a simple page tab, or both a tab and a canvas page (you view a tab embedded within a Facebook page for your business or organization, whereas a canvas is viewed, outside the context of a page).

After some futzing around, and feedback from early users of the plugin, I also figured out how to get rid of the scroll bar, and allow the page tab content to resize, for content that exceeds the default IFrame dimension of 800px tall.

2.0

Fixing template.php display for canvas pages

1.9

Correcting tab/canvas setup code.

1.8

  • Added checkbox option to set resize / auto resize for tabs taller than 800 pixels
  • You can now create both a tab and a canvas page for your application.

1.7

  • Added options page for setting defaults, such as filters to ignore and CSS to apply
  • Clarified documentation for how to fill out the Facebook Developers form
  • Flush Rewrite Rules set to run every time on initialization (not supposed to be necessary, according to the documentation, but seems to work better on some configurations)

1.6

Refinements to shortcode function

1.5

Added  Shortcode documented on the Installation section of this document. Makes it easier to integrate blog content and JavaScript widgets such as Facebook plugins.

1.4

  • Added the ability to deactivate content filters when the fbtab template is displayed. This lets you eliminate plugin content modifications that are not appropriate for your Facebook tab.
  • Updated the instructions for configuration on Facebook.

1.1, 1.2, 1.3

Fixes to default styles handling, directory locations

1.0

First public release February 2011

For updated documentation, see facebooktabmanager.com
Share:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • email
  • LinkedIn
  • MySpace
  • PDF
  • Slashdot
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz
This entry was posted in Facebook Tab manager, Web Development, WordPress. Bookmark the permalink.
  • http://twitter.com/WayneBuckhanan Wayne Buckhanan

    Cool stuff David.

    I just installed v2.1 and got my tab added to a new fan page in a matter of minutes.

    Mind you, since then I've been attempting to figure out what setting to twiddle to make the content show when folks aren't logged into FB only to realize your demo page doesn't show content when folks aren't logged into FB. Is that inherent in the iframe methods from FB or a bug?

    Thanks!

  • http://twitter.com/WayneBuckhanan Wayne Buckhanan

    Ah, nevermind. I found that it *is* a bug, and it isn't yours, it's Facebook's.

    http://bugs.developers.faceboo…

    BTW, what format would you like any improvements sent to you?
    Diff? Patch? Complete plugin.zip?

    Thanks!

  • davidfcarr

    Wayne,

    Any improvements you can share would be much appreciated. If you send me a zip file, with comments in the code to note your changes, that would be great. You might want to grab the latest update, which has some changes (which I *hope* are improvements)

    Thanks

  • http://johnhaydon.com John Haydon

    David – great plugin here! Quick question: I'm adding a custom tab via iFrames and have created http://inboundzombie.com/fbtab…/ which has a Gravity Form. Somehow it's not displaying. Can you help?

  • davidfcarr

    Have you tried checking the box to execute wp_head commands? My guess is that Gravity Forms is dependent on some JavaScript libraries that are probably queued up that way.

    You may find that you then need to disable some of the actions associated with wp_head that don't make sense in this context. Make sure you have version 2.2, which I just put out today, as it does a better job of handling that task of selectively disabling WP filters and actions.

  • http://johnhaydon.com John Haydon

    Thanks!

    So the URL that does in the “Canvas URL” field would be the entire URL of the WP Page (http://inboundzombie.com/fbtab…/), and (/contact-form/) would go in the field named “Tab URL”?

  • davidfcarr

    I try to supply the instructions right on the post screen, down the bottom.

    For a standalone tab, it would be http://inboundzombie.com/fbtab/ for Canvas URL and contact-form/ for the tab URL. The canvas is not really usable in this configuration because /fbtab/ isn't where your content is.

    I did add a feature that allows you to create a pair of posts, one to function as the canvas and the other as the tab (the canvas is recorded in WordPress as the “parent post”).

    In that case, you could have the canvas as http://inboundzombie.com/fbtab… form and the tab would be something like “tab123/”

    Clear as mud?

  • http://johnhaydon.com John Haydon

    Yeah – clear as mud. ;-) I just want to create a tab within a Facebook Page, that's 520px wide.

  • davidfcarr

    So stick with http://inboundzombie.com/fbtab/ for Canvas URL and contact-form/ to complete the tab URL, and it should work. Make sure you have the latest release, and if you're still having trouble, feel free to ping me again.

    If you just want to post some basic content that fits neatly within an 520 x 800 px frame (actually a little less, to allow for padding), then you shouldn't have to fuss with any of the checkboxes and special configuration options.

  • http://johnhaydon.com John Haydon

    David – I got it working. One more question: If I want to make the background of my tab white, what would be the CSS selector / code?

  • davidfcarr

    You treat it as a separate page within a page, so body is where you would set the background.

    The main content area is #content, so you can do something like

    body {background-color: red; }
    #content {margin: 10px; padding: 10px; background-color: #FFF; }

    It should be a white background to begin with, unless you're doing including wp_head actions that output CSS. Using the Advanced options, you can turn off selected actions that are producing effects you don't want.

  • http://www.GetYouStartedeMarketing.com Jan Rossi

    oops. I posted something in another area….but probably should have been here….so can you take a peak at the like/not liked area? i should not repost…thank you!

  • Dustin

    Mr. David

    I have set up my app. When I go to my app's profile page and click the blue button “got to app” it shows up just fine, but when I click on my app located in the left side bar location of the page, it says “Invalid API key specified

    The app you are trying to access does not exist or has been disabled.”

    Any help?

  • davidfcarr

    I don't think that error message is coming from FB Tab Manager. If you're pulling in program from some other plugin or script, that involves some sort of API Key setup, I'd look there for the problem. Only speculation, but maybe you're running something that doesn't like being viewed from within an iFrame?

  • davidfcarr

    Jan, I thought I saw a note from you saying you had figured this out yourself, but let me know if you still need help.

  • Dustin

    hmmm. I hate to admit this, but I didnt read your huge red sentence about the permalink. Works like a charm. Thanks for the great product and quick response.

  • http://www.GetYouStartedeMarketing.com Jan Rossi

    David – all is good! Yes I figured out the “link within” plug-in was the culprit so I checked it to be filtered out and voila! perfect. Thanks for double checking…much appreciated. Jan

  • photoworldmanila

    Thank you for this plugin and I finally was able to add a form to our fb page http://www.facebook.com/Photow…

    with the use of the gravity form.

    Best,
    Nap

  • Dustin

    When I tried to upgrade it failed and erased all of my tabs. I had 4 business pages going with 8 apps each. Know anyway to recover?

  • davidfcarr

    Is the Facebook Tabs menu just not showing up? You shouldn't have lost any data, but you need to get the plugin functioning again. I'd suggest downloading the file from the WordPress.org website and uploading via FTP if the automated upgrade feature isn't working for some reason.

  • MichaelE

    Hi David,

    After Publishing my new tab the canvas URL, Tab Name, and Tab URL aren't showing up under “Facebook Integration Tab.” Any advice?

  • David Carr

    Not sure I understand the question. You're saying the instructions aren't showing up under your post, within the FB Tab Screen on WordPress? Or are you asking a question about the Facebook Developer UI?

  • http://www.facebook.com/people/Dev-Box/100002114513279 Dev Box

    I'm struggling. I'm trying to create a tab that shows up in a facebook page, but it's not happening.

    Is it because I am leaving the secure URLs blank as my server is not set up with SSL?

    Thanks

  • Alex

    David,

    Great plug in , thank you!
    I just went in to crete a new Tab and noticed that FB has changed the initial format for setting up the app. I did not think it was a big deal because you still have the tab url and the canvas url, they are just hidden behind a reveal function. I proceeded as usual but it does not seem to get through – the tab on the FB page appears blank.

    I’m hoping this is temporary as this change is obviously new (I was in yesterday and the old format was in place) but was wondering if you were aware of any of this and if users need to do anything different?

    Thanks!