You do this by adding the query parameter ?fb=tab to the end of the URL, for example:

http://www.carrcommunications.com/2011/05/re-purpose-a-wordpress-post-or-page-with-facebook-tab-manager/?fb=tab&resize=1

This causes the content to be displayed in the fbtab template, using the default styles (Facebook fonts etc.). You would then plug this URL into the Facebook Developers utility the same way you would with any other Facebook Tab Manager post.

I used the resize parameter to make the iFrame for the tab content resize for content taller than 800 pixels to avoid the display of a vertical scroll bar. Note that this doesn’t do anything to avoid problems with content that is wider than the 540 pixels Facebook provides for tab content. So if your existing page or post includes a 550-pixel wide image, it’s not going to fit neatly into the iFrame.

The optional query parameters you can use are:

• resize=1 (invoke the resizing JavaScript)
• new=1 (links should open in a new window)
• head=1 (execute wp_head)
• footer=1 (execute wp_footer)
• minfilters=1 (added in version 2.7.2, turns off all but essential filters on the_content)

Note that you could also use that last parameter in conjunction with a Facebook Tab Manager post as an alternative to selectively turning off filters on the_content. Useful if you’re trying to get rid of the output of plugins like Sociable that add icons and links to the end of each post.

Example:

http://www.carrcommunications.com/fbtab/test-6/?minfilters=1

Changes in version 2.6.2 2.6.4

• Added [fblike] shortcode as an alias to [fbtab nodecode="1"]. Recommended for situations where you are wrapping a block of text and image content inside a shortcode that indicates whether it should only be shown to people who have not yet liked, or who have liked your page. Example [fblike like="0"]CONTENT TO SHOW TO NEW VISITORS[/fblike] [fblike like="1"]FAN-ONLY CONTENT[/fblike]
• To display an existing page in the fbtab template, you can add the query string ?fb=tab to the end of the page url. You can also use resize=1 to invoke the resizing JavaScript. Example:http://www.carrcommunications.com/contact/davids-resume/?fb=tab&resize=1
• Update: version 2.6.4 also lets you set query parameters new=1 (links should open in a new window) head=1 (execute wp_head) and footer=1 (execute wp_footer). I think that’s about as fancy as I’d want to make it from options you can pass through the url, but I came across cases where these would be useful in my own experiments.
• Users who don’t like my template can now specify their own should be used instead. Only recommended for advanced users with their own plugin/template development skills.
• Better conformance with WordPress coding standards.

Here is the background. I originally set up the fbtab shortcode to cover a couple of different scenarios, one of which was a technique for including inline JavaScript like one of the snippets you might get from the Facebook Social Plugins page. The idea was to let users paste in the script snippet in the WordPress editor’s visual mode as if you were entering a code sample for display rather than execution. I’d then let the shortcode function decode any HTML entities transformations added by the editor.

The like=”0″ and like=”1″ attributes came later. It worked fine if what you wanted to include or exclude based on whether the visitor had liked your page was a JavaScript snippet or a blog listing generated using the query parameter. But what if you wanted to just include a block of content between the tags? You might have content that ought to be encoded as HTML entities, so the decode routine wouldn’t be appropriate for that and might cause problems. At some point, I added support for a decode=”0″ parameter to indicate the HTML decode should not be applied.

In an attempt to clean this up a little, I’ve added fblike as another shortcode tag you can use with all the same parameters, but it’s specifically intended to be used around snippets of regular HTML content.

Another request I got was for an easy way to turn an existing post into a Facebook tab. So now you can just add ?fb=tab as a query string added to the url for a WordPress post or page, and it will be displayed in the fbtab template. This essentially strips away the regular WordPress navigation and substitutes uses a stylesheet with smaller Facebook body and headline fonts. You can use ?fb=tab&resize=1 to get the template to include the resize JavaScript snippet.

Note that pages that include fancy layouts or large images may not translate neatly into content suitable for a Facebook page tab. But in some cases, I can see this as a reasonable way to have one piece of content you can manage through WordPress that appears on both your website and your Facebook page.

