Contact Us
  • Two Cool Static FBML Tags: Display Visitor's Username; Generate Random Messages

    If you’re not on the HyperArts Blog, click here!

    Static FBML Facebook’s Static FBML application is one of the most popular apps for Fan Pages, allowing users to create custom tabs to promote their business, service, brand or whatever using CSS, HTML and FBML to create both attractive and engaging custom tabs.

    Static FBML supports a small subset of FBML tags, the most popular being those that allow for:

    • embedding Flash, video and photo galleries (fb:swf, fb:flv);
    • embedding of MP3 files (fb:mp3);
    • sharing with your friends a Page or its content (fb:share-button, fb:multi-friend-selector);
    • adding the ability for visitors to comment on and/or Like specific content (fb:comments);
    • the ability to display different content to fans and non-fans of the Page (aka the Fan Reveal, aka Fan-gated content, aka Fan-only content); and
    • the popup dialog box (fb:dialog).

    However, there are a couple lesser-known FBML tags that can personalize your tab or create random messages: fb:userlink, which displays the visitor’s full name; and fb:random, which allows you to have different sets of content that display randomly, based on a “weight” value you set.

    Greet or Otherwise Address Your Visitor by Name — fb:userlink

    People have been asking how some Pages can greet a user by name. This is done using the fb:userlink FBML tag which fills in the user’s name, as it is on Facebook, and can be integrated into a sentence or headline by entering the following into your Static FBML box:

    Hello <fb:userlink uid="loggedinuser" />! Thank you for visiting my Page!

    The above results in this when I view the tab while logged in to Facebook:

    Display Username on Facebook Tab with FBML

    Just insert the FBML tag wherever you want the user’s full name to appear, as in the above example.

    Although on Facebook’s documentation page for fb:userlink, it states that the tag is deprecated (will no longer be improved and will eventually be phased out), as of this writing it is working just fine. It’s not uncommon for deprecated tags, whether HTML or FBML, to stick around for years.

    Create Weighted Random Messages on your Custom Tab — fb:random

    Another little-known FBML tag is fb:random which allows you to present alternating sets of content in a random but weighted manner, adding a “weight” value for each nested fb:random-option tag:

    <fb:random>
    <fb:random-option weight="2">
    A: This will display twice as often as B and can contain any HTML content &#151; links, images, forms, even <a href="#" clicktoshowdialog="example_dialog"><strong>a nested dialog box</strong></a>! (You will need to reload this tab and again click on the fb:random tab to see it again.)
    </fb:random-option>
    <fb:random-option weight="1">
    B: This will be show half as often as A. (You will need to reload this tab and again click on the fb:random tab to see it again.)</fb:random-option>
    </fb:random>

    The example on our Static FBML Bible Page, is weighted so that message “A” is displayed 2 times for every 1 time that message “B” is displayed:

    Message A:
    FBML Random Message A

    Message B:
    FBML Random Message B

    As you can see from my example, you can nest other FBML tags within the fb:random-option tags, and incorporate the same type of content you can on other parts of the tab. On our example tab, we nested a fb:dialog tag which causes a popup image when the user clicks on the “a nested dialog box” text.

    You can add more than two fb:random-option tags to create more alternate messages. And, if you have more than 2 fb:random-option tags, you can add the “pick” parameter to fb:random to have more than one option returned each time. So if you have, say, 3 or 4 or 5 options, you can set the tag so that each time it returns 2 of those options:

    <fb:random pick="2">

    The above will result in the display of 2 of your options each time the tab is loaded. (There is a “unique” parameter as well, with the default set to “true” which is what you should prefer, assuming you don’t want the tag to display the same option twice!)

    Comments

    1. http://developers.facebook.com/docs/reference/fbml/name/

      does the same as your deprecated userlink tag.

      • Have you gotten fb:name to work in a Static FBML tab? If so, would you share the code you used? I tried but couldn’t get it to do anything but a specified user, not whoever was visiting the Page. Thanks!

    2. Thank you. It worked. I appreciate the information.

      Janine

    3. As Patrick said, fb:userlink is deprecated (no longer supported). Plus, the last thing you want to do is have your potential Fan click away from your Fan page before they Like it. Here’s how you can use fb:name to get the same effect, only better:

      • Just wrap that code that didn’t get through in the <code> … </code> tags, and we’ll be able to see it! If this can be done on a Static FBML custom tab using fb:name, I totally agree that it’s the way to go. Thanks Ryan!

    4. <fb:name uid="loggedinuser" linked="false" />

      • Damn! I was really hoping you knew something about that fb:name I didn’t :)

        Believe me, your example may work on a canvas page but it does not work on a Static FBML tab, which is the subject of this post. I’ve tried that out and no go. Definitely let me know if you’ve gotten it to work on a Static FBML tab.

        That’s why I went with fb:userlink which, although deprecated, at least works with Static FBML.

        And although I understand your concern with a user clicking on their linked name, taking them to their profile, I wanted to share it anyway. As I said, “deprecated” tags can still stick around for very long periods of time, so if users want to use this tag to sort of personalize their page, they can do it as long as it works. When it stops working, well, onward….

        Cheers.

    5. hi Tim, I’ve been using clicktoshow and clicktohide code in FBML.
      But the code doesn’t work in FBML after Facebook has made some changes recently.
      Do you know about this and do you have solutions to this problem?

    6. I just was using clicktoshow and clicktohide code in my FBML app. How would i get it to work on the new Canvas page? Do i have to use Ajax?

      P.S. My Canvas page is now working on beta.facebook.com

      • Yes, you’ll have to use straight JavaScript with an Ajax library. IFramed pages just use standard Web coding, no FBML except the XFBML tags (social plugins).

        • Tim, O.K. i understand but in the app settings there is a choice of an Iframe and FBML. If i choose FBML what does that do for me? Should it allow me to use FBML within my page?

    7. Is it possible to recreate the same functionality as fb:userlink using iFrames?

    8. Sharon Zahra says:

      Hi all, has anyone managed to find a way to display the user’s name on a Facebook page (after liking the page) without using <fb:name uid="loggedinuser" linked="false" /> ?

      Nothing seems to work for me!

    9. Thanks for this info. Lets hope it works!

    Speak Your Mind

    *