One of the more useful features of Facebook Tab Manager for WordPress is that you can use it conjunction with other plugins to embed their functionality in a Facebook page tab. I’ve particularly gotten a number of requests for guidance on how to use Facebook Tab Manager with Contact Form 7, a popular forms management plugin.
You can do this by including a Contact Form 7 shortcode, which looks something like this: [contact-form 1 “Contact form 1”]
That code is generated by the administrator’s screen for the plugin. I’m not going to cover that in detail, but this utility allows you to lay out your form and the email notice you will get when someone completes it. You then copy and paste the corresponding shortcode into your page or post — in this case, into an fbtab post.
Here, I’m going to walk through an example of how to display a form only to page fans, while also including the JavaScript and CSS needed for Contact Form 7’s AJAX functions.. You could make this the landing page shown to newcomers, with a message asking them to click the Like button. Once they do so, Facebook Tab Manager detects that this person is now a fan of the page and displays the fan-only content, which includes the form. Perhaps once the person becomes a fan, you give them the option of filling out the form to enter a contest or get some special offer. The business scenario is up to you.
You can see the live example on the Carr Communications Facebook Page. Here is how it appears in the WordPress editor, with the contact form shortcode wrapped inside an fblike shortcode with a like=”1″ parameter to indicate it should only be shown to fans. An alternate bit of content is designated to be displayed to non-fans.
To get the styles and scripts for Contact Form 7 included properly, I need to let WordPress output the wp_head and wp_footer actions just as it would on a regular web page. The tricky part of this is deactivating functions that don’t make sense in a Facebook context. On my website, I have to be careful to turn off a function of my site’s theme that outputs a custom background image, a plugin function that outputs social media icons for my blog, and a few other things. The exact list of tweaks you will need to make varies from site to site, depending on the theme and plugin you have installed, so this is just an example – be prepared to experiment.
Checkbox options:
- NO -Open Links / Post Forms to New Window
- YES – Template should execute theme/plugin code in HTML head – wp_head() command
- YES – Template should execute theme/plugin code in page footer – wp_footer()
Click the Show Advanced button and check off the plugin and theme action/filter functions you want to exclude.
the_content filters to exclude
- sociable_display_hook
wp_head actions to exclude
- _custom_background_cb
wp_footer actions to exclude
- dsq_output_footer_comment_js
- wp_admin_bar_render
- stats_footer
Note: Make sure you have the latest release. While preparing this example, I found errors in the code for excluding wp_head and wp_footer action functions. This was fixed in version 2.8.3. Version 2.8.4 also fixed an issue with the Reveal Tab Setup utility and works better with the alternate approach below.
Using the Reveal Tab Utility
Facebook Tab Manager also includes a Reveal Tab Setup utility for designating alternate posts to be displayed to fans versus newcomers. To make this example with that approach, you would create one fbtab post containing the shortcode for the form, and check all the same boxes I explained in the previous example. You would then create a second post telling people why they should register to get access to your wonderful form.
In the Reveal Tab Setup utility, your choices look something like this:
You can see a live example on my business page.
In version 2.8.4, I tweaked the way the special url generated by the Reveal Tab Setup utility is processed by WordPress, making it redirect to the permalink for fans of the page. This was necessary to make it work properly with Contact Form 7, which was otherwise confused by the non-standard URL.