Finally, several people have found reasons why they wanted to make their own hacks to the template file. To allow them to do that without breaking compatibility with future upgrades to the plugin, I’ve added the ability to specify a file path to your own plugin that should be used as a substitute for the default.

The content is displayed in a very simple template with none of your site’s normal navigation, etc. That makes it easier to make it fit into a Facebook layout. I provide some default styles, but you can also add custom CSS on a per post (or per tab) basis.

You can see an example iframe Facebook tab at http://www.facebook.com/carrcomm?sk=app_188292324537166

As part of some promotional work I’ve been doing with cloud database company Caspio Inc., I’ve also created custom tabs you can see on the Caspio Facebook page and ExpressDB Facebook page. These demonstrate how data entry forms and database reports from Caspio’s online database products can be embedded in a Facebook page.

Overall, I’m finding that these iframe based tabs are much easier to work with. Previously, page tags had to be coded in FBML (the Facebook Markup Language). Now Facebook is phasing out FBML in favor of XFBML, a version of the language you can embed in any web page, which works in combination with the Facebook JavaScript SDK. XFBML can also be used within an iframe page.

Using the full set of Facebook APIs, it’s possible to do much fancier things than I’ve attempted so far. But I’m happy to see that I can also do relatively simple things easily.

ExpressDB is a service of Caspio Inc. that will record the input from any web form with zero database configuration. Just point your form at the ExpressDB service, and you’re done.

To put a form on Facebook, you start by preparing your form as usual, replacing the action tag in the form’s HTML with the one generated by ExpressDB. The ExpressDB forms gallery provides several common types of forms, such as contact and inquiry forms, that you can download and customize. The resulting web page with all formatting should be no more than 700 pixels wide to display properly on Facebook.

Copy the ExpressDB activation code and use it to replace the <form> tag in your HTML

Upload the page to your website and confirm that it works as a stand-alone web form. Next, we’ll turn it into a Facebook app.

Now log into Facebook and visit the developers section. You won’t have to do any programming, but you do need to fill out an online application to register your web form as a Facebook app.

Click on the Set Up an App button. Type in a name for your App, agree to the terms of service, and click Create App.

You now need to add your domain and the address of your web page in a couple of different spots. Facebook expects you to append a query string to the end of the web address, and here we’ve just added ?facebook after our HTML filename. For the domain, you should fill in just the root address without the http part (“www.demo.com” in this example).

Step 1

On the Canvas page, enter the address you’re requesting to be assigned to this application. In this example, we have entered “expressdb-contact” which means the application will be available at http://apps.facebook.com/expressdb-contact/

Step 2

Once you have saved these settings, you should be able to navigate to the app page address you established and see your form. Note that there is room in this example to add more branding and promotional copy along with the form. You can also use this web address as the landing page for Facebook advertisements, targeted by interests, affiliations, demographics, and geography.

Your form on Facebook

When a user submits the form, ExpressDB will display either the default confirmation page shown below or a custom confirmation page, if you’ve configured one within ExpressDB.

The ExpressDB confirmation page on Facebook

Learn more at www.expressdb.com. For a richer, but still very easy to use online database environment for creating forms, reports, charts, graphs, mashups, check out Caspio Bridge and the instructions for publishing Caspio apps to Facebook.

There are several other good tutorials available, but I decided to write my own focused on the basics. At some point, you may decide to get ambitious enough to hire a team of programmers to create custom Facebook applications and page tabs. But you want to focus on the basics before you get dazzled by the possibilities of “s-commerce”, or immersed in the complexities of programming in Facebook Markup Language (FBML).

The first three things you want to do are the simplest:

1. Register your page
2. Invite friends and customers to “Like” the page (register to get your updates)
3. Secure a unique page name. This appears like a directory under facebook.com, giving you an address pegged to your brand that you can print on business cards and promote in all the same ways you advertise your Internet domain. For example, Carr Communications is at www.facebook.com/carrcomm

Step #2 is a prerequisite for Step #3 because Facebook will not let you establish a name or “username” for your page until you have a minimum number of people “Like” your page. At this writing, you need 25 Facebook fans. And you want to secure the name that is the best match for your brand before someone else gets it.

