Showcase: Mapping Organic Farms

Fabio Correa: I created a nice feature to my page that allows my users to find Farmer Markets where they live. It leverages Bing Maps and Facebook Tab Manager. Check it out at https://www.facebook.com/ILikeItOrganic?sk=app_251320301545627

Search Farmers Markets

Showcase: State Farm Territorial Cup Series

This was submitted by Cameron North at AdSport and you can see it live at http://www.facebook.com/SFTCS

When the visitor clicks the Like button, it reveals a signup form created with Contact Form 7 (customized with additional HTML / CSS).

Welcome page for State Farm Territorial Challenge

 

Testing Liked / Not Liked Effects with Facebook Tab Manager

You can test the display of content to be displayed only to people who have Liked or Not Liked your page with a preview on your own site. In fact, it may be better to some of this testing on your own site than within Facebook because of the way Facebook Tab Manager keeps track of user “Like” status.

When the user opens a page tab on Facebook, Facebook posts a coded signature to your website, which the plugin decodes to determine “Like” status. Facebook Tab Manager stores this information in a session variable, $_SESSION[“like”]. This means that if the user follows a link to another post fbtab posts (still within the Facebook iFrame), the plugin will still “remember” that status. Facebook posts the signature data when it first sends you to the page, but it does not control your navigation within the iFrame. When a user clicks the Like button, Facebook refreshes the page, the session data is updated, and Facebook knows it can display your fan-only content.

If you preview content on your website, the state of that session may be determined by whether you last viewed the content on Facebook in a state of having liked or not liked the page. The session is associated with your domain, regardless of whether the content is viewed from within Facebook.

You can simulate Liked / Not Liked status by adding ?like=1 or ?like=0 to the end of the URL for your tab.

Here’s an example of a simple test post.

Test Post for fblike shortcode

Here is the preview with ?like=0

Preview ?like=0

And here it is with like=1

Preview like=1

For some reason, the notice that you’re in demo mode is repeated multiple times, but the important point is that the correct content is shown for each mode.

I can do the same thing with a Reveal Tab Setup URL by adding &like=1 to the end of the query string

Simulating Reveal Tab like=0

or & like=1

Reveal Tab like=1

 

 

Facebook Tab Manager Checkbox Controls

When you create or edit a Facebook Tab Manager post, a number of checkbox options are displayed below the content of your post. These same options appear on the Settings screen for the plugin, allowing you to set the defaults you use most often. Here is an explanation of what the checkboxes do.

Explanation of Checkbox Controls

  • Open Links / Post Forms to New Window: -Sets <base target=”_blank” /> in the head of your document. Without this, any links users follow will cause the target page to appear within the IFrame of your Facebook tab, which may not be what you want if the target page won’t fit neatly within a 520-pixel wide frame. Check here if you are presenting a list of links and don’t want to code each one to open in a new window. Should also work with forms set up for HTTP POST (not necessarily for AJAX forms).
  • Template should execute theme/plugin code in HTML head – wp_head() command. If you are displaying interactive content from your WordPress site that depends on plugins loading custom JavaScript or styles, the output of those scripts and stylesheets is often associated with the wp_head command or wp_footer command, depending on whether the output is targeted at the beginning or the end of the document. Usually, most of the action is in wp_head. You can selectively turn off actions associated with these function calls in the Advanced settings section.
  • Template should execute theme/plugin code in page footer – wp_footer(): See explanation for wp_header. The code for statistics and analytics tracking of your site is often output here.
  • Set resize/autoresize (for tabs taller than 800 pixels). Adds JavaScript commands that resize the IFrame within which your content is displayed. You should only enable this when it is really required, as it requires a download of the Facebook JavaScript libraries.
  • Hide post title, only show post content words / images. You can turn off the display of the post title if, for example, the content you want to display is one big image, and displaying the default title up top would detract from it.

Show Advanced – turn off selected WordPress filters and actions

In general, you only need to fuss with these options if you are seeing inappropriate content or styling appearing within your Facebook Tab Manager posts and need to selectively turn off features of your theme or plugin that are causing conflicts. Example: If a plugin is filtering post content to add links or icons that you do not want to appear on your Facebook tab. Or, you want the wp_head actions to run so you get the benefit of JavaScript libraries being loaded, but you need to disable an action that inserts a background image via CSS styling.

