First, download and install the Facebook Tabs Manager Plugin by David Carr.
This plugin will get you started on how to begin creating Facebook plugins. John Hayden of Inbound Zombie created a YouTube video on basic usage of Facebook Tab Manager to customize your page.
So try it and get everything set up!
Facebook Tab Manager Shortcodes
[fblike like="0"] PROMO CONTENT[/fblike]
*Only shows to people who have NOT LIKED the page
[fblike like="1"] PROMO CONTENT[/fblike]
*Only shows to people who have LIKED the page
[fbtab query="posts_per_page=5"] or [fbtab query="category_name=clips"]
*Pull content from your blog
*Parameters like="1" like="0" format="excerpt" (or "headline" or "full")
[fbtab]<script>alert("silly example")</script>[/fbtab]
*Placeholder for inline JavaScript inserted in Visual Editor
*E.g., in visual editor,
[js]<script src="http://domain.com/wp-includes/js/jquery/jquery.js" type="text/javascript"><!--mce:0--></script>JQuery(domcuent).ready(function($){$('#eyechart').delay(2000).slideUp(600);});[/js]
Secure v. Regular Connection Issue with Facebook and Facebook Tab Manager
There is a known bug within Facebook. Simply click allow or yes.
IE Scrollbar Problems resolution
However, to make the tab fit within IE standards, I had to make a few adjustments. In my Facebook Tabs Post, I have the following selected:
*Set resize/autoresize (for tabs taller than 800 pixels)
*Hide post title, only show post content words / images
However, I still got a horizontal bar across the bottom (only in IE; how I loathe IE6-8). After trying various CSS hacks, I found adding this to the CSS worked:
[html]html {
overflow-x: hidden;
overflow-y: auto;
}
body {
width: 500px;
margin:0; padding:0; border:0;
overflow:hidden;
}[/html]