Some background for the uninitiated: A Facebook page for your organization functions a lot like your Facebook personal profile, but the ground rules are different. You’re limited to 5,000 online “friend” connections to your personal profile. So although you can do a lot of business networking through a personal profile, eventually a successful business will want to graduate to a page. Facebook advertising is also geared toward driving people to your Facebook page, not your personal profile. A Facebook ad can also point to an external website, but linking your ad to a Facebook page is more effective.

Facebook pages are also known as Facebook fan pages. Initially, they featured a button asking you to become a “fan” of that page, and the people who clicked that button were referred to as fans. There were also some variations, where fans of a political campaigns would be shown as supporters. But then they changed the label on the button to say “Like,” and now the label on the list of fans says “X People Like This.”

Now, back to our story. To secure our organization’s identity on Facebook, we need to create a page, recruit people to Like it, and nail down a unique Facebook web address. We also want to get some conversation rolling about the organization, using the Wall for our page and some other online tools. Fancy apps and all the rest can come later.

1. Create a Facebook Page

Since Facebook changes it’s page layout and menus on a regular basis, the quickest way to get to the form for registering your page is to follow this link:

http://www.facebook.com/pages/create.php

Note that it’s important that you do this yourself, or have it done by someone you trust implicitly. Whoever creates the page is registered as the owner of the page. That is, the ultimate right to modify or delete the page will be associated with that individual’s personal Facebook login. After the account is set up, you will be able to assign administrator rights to other individuals. And you should, so that you will still be able to update the page when the page owner is out of town – or if that person gets run over by a bus. But if you delegate creation of the page to an employee or consultant, and then have a falling out with that individual, you could lose control over your own page and have trouble getting it back.

Facebook asks you to identify your page with one of three broad categories:

• Local business
• Brand, product, or organization
• Artist, band, or public figure

Give some care to the selection, particularly between “local business” and “brand, product, or organization” because you won’t be able to change it later. Categorizing your business as local might be an advantage if you want this page to show up in regional directories, but if you sell nationally you may want to identify yourself as a brand. Before you decide, also study the drop-down list under each category to see which is the best match for you. Some options that are available under local business are not shown under brand, and vice versa.

After choosing your category, give your page a name and check the box that says you are authorized to create a page for this brand or organization.

You will then be taken to the basic page template, a blank Facebook profile for your business.

So you will go from this –

Facebook "Create a Page" form

– to this –

A new Facebook page

Facebook provides it’s own instructions on getting started steps like adding a branding image to the page and creating a first few status messages. Rather than take you step by step through all of that, let me offer a couple of general tips:

• The image you associate with the page is the rough equivalent of the photo of yourself or other image you might use on your personal profile. Besides appearing in the upper left hand corner of your Facebook page, it will appear alongside the status messages associated with the page instead of your personal profile picture. One thing to keep in mind is that the version that appears next to your status messages will be squared off. Horizontal logo images tend to be butchered in the process, so try to find a relatively square icon representing your business to use in this spot. If yours is a consulting business, you can use a portrait photo as long as your face is in the center of the image.
• You do want to create a few starter status messages before you start inviting people to “Like” your page. In other words, give them something to like. Might be a promotion, or a link to some useful information on your blog. If you have some relevant photos or videos you want to add, that would be another way to get things started (more on customizing your page below).
• On the left hand sidebar, your starter page will display a little box that says “Write something about [your page title]” — click there to add a blurb about the business or organization you’re promoting.

2. Get Your Facebook Friends to Like You

When you are ready to unveil your work, the first thing you want to do is Like your own page. Bad enough that the first person who comes to your page should see that you’re the only one who likes it. Maybe you want that first person, or the first few people, to be close friends, family, and colleagues.

Once you’ve done that, you can start inviting people more broadly. Click on “Suggest to Friends” link (top left corner of your Facebook page) to call up the dialog box for inviting people who are in your existing personal network.

Because you haven’t yet secured your Facebook page username / web address, your page will have a long messy address like:

http://www.facebook.com/pages/Coral-Springs-Juice-Plus/150489478296212

