3 Social Plugins for Customizing Facebook iFrame Tabs

social media toolsNow that Facebook is fully supporting custom iFrame tabs and phasing out FBML and the Static FBML support, many page admins are wondering how best to add functionality to their iFrame tabs.

For example, how do you add popular FBML tags that facilitated interaction on Facebook, such as Reveal/Fan-Gating, Multi-Friend Invite, Share button, Like button and Comments.

Facebook Social Plugins to the Rescue!

Fortunately, a subset of the XFBML tags (a.k.a. Social Plugins) intended for use on websites to integrate them into Facebook’s “social graph” also work great on iFrame tabs.

Now page admins can simply add a free iFrame tab application to their page, which makes adding a fan-gating feature very easy, and they can add Like buttons, Send buttons and/or Comments boxes to their tabs.

In this article, I’ll explain how to add these three social plugins to your custom iFrame tab.

Generating the XFBML Tag code — Facebook does it for you!

You can get the code for the social plugins on Facebook’s Social Plugins page. Just navigate to the tag you want, enter the options on that tag’s page, and then click “Get Code.”

If you’re generating the Like button without the Send button, make sure you copy the XFBML version of the code (NOT the “iframe” version — it won’t work) to your clipboard.

custom iframe tab

The Like button popup dialog box displays both iFrame and XFBML. USE XFBML!

#1: The Like button: From your tab to users’ news feeds

The Like button is easily the most popular of the social plugins. You can have as many Like buttons on an iFrame tab as you want. For each Like button, you can specify a target URL, which can be a Facebook fan page or any other URL on the web. However, you cannot link to a specific fan page tab, only to the fan page itself.

custom iframe tab

Popup dialog when a user clicks the Like button.

Users have the option to add a personalized message in the Like dialog box that pops up when the Like button is clicked. If the user doesn’t add a message, a simple text message posts to their wall with a link to the target URL in the image below:

custom iframe tab

However, if the user does add a message, their like will show up on their wall and news feed with their comment, your logo and a link to the target URL, PLUS:

  • If the target URL is a Facebook fan page, the post will also include the company name and the About Box content (in the left column after the navigation), followed by ” | Facebook”:
custom iframe tab

What shows up in a user's news feed and wall if a custom message is added to the Like dialog.

  • If the target URL is an external website, the wall post will use an image and content specified in that website’s “meta” tags if they’re specified in the code of the target URL. If they aren’t specified, Facebook will grab a random image on the page, as well as random text. (Learn how to control images and text with meta tags.)

The image below is a wall post where the URL for the Like button has a meta-tag that specifies an image (“image_src”) as well as a “description” meta-tag that supplies the text below the link.

custom iframe tab

#2: The Send button: Direct sharing/messaging

On April 25, 2011, one year after the introduction of Social Plugins, Facebook rolled out the Send button.

custom iframe tab

The Like button paired with the Send button.

custom iframe tab

Clicking on the Send button pops the above dialog.

The Send button alone, or paired with the Like button

There are two ways to implement the Send button: 1) paired with the Like button (as shown above), or 2) stand-alone. Use the Like button code generator to create a Like/Send combination by checking the “Send button” option in the code generator:

custom iframe tab

The Send button replaces “Share with Friends” and the FBML multi-friend selector

Back in the old days (pre-April 2011), pages could incorporate the FBML tag “fb:multi-friend-selector,” which displayed pictures of your friends to click to select for the message:

custom iframe tab

And there was the “suggest to friends” text link near the top of the right column that popped a similar dialog box. It’s actually still there (!), and you can select friends and click “send recommendations” … but the message never arrives.

The Send button now brings this feature back to Facebook pages, but much improved.

Direct messaging to Facebook friends, groups and email addresses

When a user clicks the Send button, a dialog pops up (as shown below) where users can enter their friends’ names, Facebook groups or simply email addresses, and whatever message they send, plus the specified target URL.

  • If sent to friends, they receive a Facebook message that includes your comments, the image associated with the URL and description (derived as described above for the Like button).
  • If sent to a Facebook group, the message appears on the group’s wall.
  • If sent to an email address, the recipients receive an email with the subject line “conversation with [your name]”, your added message and the URL.
custom iframe tab