Check the items you wish to DISABLE. If you have not checked above to execute wp_head or wp_footer actions, you can ignore those sections. The core system filters for the_content are in bold so you know which ones you should probably leave alone.

Determining the purpose of these filters and actions can require some guesswork, and the exact list in each section will vary depending on the plugins and options you have enabled.

Some common ones:

DISABLE the_content filters

  • do_shortcode – adds shortcode output
  • wptexturize – pretties up quote marks and dashes
  • wpautop – adds paragraphs

DISABLE wp_head actions

  • wp_enqueue_scripts – adds JavaScripts in the specified order
  • _custom_background_cb – sets background for Twentyten theme
  • wp_print_styles – prints CSS
  • wp_print_head_scripts – prints scripts

DISABLE wp_footer actions

  • wp_print_footer_scripts – prints footer scripts
  • stats_footer – WordPress.com stats footer

On my site, I’ve had to disable the sociable_display_hook on the_content to prevent the Sociable plugin from adding links to the end of my tab posts as if they were blog posts. If enable wp_head, I have to disable _custom_background_cb to prevent the background image from my website from being displayed in the tab frame.

Facebook Tab Manager Shortcodes

Facebook Tab Manager provides support for two shortcodes that can be used to insert or filter content, [fbtab] and [fblike].

A WordPress shortcode is a placeholder for content that will be output dynamically when the page is displayed. This is often used for purposes such as outputting a data entry form, where you wouldn’t want to edit the form HTML in the WordPress editor.

When shortcodes are wrapped around a block of content, with a closing tag such as [/fblike] at the end, the content inside the shortcode tags is passed to a filter function associated with that shortcode. The function can add to or modify that content. Facebook Tab Manager [fblike] shortcode uses this for conditional display of content based on whether the viewer has “Liked” your page. Continue reading ‘Facebook Tab Manager Shortcodes’ »

Why You MUST Provide a Secure URL for Facebook Tab Manager

As of October 1, 2011, all Facebook apps and tabs must be available at an https address, which means your web hosting account must include an SSL Certificate (see the official announcement from Facebook). This was not true when Facebook first introduced the ability to add custom page tabs, and so many Facebook Tab Manager users have created custom tabs without having SSL enabled on their sites.

As an alternative, Facebook Tab Manager hosting with built-in SSL support is also available through TabMgr.com.

If you have a basic website hosting account, you probably do not have an SSL certificate included. Some hosts make a “shared certificate” available, associated with the host’s domain, but I have not heard of anyone getting this to work. In other words, you probably need to pay for your own certificate and get it installed on your server. Also, you will need an Internet Protocol address for your domain. Most basic hosting accounts use a shared IP address for multiple domains, so this may be another upgrade you have to pay for.

However, making this investment brings other benefits, such as better security for the administration of your WordPress site. With a couple of tweaks to your WordPress configuration file, you can make sure your password and session credentials will always be protected (see below). Continue reading ‘Why You MUST Provide a Secure URL for Facebook Tab Manager’ »

Creating a Basic Page Tab with Facebook Tab Manager for WordPress

The basic idea behind Facebook Tab Manager for WordPress is to make it relatively easy to create and edit content to be displayed as a tab on a Facebook business page. You can take advantage of a number of fancier features, such as posts or blocks of content within posts that will only be displayed to people who have clicked the Like button on your page. This tutorial concentrates on the basics.

I’m going to walk through how I created a tab for the Carr Communications Facebook page.

Facebook allows businesses, political campaigns, organizations, celebrities, and other entities trying to attract a big audience to create a Facebook page (see this tutorial if you need help with the basics of creating a page). A page can include any number of tabs (the navigation links displayed on the left hand side of the page) in addition to built-in features such as the Wall. Custom tabs can serve as landing pages for new visitors, or people driven to your page by an advertisement. They can include content or application functionality, such as contact forms or interactive product catalogs.

Here, I’m focusing on how you would display content created within WordPress (text, images, maybe an embedded video) on a Facebook page tab. Continue reading ‘Creating a Basic Page Tab with Facebook Tab Manager for WordPress’ »

Preloader Effect Added In Facebook Tab Manager 2.8.7

