Reputation: 91193
I know there are a lot of questions about "aligning Facebook buttons" but they all seem to talk about people using iframe
s directly in their markup. I'm using the HTML5 Facebook button code and then loading the iframe dynamically.
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
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.
Upvotes: 1
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