No matter, you can still put this in an email and send it out to your friends and customers to ask them to Like your page. Once 25 or more people agree to Like your page, you’re ready to move on to the next step.

3. Set the Facebook “username” for your page.

In Facebook terminology, you can set a “username” for either a personal profile or a page. So I can promote my personal profile at www.facebook.com/davidfcarr and my business at www.facebook.com/carrcomm

You set this by going here:

http://www.facebook.com/username/

Facebook first displays the option for setting the username for your personal profile. If you haven’t done that yet, you might want to do it now.

The option for setting a username for a page is displayed below that:

Set Facebook username

Clicking the link to set a username for a page will display a list of the pages you administer.

Facebook Username for a Page

If you try to do this before racking up those 25 Likes, you’ll get a message saying your page “is not eligible for a username at this time.” Otherwise, if your page is eligible, Facebook will display a data entry field where you can type in the desired page username and click “Check Availability.”

If the username you want is not already taken, you will then get a chance to lock it in. You’ll get a warning to think carefully before you do so, because you won’t be able to change it later, you’re not allowed to transfer it to someone else, and you can’t infringe on anyone else’s trademark. Essentially, Facebook is trying to avoid getting into all the complications associated with domain name registration and ownership disputes — although these will doubtless arise anyway.

Enhancing and Customizing Your Facebook Page

Now that you’ve established a home for your online identity on Facebook, you can start enhancing it. You can do a lot with the built-in tools, such as The Wall for your page. There are also many options you can configure within the basic setup, before you get fancy.

The initial setup includes a few default page tabs, including Wall, Info, Photos, Discussion, and Reviews. Other than Wall and Info, you have options about what tabs to show and hide.

I recommend removing any that you’re not going to use actively. Why advertise a Discussion section of your Facebook page if people are going to click there and see no discussions going on? You can click on any of the optional tabs, and then click again on the pencil (edit) icon in the corner to get a little menu that will allow you to delete the tab. You can always add it back later.

Deleting a Facebook Tab

There are also several page tabs that Facebook makes available but does not display by default, such as the ones for Events and Videos. You can add Facebook applications (or even create your own) that make other tabs available for use on your pages. Click on the “+” sign at the end of the row of tabs to get a list of tabs you can add.

In this view of my Facebook business page, I’ve added a tab from an application that displays my LinkedIn profile, and I can also choose from other standard or custom application tabs:

Adding and customizing Facebook page tabs

Adding and Customizing Facebook Page Applications

Click the “Edit Page” link to change the settings for the built-in applications on your page and add others.

For example, you can choose whether or not people who Like your page can post their own comments, photos, and videos. You can specify whether you want the Wall to be the first thing people see when they come to your page, or whether they should be directed to some other tab.

You may also want to add applications that will be associated with your page, giving you additional tab options. An example would be the LinkedIn application I mentioned previously.

The link to search and browse the available applications is at the very bottom of the configuration page:

Page application configuration controls and link to add applications

One of the most useful of these add-ons is the Static FBML application provided by Facebook. Although FBML refers to the Facebook Markup Language, this is essentially a superset of HTML, meaning that you can copy and paste some some standard HTML into this application to add some custom branding with and img tag pointing to an image file hosted on your own web server, such as a logo, product photo, or promotion. You can link to external content.

So you can get started simply, and then progress to adding fancier forms of interactivity that require getting more familiar with FBML and Facebook’s JavaScript-based application programming interface. Eventually, you may want to create your own custom Facebook applications that pull content dynamically from your website and allow customers to order from you or make inquiries without ever leaving Facebook. That’s beyond the scope of this article, although I’m including some links below.

Again, the point I most wanted to make here is that the simplest steps are the most important steps. First, establish your brand identity and the online presence of your organization on Facebook. Then, worry about the rest.

Further Reading

I recommend Claire Shih’s book “The Facebook Effect” as a good overall primer on what you can accomplish with Facebook (also covers LinkedIn, Twitter, and some others).

Other / related material on this website:

How Facebook Changes Marketing And Sales: Author of ”The Facebook Era” on the glories of hypertargeting customers.

