Re-purpose a WordPress Post or Page with Facebook Tab Manager

I designed Facebook Tab Manager to let you create and update content for your Facebook business page using WordPress, but it’s also possible to re-purpose an existing blog post or page and display it within Facebook.

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

Facebook Tab Manager for WordPress – Latest Updates

Here is a rundown on the latest updates to Facebook Tab Manager. More explanation after the bullet points. I will be doing a webinar on the use of the plugin Thursday April 14, 2011 at 7 pm ET (www.anymeeting.com/davidfcarr), and a recording will be available if I can figure out how to push the right buttons.

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.

Experiments with Facebook iframe Tabs, Facebook Tab Manager WordPress Plugin

I’ve been doing a bunch of experiments with the new Facebook iframe page tabs and have cooked up a Facebook Tab Manager plugin for WordPress, which works pretty well. This plugin lets you compose and edit content for your a tab to appear on your Facebook business page (or campaign page or nonprofit page) from within WordPress. I use custom post types to treat Facebook tabs a just another kind of post, and the content can be integrated with other plugins using WordPress Shortcodes.

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.

How to Create a Facebook Contact Form Using ExpressDB

As Facebook becomes increasingly important for businesses who want to interact with customers online, many business managers are looking for simple ways of adding interactivity to their Facebook marketing campaigns. Ideally, you want to be able to give Facebook users a way to do things like fill out a contact form without being redirected to another website. ExpressDB provides a simple way of accomplishing this.

Note: I came up with this demo app as part of my work with Caspio, the maker of ExpressDB.

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.

How to Create a Facebook Page: The Simple Steps Are The Most Important

Creating a Facebook page, also known as a Facebook business page or Facebook fan page, is probably one of the best things you can do right now to boost your brand, small business, non-profit, or political campaign. Some marketing experts believe capturing your Facebook page name (along with your Twitter URL) is proving almost as important as capturing your Internet domain name. And best of all, it’s free to get started.

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.
Continue reading “How to Create a Facebook Page: The Simple Steps Are The Most Important”

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

Update: Facebook’s move to enable page tabs based on HTML iframes rather than FBML makes the specific techniques discussed below obsolete. Today I recommend instead using my Facebook Tab Manager for WordPress if your site is on WordPress. If you are not on WordPress, you should find that the task of integrating custom content including contact forms is now easier, overall.

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

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

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.

Social Media and Email Tips for Job Hunters

Here are a few tips I prepared for a career workshop, after it became clear that many of the out of work (excuse me, “in transition”) professionals in attendance had little idea of how to use LinkedIn or Facebook, or how the two services were different. Suddenly, I felt an irresistible urge to pontificate.

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.