Wednesday, January 12, 2011

Facebook like button without iframe

Is anyone aware of a Facebook 'like' button implementation that doesn't use an iframe? I'd like to use the like button, but currently can't due to accessibility requirements.

  • You can use the Facebook SDK to do this without an iFrame.

    There are two Like button implementations: XFBML and Iframe. The XFBML version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.
    -From http://developers.facebook.com/docs/reference/plugins/like

    Its pretty easy to implement.

    Bobby Jack : Hmmmm... XFBML definitely looks like an option, but I'm put off by the XHTML requirement (currently serving HTML) and the need to register each page as a 'facebook application', which seems like massive overkill. Unless I'm misunderstanding it ...
    piquadrat : The XFBML version of the Like button is transformed into an IFrame by facebook's Javascript code, so you'll end up with an IFrame on your page either way.
    Bobby Jack : Back to square one, then! :-)
    From MrHinsh
  • It is impossible for you to know which Facebook user is viewing your page, so you can't display which users have also liked the content. If you could, that would be a ridiculous security hole.

    The only way to do that is to have an iframe to Facebook's site, and then Facebook shows you which friends have liked the page.

    The best you can do is pull the number of likes from the Graph API.

    Bobby Jack : That makes sense, but isn't there a version that a) allows the user to 'like' the page (that's just a plain link, I assume) and b) show the number of likes?

0 comments:

Post a Comment