Right-align the contents of a Facebook like-button iFrame?

问题

I need to right align the contents of a Facebook Like button so that they always sit against the ride side of their set "width". I can do this in Firebug by setting the table to float: right;, but it doesn't appear to work if I define that value in the CSS.

Here's in image to explain my question:

EDIT: Here's a JSFiddle: http://jsfiddle.net/h66z3/2/

回答1:

Since you are using the button_count layout, there is a little trick I found that seems to work. Basically you just wait for the iframe to be inserted, and then set its width to 0. It will then automatically resize itself to the proper size. I can't swear this works under all circumstances and with all widths, but please test it out and see if it works for you. Here is a sample code page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type='text/javascript'>
function loadcode(d, s, id)
{
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, 'script', 'facebook-jssdk');
setTimeout(initx, 10);
}
function initx()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
if (likeframe) setTimeout(setwidth, 10);
else setTimeout(initx, 10);
}
function setwidth()
{
likeframe=document.getElementById('d2').getElementsByTagName('iframe')[0];
likeframe.style.width='0';
}
</script>
</head>
<body onload='init()' style='margin:10px 50px'>
<div id="fb-root"></div>
<div style='text-align:right'>Here is some right-aligned text to compare to.</div>
<div id='d2' style='float:right'>
<div class="fb-like" href="http://www.google.com" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div>
</div>
</body>
</html>

Unfortunately this doesn't work for the standard layout, not sure why it's so different.

回答2:

Following Derek's suggestion, I used the HTML5 version instead to yield this result: http://jsfiddle.net/namuol/h66z3/6/

The source below was generated via Facebook's Like Button generator.

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

HTML

<div id="fb-root"></div>
<div class="container">
    <h1>Page Title</h1>
    <ul class="share">
        <li>
            <div class="fb-like" data-href="www.teespring.com" data-send="false" data-layout="button_count" data-show-faces="false"></div>
        </li>
        <li>
            <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        </li>
    </ul>
</div>

The CSS was unchanged.

回答3:

I don't believe you'll have any luck using CSS (or anything else for that matter) to affect the contents of Facebook's iFrame. I think the best you're going to do is changing the width of the iFrame element itself so that it JUST fits the amount of Facebook content you would like to show. And then right aligning the entire iFrame.

Pretty sure that affecting the content within the iFrame isn't possible because it's on a different domain.

If you want it to perfectly align to the right, without any extra white space that you yourself do not add, it's just not going to happen. Facebook is going to leave extra space at the end of their content to account for the Like # ticker to get bigger and bigger.

To perfectly align it (with no extra white space), you'll need to use ONLY the like button with NO ticker. The like button itself is the only element that has a constant width.

回答4:

I've tried to do this as well but because it's an iframe you can't change it. My suggestion is to use either plane like button (I believe the like button you are using will display information to the right of the 169k saying you liked it) or change your design so it is Email | Twitter | Facebook.

I know it sucks but because it is an iframe everything inside the iframe is hands off for you.

回答5:

check this example http://jsfiddle.net/sandeep/h66z3/3/ may be that's you want

.container {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
h1 {
    display: inline-block;   
}
ul li{float:right}
ul{overflow:hidden}

回答6:

As pointed out by others there is no easy way of doing this because the content is locked inside an iframe. But if you relish a challenge, you might want to look at How can I make the Facebook Like button's width automatically resize? for an idea I've been tinkering with.

回答7:

Very easy for the button_count layout. Just place a div around the iframe and set div to absolutely positioned and to the right. E.g.,

<div style="position:absolute;right:0;">
<iframe>...</iframe>
</div>

来源：https://stackoverflow.com/questions/7743036/right-align-the-contents-of-a-facebook-like-button-iframe

标签

css

facebook

facebook-like