• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Social Media Examiner

Your Guide to the Social Media Jungle

  • 🔥 Free Newsletter
  • ⭐ FREE Web3 Course
  • 💡 Society
  • 🗓️ Our Events
    • Social Media Marketing World 2024
    • Other Industry Events
  • ⚙️ Tools
  • 🎙️ Podcasts
    • Social Media Marketing Podcast
    • Social Media Marketing Talk Show
    • Web3 Business Podcast
    • Our YouTube Channel
  • 🎯 Partner With Us
    • Podcast Sponsorship
    • Email Sponsorship
      • Email Newsletter
      • Dedicated Email Blast
    • Event Sponsorship
      • Social Media Marketing World
    • Tools Sponsorship
  • 👋 About Us
    • Our Story
    • Articles
      • Web3
      • Instagram Marketing
      • Facebook Marketing
      • YouTube Marketing
      • LinkedIn Marketing
      • TikTok Marketing
      • Expert Interviews
  • Search
  • How to Create Fan-only Facebook Content with the Reveal Tab

    by Tim Ware / September 9, 2010

    social media how toHave you ever wondered how some Facebook pages show specific content or offers only to fans? If so, look no further.

    (Important Update: Facebook no longer supports FBML. Please refer to the articles on Facebook iFrame.) One of the most popular FBML tags is fb:visible-to-connection. A favorite of marketers, this FBML tag allows a Facebook page to show different content to fans and non-fans. When a non-fan clicks the Like button – viola! – the non-fan content disappears and the fans-only content replaces it. As a method of motivating a visitor to become a fan of your page, this can be very effective.

    This FBML tag is often—and erroneously—referred to as a “hack”; however, it was created by Facebook to do exactly what it does: “to display the content inside the tag on a user's or a Facebook page's profile only if the viewer is a friend of that user or is a fan of that Facebook page.”

    Examples of Brands Using Fans-only Content

    There are many ways to motivate your visitors to Like your page. Here are a few examples from brands on Facebook:

    Levi's promises “Instant access to exclusive content.”
    levis on facebook

    1-800 Flowers offers a discount code for 20% off your next order.
    1800flowers on facebook

    Teesey Tees keeps it mysterious: “See what the deal is.”
    teesey tees on facebook

    DIGISTORE offers “Discount Codes, Unadvertised Specials, Free Monthly Giveaways.”
    digistore on facebook

    You get the picture. “We have great content here, BUT FIRST you gotta Like us!”

    Of course, you should make sure that your “teaser” to non-fans is sufficiently compelling for them to Like your page. Many pages require a visitor to become a fan before displaying certain content, but they don't convey the value of the content. Teesey Tees, above, comes very close to this.

    Following are instructions on how to add fans-only content to your page.

    Add the Static FBML Application to Your Page

    First, you'll need to add the Static FBML application to your page. Here is a tutorial.

    NOTE: Static FBML can only be added to a Facebook page (i.e., Business Page, Company Page, Brand Page). It cannot be added to a personal profile.

    3 Days of World-Class Training—Zero Travel!

    Social Media Marketing World

    Travel to Social Media Marketing World off the table? Get all of the great content at a fraction of the price with an On-Demand ticket.

    That’s full access to recordings of every keynote, workshop, and session—the ones people travel thousands of miles to see. Don't wait. Get your On-Demand ticket and enjoy actionable content that you can watch anytime, anywhere.

    GET YOUR ON-DEMAND TICKET NOW

    What Is FBML?

    FBML is Facebook's own proprietary mark-up language that enables your tab content to interact with the Facebook API (“Application Programming Interface”). It is as easy to use as HTML.

    Most FBML tags, including the ones I use in this article, have an opening tag and a closing tag. The content for each tag — HTML, CSS and/or more FBML — is placed between these opening and closing tags.

    Creating Your Fans-only Content on Your Custom Tab

    Once you've added the Static FBML application, the implementation of this FBML tag is pretty easy. The only part that is somewhat tricky is getting rid of the white space the fans-only content creates even though it's not yet visible.

    Facebook uses the “visibility:hidden” style to hide the fan content until the user Likes the page. However, this style rule still reserves the space for the content; it just doesn't show the content. Consequently, the non-fan content is pushed down the page! However, this is easily solved with a bit of CSS “absolute positioning.” I incorporate this approach into the following examples.

    The code for the FBML box:
    `__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;div id=__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;wrapper__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;
    FANS-ONLY CONTENT GOES HERE
    __abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;div id=__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;non-fans__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;NON-FANS CONTENT GOES HERE__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;div__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;
    __abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;div__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;
    `

    As shown above, all the tab content will be contained in the “wrapper” DIV.

    <div id=”wrapper”> opens this containing DIV. CSS styles are applied to the ID “wrapper” via the stylesheet.

    All the fans-only and non-fan content is placed between the opening <fb:visible-to-connection> tag and closing </fb:visible-to-connection> tag. This content can be HTML, FBML and CSS.

    Tools Resource Guide

    Looking for something to make your life easier?

    Discover the tools we recommend to drive engagement, save you time, and boost sales across your entire marketing funnel or business.

    Whether you need help planning content, organizing social posts, or developing your strategy, you’ll find something for every situation.

    FIND YOUR NEXT FAVORITE TOOL

    The fans-only content comes first, followed by the non-fan content which immediately follows the opening <fb:else> FBML tag.

    The non-fan content is contained within the <div id=”non-fans”> and </div> tags. CSS styles are applied to the ID “non-fans” via the stylesheet.

    Immediately following the non-fan content is the closing </fb:else> tag, followed by the closing </fb:visible-to-connection> tag and, finally, the </div> tag to close the “wrapper” DIV.

    Here is the Static FBML box with the above code, and the link to an external stylesheet:

    facebook visible to connection

    Here is the CSS for the external stylesheet (with example URL):
    `__abENT__lt;code__abENT__gt;#wrapper {
    width:520px;
    margin:0 auto; border:0; padding:0;
    position:relative;
    }
    #non-fans {
    width:520px;
    position:absolute; top:0; left:0;
    }__abENT__lt;__abENT__#8260;code__abENT__gt;
    `

    Your external stylesheet should have only the CSS style rules. Don't include the <style> … </style> tags!

    If you can't use an external stylesheet

    If you don't have a server where you can upload a separate stylesheet, you can “inline” the styles inside the HTML tags. Although this isn't ideal, it's an option if you can't create a separate stylesheet, host it on a server, and link to it with the <link> tag.

    Here is the above example, with the styles for the <div> tags inlined (notice we don't need the IDs if we use this approach):

    example styles inlined

    Testing and Troubleshooting

    Testing and troubleshooting this particular FBML tag is a bit tricky, because when logged in as a user who is a page admin, you will see both fans-only and non-fan content when viewing the tab.

    • Create a user account for testing: The most efficient way to test is to create a Facebook account for testing only, or use a friend's or colleague's account. (Creating a new personal profile for testing may violate Facebook's Terms of Service — See #4, Registration and Account Security — even if done with good intentions.) You can be logged in to Facebook as one user (the admin account) in one browser and logged in as the test account in a different browser (I use Firefox and Safari). Then you don't have to keep logging in and out of Facebook as admin, then as tester, etc.
      When testing, you'll need to toggle back and forth between Liking and Unliking a page. To Unlike a page, click on the Wall tab. Near the bottom of the left column of the Wall, you'll see “Unlike”:
      unlike
      Click that to Unlike the page, and you can click the Like button to re-Like the page. Repeat as necessary.
    • Use an external stylesheet, NOT inlined styles: Most browsers will correctly display your page if you have inlined the CSS with the <style> tag, but NOT Internet Explorer 8!
      Because millions of people use this particular browser, your CSS should be in its own file (with the extension “.css”) and be referenced from your FBML page, with the <link rel=”stylesheet” type=”text/css” href=”URL-TO-EXTERNAL-STYLESHEET” />. You'll need to have this file hosted somewhere on the web where you can link to it.
    • Double-check all URLs: If any files (images, CSS, etc.) are not being displayed or accessed, be sure to test the URLs for these files directly in your browser, typing or pasting the URL in the address bar to make sure you can access the file directly.
      browser address bar
      If you can't access the file directly, then your URL is incorrect.
    • Check for proper syntax: Make sure that URLs are surrounded by matching quotes (single or double is fine, but they must match) and that they are plain-text, straight-up-and-down quotes (not “fancy” or “curly” quotes).
    • Check your Tab on the Most Popular Browsers and on Mac AND Windows: You want to be sure your tab is displaying properly on the most popular browsers (Firefox, Internet Explorer, Safari and Chrome, at the very least) and on both Mac and Windows. What displays well in Firefox, Chrome and Safari may not (and often doesn't) display well on Internet Explorer.

    What About Facebook's Announcement on Killing Off FBML?

    On August 19, 2010, Namita Gupta announced the impending phase-out of FBML. However, I expect that support for Static FBML and the fb:visible-to-connection tag will be around indefinitely. Static FBML is Facebook's own application and just several months ago they offered Static FBML custom tabs as a consolation prize to users who were distraught over the killing off of the Boxes tab. I expect it will be supported well into 2011 and perhaps beyond.

    Read this detailed article on the future of Static FBML and FBML, which includes the opinions of a number of expert developers.

    Have you tried fan-only content on your Facebook page? What has been your experience? Please leave your comments in the box below.

    Get Your FREE Course: Web3 for Beginners

    Web 3 for Beginners

    Curious about Web3, but don't know where to start or who to trust?

    Introducing Web3 for Beginners, a course taught by Michael Stelzner, the founder of Social Media Examiner.

    Learn the basics of Web3 and apply it to your business with this FREE comprehensive course.


    CLICK HERE TO GET FREE ACCESS

    Tags: Facebook

    About the authorTim Ware

    Tim Ware is the owner of HyperArts, a San Francisco Bay Area Web development company that also specializes in Facebook custom tabs and application development.
    Other posts by Tim Ware Âť

    Get Social Media Examiner’s Future Articles in Your Inbox!

    Get our latest articles delivered to your email inbox and get the FREE Social Media Marketing Industry Report (39 pages, 50+ charts)!

    Industry Report Cover

    Worth Exploring:

    Facebook

    Marketing Help Explore More →

    Instagram

    Marketing Help Explore More →

    YouTube

    Marketing Help Explore More →

    Linkedin

    Marketing Help Explore More →

    Web3

    Marketing Help Explore More →

    Social Media Marketing Industry Report

    Get Free Report →

    Social Marketing Trends

    The data you've been missing!

    Need a new plan? Discover how marketers plan to change their social activities in the 14th annual Social Media Marketing Industry Report. It reveals what marketers have planned for their social activities, content marketing, and more! Get this free report now and never miss another great article from us. Join more than 400,000 marketers!

    Enter your email to get
    our free report:


    Footer

    Your Guide to the Social Media Jungle
    Copyright © 2023 Social Media ExaminerÂŽ
    All Rights Reserved. Terms of Use | Privacy Policy.

    Helpful Links

    • About us
    • Our content via email
    • Our podcasts
    • Our YouTube channel
    • Our live show
    • Our industry report
    • Sponsorship opportunities
    • RSS
    • Accessibility