Facebook Ads Should Point to a Facebook Page (Not an External Web Page)

Free Tool: Create a Lead Capture Form That Connects Facebook to Your Website.

References:

Facebook Page Help Center (Facebook.com)

How to Create A Facebook Page (Squidoo)

Tutorial: Customize Facebook Pages with “Static FBML” application

Submitting a Contact Form via AJAX From Your Facebook Page

8 Essential Apps for Your Brand’s Facebook Page (Mashable)

As a sequel to my post on why Facebook Ads Should Point to a Facebook Page (Not an External Web Page), I cooked up a little homegrown tool that generates the required code. The source code output is derived from the example in George Huger’s Submitting a Contact Form via AJAX From Your Facebook Page. Huger shows how to use JavaScript functions that are approved for use within Facebook to submit a data entry form from within Facebook, have it processed on your web server, and get back an acknowledgement you can display on your Facebook page – without ever making the user leave Facebook and go to your website.

Read more and try it

Update: Free Tool: Create a Lead Capture Form That Connects Facebook to Your Website

Facebook ads have a reputation for being effective and relatively affordable, partly because you can set them up so they only appear to a very narrow demographic. For example, a sporting goods store with an overstock of women’s golf clubs could target a Facebook advertisement to appear to promote a sale exclusively to women who like golf (and like it enough to put that on their Facebook profile) who live in one of the cities near that store. But if you send the people who click on that ad to your website, you may be wasting your money. You should be sending them to a Facebook page for your business instead.

That was one of the big takeaways from my meeting with Clara Shih, author of The Facebook Era, following her keynote at the Online Media Summit Miami. Shih says the abandonment rate is about 75% when you send Facebook users to an external website. So your Facebook advertising will be much more effective if you can achieve whatever you’re trying to achieve with that ad within the Facebook Framework. Some retailers are building whole e-commerce storefronts, at least for selected promotions, to be displayed within their Facebook pages.

I had heard some variation on that advice before, but I didn’t realize the effect was quite that dramatic. This prompted me to give myself a crash course in FBML, since I had experimented with Facebook advertising for my own purposes and had been disappointed with how poorly it converted.

"For whatever reason, people really hate to leave Facebook," Shih says. "Maybe it’s that they like knowing their friends and their messages are just a click away.” Meanwhile, she argues that building a FBML application is just not that hard, or expensive. “The secret about FBML is it’s just HTML with a few more markup tags. Your developers can cut and paste and use a lot of their existing web code. For the most part, it’s just a variation of the same HTML and JavaScript they’ve been using all along."

I’ll have more details on my interview with Shih in my Forbes column next week (update: Forbes.com column: How Facebook Changes Marketing and Sales). Meanwhile, I wanted to share a few details about my adventure with FBML.

Shuh is right that it’s not that hard, but figuring out how to get started is not so easy, either. I found a few good tutorials on how to use the “Static FBML” widget, a standard Facebook app, to create a custom tab for your profile or company page. See: Tutorial: Customize Facebook Pages with “Static FBML” application. This can be a pretty easy way of adding some additional images or styling to a tab on your Facebook page.

But if you want to create a landing page where you will capture someone’s contact information, or maybe even their order, that’s a bit trickier. Most of the tutorials I found settled for showing you how to embed an HTML form, which would then post to an external website. As a basic solution, it works, but it does take people away from Facebook – which from what Shih is telling me will just annoy them. So you’ve captured a lead, but maybe alienated a prospective customer in the process.

A slightly better solution would be to make the form open in a new window, using code like this:

<form action="http://mysite.com/post.php" method="post" target="_target" >

It turns out there is a way to process the form submission instead with AJAX – the JavaScript technique for passing data to a server behind the scenes, getting back a response, and displaying the results. But you have to use some Facebook-approved JavaScript code, as explained in Submitting a Contact Form via AJAX From Your Facebook Page. Again, this is the clearest explanation I found – every other explanation I found seemed to assume that either I already knew these details or was looking for a more basic solution. So thank you to blogger George Huger for spelling it out.

Here is what I did to convert his sample code into a working contact form:

Modified the data entry form, adding a few more fields.

