How to Add Facebook Tabs via WordPress

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]