Menu
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/
470
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.
146
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.
JS
(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.
39
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.
29
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.
35
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}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