Modified the JavaScript code to pull data from those additional fields. Added the url for my own PHP script for lead capture to the form and to the JavaScript code. The modified JavaScript looks like this:

var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue(), 'phone' : document.getElementById('phone').getValue(),'company' : document.getElementById('company').getValue(),'message' : document.getElementById('message').getValue() };
ajax.post('http://www.carrcommunications.com/fb-lead.php', queryParams);


From there I just had to create a PHP script that processes the post data, doing a little validation and sanitation for security, logs the data to a database, and sends me an email notification. I just threw the code together this morning, so I’m not going to throw it out there as an example of the write way to do PHP coding. But so far it seems to work just fine. Update, In a fit of ambition I cooked up the following. Free Tool: Create a Lead Capture Form That Connects Facebook to Your Website.

Take a look at my new Facebook landing page to see how it turned out.

One complication: Facebook now makes it hard for a small business with limited traffic to set a specific tab as the default tab for a business Facebook page. However, when setting up an ad, I found it was still possible to make it work by selecting the “web page” option rather than the “Facebook page” option. So instead of choosing from the drop-down list of your Facebook pages, you paste in the URL for your landing page tab (each tab has a different URL). Seems to work fine.

LinkedIn

Use LinkedIn as your professional social media page. Create a complete profile, mirroring your resume (but adapted to the web format). Include relevant links.

Make sure you enable the public profile. Consider including the link to that profile in your email signature and on business cards / contact cards.

Example: http://www.linkedin.com/in/davidfcarr

My public profile on LinkedIn

Give recommendations to colleagues bosses (particularly those you genuinely like / respect) and they are likely to recommend you back.

Join groups that reflect your professional affiliations. This can be a source of new contacts. Many of these groups have their own job boards. Post thoughts and observations and comment on other peoples’ posts. Showcase your knowledge professionalism.

The free LinkedIn account allows you ask your professional contacts to connect with you through the service. You can upload addresses from your email program to automate some of that. But part of the point is to grow your network by getting introductions to people who are connected to your contacts.

An upgraded account allows you to shortcut the introduction process, but don’t consider upgrading until you have mastered the basics with a free account.

Facebook

Not professionally focused, like LinkedIn, but there may be people you can reach through Facebook who aren’t active LinkedIn users.

To set an address that you can put on business cards or in an email, go to www.facebook.com/username

My username is www.facebook.com/davidfcarr

(Note: I personally like to limit my Facebook friends to people I have some actual social or community connection to, whereas on LinkedIn I’m more aggressive about building a wider network of professional contacts in IT, marketing, media, and technology. I may ignore your friend request if I don’t recognize your name.)

If using this as a job hunting tool, avoid posting anything that might reflect poorly on you. Employers are checking these profiles to see who is spending all their nights on sex and drugs and rock and roll.

Twitter

A little more difficult for the uninitiated. Twitter revolves entirely around short “status” posts of 140 characters or less. Posts are often cluttered by codes like “Ran into @davidfcarr last night, thinks he’s an expert on online #careers #jobhunt LOL”

Translation: @davidfcarr is a reference to another twitter user, #careers is a keyword and LOL is short for laughing out loud.

Again, you may reach people on Twitter who aren’t on Facebook or LinkedIn.

On twitter, I’m twitter.com/davidfcarr

Email

Email was the original Internet killer app, as significant as the web to drawing people online. But people often don’t use it effectively.

A few key points:

Use a clear subject, specific line. Not “Hello” or “Follow up” but “Application for Lowes Sales Manager Position” or “Follow up on interview for Lowes Sales Manager Position”

Identify yourself clearly. Make sure your email program is set to include your name, not just your email address in the “From” field. Recipients should know who you are and why they should open your email from the “From” and “Subject” lines alone. You have to stand out from the spam!

Provide complete contact information, including a link to your LinkedIn page, at the bottom of every message. The easiest way to do this is to set your email program to insert this automatically as an “email signature.”

Here is what that looks like on the Settings screen in Gmail:

There many more subtle details about how to use these Internet communications methods, but my goal here was just to share a few of the essential details.