1

I am using Facebook's "Like" button (http://developers.facebook.com/docs/reference/plugins/like/) on my site (standard iframe version, not XFBML) and want it to float in the page text (inline). The problem is that the button can have various states, depending on whether you "liked" yourself, how many likes there are, language etc., and each of those states has a different width. I want the size of the button's iframe to be only as big as the iframe's contents, allowing the button to float inline with no ugly spacing around. Every solution I have found involves fixing the width of the iframe or surrounding DIV.

Note: This question is NOT a duplicate of How can I make the Facebook Like button's width automatically resize?. I want not fixed but dynamic width.

Community
  • 1
  • 1
limulus
  • 213
  • 2
  • 11

1 Answers1

4

I encountered the same issue. The thing that makes this difficult is that you can't use javascript on the contents of an iframe containing a page from a different domain.

It's only a partial solution, but this may be of some help. You can determine how many times the page has been "liked" and adjust the style using Javascript (shown here using jQuery) accordingly:

jQuery(document).ready(function($) {
    var shareUrl = window.location.href;

    $.getJSON('http://graph.facebook.com/?id=' + escape(shareUrl) + '&callback=?', function(data) {
        if (data.shares) { //if the tip of the day has been "liked" at least once
            $('#fblike').addClass('hasLikes');
        }

    });
});

Example styling:

#fblike.hasLikes iframe {
    width: 87px !important;
}

You could similarly get other information from the Facebook Graph that could help you determine the width, or perhaps create your own custom display code (although at minimum you'd still need to use the provided iFrame for the "Like" button itself; you'd just turn off all the extras)

Matt Browne
  • 12,169
  • 4
  • 59
  • 75