Jake Wilson
Jake Wilson

Reputation: 91193

How to align Facebook Like Button in dynamically-created iframe?

I know there are a lot of questions about "aligning Facebook buttons" but they all seem to talk about people using iframes directly in their markup. I'm using the HTML5 Facebook button code and then loading the iframe dynamically.

enter image description here

Take a look as the JSFiddle

As you can see, there are three social buttons. The Twitter and Google+1 iframes appear to autoamtically adjust their size to match their contents. The Facebook iframe does not. It appears to be a fixed width iframe with narrower contents.

Is there a simple way to make this iframe size itself properly?

I could probably use jQuery to manipulate the size of the iframe after the page loads but I'd like to avoid that. It would be nice if the iframe simply loaded up the right size from the start.

I'd also prefer to avoid using an iframe directly in my code because I dynamically load the Facebook scripts later in the page, which is what dynamically injects the iframe.

Upvotes: 0

Views: 1032

Answers (2)

Jake Wilson
Jake Wilson

Reputation: 91193

My only solution for this Facebook Like Button limitation was to place the Like button after the Google+ button. That way it doesn't matter what the width of the Facebook div ends up being. It will be equally spaced from the other buttons.

http://jsfiddle.net/FLuKW/10/

Upvotes: 1

PAULDAWG
PAULDAWG

Reputation: 790

I don't know about having it auto fit, but you can override the width.

.social{
    margin:20px 0;
    overflow: hidden;
    padding-left: 20px;

}

.social > div {
    float: left;
    height: 70px;
    margin-right: 0px;
    border: 1px solid red;
}
.facebook{
    width:45px;
}

Upvotes: 1

Related Questions