Send button dialog: Enter Facebook friends, groups or email addresses.

#3: The Comments box: Improved

Facebook’s comments box social plugin allows you to add a Comments box similar to the old FBML fb:comments tag, but much better, as it allows threaded discussions, and more closely replicates the wall.

Unique from the Like and Send buttons, you can specify a Facebook tab URL for each Comments box you create.

When you generate the code on the Comments box social plugins page, you don’t need to have “http://www.” in the URL field. Facebook will fill that in:

custom iframe tab

Clicking "Get Code" generates the XFBML you need for your tab.

There are a number of moderation features when using this plugin on an external website, but these don’t seem to be available when the Comments box is on an iFrame tab.

Great opportunities for brands using custom iFrame tabs

These new and enhanced tags are just the beginning. I imagine that page admins will see a number of social plugin enhancements in the coming months. And we won’t be missing FBML at all!

What do you think? Do you have any specific social plugins you’d like to see that haven’t been developed yet? Leave your comments in the box below.

Tags: , , , , , , ,

About the Author, Tim 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 »




More Info
  • http://www.colemanmg.com Antonio Coleman

    Tim..every time I look around there’s another plugin for something..but it’s great to see these element being put to use by facebook.

    “Black Seo Guy “Signing Off”

  • Pingback: 3 Social Plugins for Customizing Facebook iFrame Tabs | MarketingHits.com()

  • http://www.hyperarts.com/blog/ Tim Ware

    Well, let’s hope Facebook continues to develop and improve them!

  • Pingback: Social Media Needs Customization | Social Media Consultant()

  • Afriend

    Multi-friend-Selector STILL works.  its a bit harder to code in PHP, but still is functional. Study the Great likeback by Corona beers to see one in action.   Then study PHP code.   IT is actually just a couple of lines more to add to yur I-frame tab.

    google hyperarts for more info also.  Their site has much great stuff there including the fangate code and other codes to drop into your tabs.   And for complete novices Hyperarts give the very begionning of I-frames also.

    Thanks for a great article!  Happy facebooking!

  • Karen

    Does anyone know of any web experts or developers who can help me integrate these new plug-ins into my existing website?  Any recommendations would be appreciated.  Thanks!

  • Matthew

    Tim,  I have used the iframe code for the like button over the XFBML code. Now I am using a product at work that will not use/work with the XFBML code and I was wondering if you know of any iframe code for the facebook comment box?

  • http://www.bluebanana.co.nz Linda Coles @ Blue Banana 20

    Hi Tim, very thorough article. I sometimes wonder where my “developer skills” should stop, where is the line? Thanks for sharing. Linda

  • Kyle

    Hi Tim – Do you know if it’s possible to track clicks to the generic Facebook like button vs. clicks to a like button within an iFrame tab?

  • http://www.dynamikinternetmarketing.com/ Dino Gomez

    Amazing post here Tim! Thanks for putting in so much time crafting this article.  I will be sure to check out those free tab applications that Hyper Arts has to offer.

    Cheers,
    Dino

  • http://ImpartialGeek.com David Foster

    Great post Tim. I am the creator of the iFrameEngine which is a way for people to customize their Facebook pages and you are so right. This is a great time, and it is really cool what we have seen because we are able to build fully functional websites directly into the Facebook platform. At first we thought we would miss FBML because of how easy it was, but now that it’s gone, we really don’t. iFrames give us so much more freedom in design and overall options. 

  • http://www.hyperarts.com/blog/ Tim Ware

    Thanks for the shoutout for HyperArts! That’s actually my company.

    Anyway, even if there is a way using jQuery or PHP to replicate the pics version of the multi-friend selector, the big drawback is that the app will have to show the user the “allow” prompt warning about the info the app wants access to, and this would be the best reason to just use the Send Button which doesn’t put up that roadblock.

    I visited the Corona page but didn’t see a “Great likeback” so if you provide a link to that, it would be helpful.

  • http://www.hyperarts.com/blog/ Tim Ware

    Hi Karen, HyperArts can certainly help you with that: martiniti.me/h0etk1

  • http://www.hyperarts.com/blog/ Tim Ware

    Well, Facebook, on the Comments Box Social Plugin page, only generates XFBML code.

    But don’t confuse iFrame code for the plugins and iFrame tabs. I don’t understand what “product at work” you’re using that doesn’t work with the XFBML code?

  • http://www.hyperarts.com/blog/ Tim Ware

    Linda, Not to be flip, but I’d say your developer skills should stop at the point where it’s no longer fun. Coding and programming are challenging but the rewards are immediate and tangible. So when it just seems like work, with no satisfaction in sight, then you may want to hire a pro.

  • http://www.hyperarts.com/blog/ Tim Ware

    If you mean by “generic Facebook like button” the one next to the Page name, at the top, you can go into your page’s Insights > Users > New Likes; it will show you the sources of your page’s Likes. As you may know the Like Button at the top of your page is only one of several ways users can Like your page, as probably most Likes come from other pages or websites.

    The specific statistic for the Like Button is shown on Insights.

  • http://twitter.com/1indsayh Lindsay Hunt

    Thanks for the helpful info! I just learned to create custom Pages with iFrames (thanks to your comprehensive and easy to follow tutorial). I’ve been wondering how to incorporate Plugins…question answered!

  • Simon.

    iFrame Tabs: awesome. But how do I create one? Can’t find it anywhere. I just want to create some tabs like “Our Team” on the sme facebook page. Help appreciated. /Simon.

  • Simon.

    it’s ok everyone. found a tut here:
    http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/

    cheers anyway.
    /Simon.,

  • Pingback: The Facebook iFrames Buzz()

  • Kyle

    Thanks for your response, Tim.  Unfortunately, Facebook Insights groups a lot of different Like sources into “Unknown” (as described by a rep at Facebook, this includes anything they are beta testing like new ads and like buttons, etc).  Just wasn’t sure if you could add Google Analytics to a Like button within an iFrame tab to track clicks to that specific Like button.

  • http://twitter.com/retave Retave

    How to embed on your page a nice looking 3D-Like-Box!
    3D feature is currently supported by Safari and Chrome
    http://chromeactions.com/3d-like-box.html

  • https://plus.google.com/+AnaHoffman/ Ana Hoffman

    This is an excellent post, Tim. My FB page brings a lot of traffic and these plugins are an excellent way to boost that. Thanks for sharing.

  • http://about.me/oros Jonathan Oliff

    Thanks Tim, great post!  I wanted to ask about running competitions through the iFrames. The bounce rate for our last competition that involved an app was really high, so we’re looking at running competitions through the iFrames. The iFrames don’t require users to allow access to their information when you interact with them like Apps do. I just wanted to check what everyones thoughts on this were?

  • http://www.hyperarts.com/blog/ Tim Ware

    Ah. If you’re asking if you can track clicks on a Like Button in an iFrame, the answer is Yes. You can read the details on Facebook’s Like Button page. I don’t believe you can get Google Analytics on your XFBML Like Button, however, only the Insights analytics Facebook provides.

  • http://www.hyperarts.com/blog/ Tim Ware

    Jonathan, Just to be clear, iFrame tabs are apps and if, via PHP, your iFrame tab app requests user information, the user will be presented with the “allow access” prompt. Read the details on Facebook’s Authentication page.

  • http://about.me/oros Jonathan Oliff

    Sorry Tim, what I mean is that I’ve had a problem using the apps that have been provided (by Wildfireapp for example). I’ve found that people are opting out when the app presents them with the “allow access” prompt. I personally have no problems with allowing apps to access info (provided I trust the brand that’s endorsing them), but I think that I’m speaking about using the iFrame as a ‘window’ into the web and still including the social plugins that you’ve mentioned, but just making them an optional part. The only example I can think of right now is this ‘Save the Rhino’ app, once you’ve signed the petition you can “get friends involved” (Plugin-Sharing content to your wall)- https://www.facebook.com/WoolworthsSA?sk=app_184043314978312

  • http://about.me/oros Jonathan Oliff

    I might have missed the boat here a little, but I’ve come to learn… I guess it might depend on what needs to be done in that space, sorry about the lengthy comment…
    “I didn’t have time to write a short letter, so I wrote a long one instead” …ha ha

  • http://twitter.com/easyfanpage Justin Wheeler

    Looks Good.  Thought it was worth pointing out that our premium plugin for WordPress, Easy FanPage Design includes al the Facebook Social Like buttons along with quite a lot more awesome functionality.

  • Pingback: Social Media Crisis Management, Google Panda 2.0 and much more... | Best of the Week | Position² Blog()

  • Bill Lord

    Great tips as always Tim. Thanks for putting this together. I always seem to learn something new with each one of your posts!

  • http://www.hyperarts.com/blog/ Tim Ware

    Then I’m doing my job! Thanks Bill.

  • http://www.facebook.com/people/Mir-Saheed-Mohammad/100002240213318 Mir Saheed Mohammad

     hello

  • http://www.facebook.com/ola.apata Ola Apata

    use static xfbml to build and customize your fan page

    http://apps.facebook.com/static-xfbml

  • http://www.reflectdigital.co.uk Reflect Digital

    Really great post, thank you!

  • Аркадий Рутман

    Thank you for this article, but Tim you said that we can use this method for Facebook Fan page. But where and how i should paste Analytics code to track my facebook fan page activities with Analytics?

  • Chqdzn

    @ Tim Ware:  

    The “Free iFrame tab application” titled  “TabPress” application that you offer at the top of this page is no longer accessible to “Add to Page”.  I’ve asked several times in the Tab Press forum at http://forums.tabpress.com/topic.php?id=22,  The answer given by the Developer “tab Presser – Key Master” is as follows:It’s very strange that the “Add to My Page” button isn’t even showing up. This appears to be a hiccup on Facebook’s side of things.POSTED 2 DAYS AGO #Will this ever be fixed?  Is anyone at HyperArts (the developers) going to investigate this with FB?What I wound up using was this http://www.facebook.com/apps/application.php?id=190322544333196Thanks!

  • Victoria

    Hey Tim
    do you know if it’s possible to fan-gate the wall? I’m trying to hide the wall from non-fans, and reveal it when the user clicks “like”.. isthis possible with the new style of fan page?

  • http://ImpartialGeek.com David Foster

    Hey Victoria, it is not possible to block access to your wall only individual custom tabs. Facebook does not allow you to block access or remove your wall or info sections. Hope this helps.

  • Pingback: 9 Facebook Marketing Success Stories You Should Model | think.point.click.()

  • http://www.facebook.com/3loise3.dryburgh Elly Deborah Dryburgh

    how do you put a like button on a facebook page created on facebook or is this not possable?

    many thanks

    Elly
    x

  • Gerald Broughton75

    paste this in your status box to hear music!
    http://www.reverbnation.com/tunepak/3492950

  • Pingback: How to Implement Google Analytics Social Tracking on Your Website | HyperArts()

  • http://www.ydeveloper.com/e-smart-ecommerce-suite.html Ydeveloper

    This is excellent way of promoting the website using facebook.

  • Sanalpbhaskar

    when i add to my page it shows no result…???

  • http://cms-global.net/ Online Marketing

    Excellent post. But you should do a post on what to use to create the best looking/functioning fan pages, there are so many different programs and services to do it, one can easily get lost.

  • http://www.facebook.com/Aaryan.suraj Suraj Aaryan

    yup…

  • http://www.affiliateblogger.ws/ Affiliate Blogger

    There are lots of plugins and different ways to incorporate Facebook into a blog. I prefer just small icons to enable the social capabilities.

  • Pingback: Monitoring Social Interactions with Google Analytics « SimpleFinanceToday.com()

  • http://www.facebook.com/poorti.modale Poorti Modale

    hey this is gr8

  • Pingback: 10 Key Strategies To Do SEO for Your Facebook Page « Snap!()

  • http://twitter.com/VbrandStore Vbrand Store

    Is there a way for me to create a tab, like a coupon page, which shows up whenever someone likes my page?

  • Davidwright

    hey there I want to try to add a paypal button onto one of my facebook pages but I’m getting lost in the internet can you tell me how this is done?

  • http://www.facebook.com/mark.maky.9 Maky Mark

    great post

  • http://www.facebook.com/mark.maky.9 Maky Mark

    great post









Pinterest
Join our Social Media Marketing Networking Club
Check out the Social Media Marketing Podcast!