Facebook Tab Manager 2.8.7 adds an animated preloader effect you can invoke by adding a query string parameter to the end of the URL you record in the Facebook Developers Utility. You can see the effect on the Clip File tab of the Carr Communications Inc. Facebook page.

The query string is preloader=1 as in

http://www.carrcommunications.com/fbtab/clips/?preloader=1

or

http://www.carrcommunications.com/contact/?fb=tab&minfilters=1&preloader=1

Note that this works best for simple content pages. The JavaScript method used to load the content in this case ignores any embedded JavaScript in the content being loaded, so I found I couldn’t use it with some of the samples where I had included Facebook plugins as inline JavaScript.

Otherwise, try it and tell me if it makes your page tabs feel like they load faster.

Update: the preloader effect is also displayed by default for reveal tabs created with the Reveal Tab Setup utility.

Themes and Templates for Facebook Tab Manager for WordPress

Starting with version 2.8.7, Facebook Tab Manager for WordPress has a new model for supporting custom themes and templates. This means you can modify the default theme distributed with Facebook Tab Manager or create your own theme, just as you would for a WordPress website. That way, you can develop a theme with your own custom CSS, template, and template functions independently of the plugin.

At least, that’s the plan. If it doesn’t work as promised, be sure to let me know.

There are some special considerations for how a theme has to be constructed to work with Facebook Tab Manager, outlined below.

The plugin ships with a built-in theme in the fbtab-theme subdirectory, and the theme files will be served from there immediately after plugin installation. Using this built-in theme remains the plugin’s default behavior. However, there is now an option on the Settings screen that lets you specify a WordPress theme (installed, like every other theme, in your wp-content/themes directory) that should be used to display content on Facebook. This setting is independent of setting the default theme to be used when someone views your website. Continue reading ‘Themes and Templates for Facebook Tab Manager for WordPress’ »

Older Posts on Facebook Tab Manager for WordPress

These are selected posts from carrcommunications.com on how to achieve different effects with Facebook Tab Manager

Facebook Tab Manager 2.8.5 – Tweaks to CSS and Reveal Tab Setup

Posted on August 31, 2011 by david

The latest release of Facebook Tab Manager includes tweaks to the default CSS and handling of custom CSS. I also updated the Reveal Tab Setup Utility. From the changelog: CSS changes to prevent display of scroll bars, even when too-wide … Continue reading →

How To Use Contact Form 7 with Facebook Tab Manager

Posted on July 30, 2011 by david

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 … Continue reading →

Reveal Tab Setup in Facebook Tab Manager WordPress Plugin version 2.7.3

Posted on May 22, 2011 by david

One of the things people want to do with Facebook Tab Manager is create a “reveal tab” effect where new visitors see one message, urging the people to click the LIKE button, and page fans see another message, perhaps displaying … Continue reading →

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

Posted on May 21, 2011 by david

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 … Continue reading →

Facebook Tab Manager 2.6.8 Includes New Reveal Tab Option

Posted on May 14, 2011 by david

The latest update to Facebook Tab Manager for WordPress includes a new option for doing a reveal tab or otherwise setting content that will only be displayed to people who have liked your page, with alternate content for people who … Continue reading →

Facebook Tab Manager Setup Shortcut

Posted on April 13, 2011 by david

One of the things I’ve enjoyed about promoting this plugin is seeing how people use it, often in ways I wouldn’t have thought of. The other day, I stumbled across a blog post by Michael Brandvold who showed me a different … Continue reading →

Facebook Reveal Tab Created with Facebook Tab Manager, jQuery

Posted on April 4, 2011 by david

This is a work in progress for a client of mine, showing how to create a Facebook reveal tab – a page tab that reveals more information once a visitor has clicked the “Like” button – using Facebook Tab Manager. …Continue reading →

Posted in Facebook Tab manager, Web Development | 6 Comments

How to Pull Blog Content Into a Facebook Page Tab

Posted on February 24, 2011 by david

This is a usage example for the Facebook Tab Manager for WordPress plugin, which lets you create and edit content to be displayed on Facebook from within the WordPress editor. This is the clippings page tab for my work as … Continue reading →

Posted in Facebook Tab manager, Marketing and Publicity, Web Development, WordPress | 8 Comments