Right-Align The Contents of a Facebook Like-Button Iframe

Facebook Like Button Align Text In Iframe to the right

css rules only apply to the iframe element, not the contents of the iframe, because it is another webpage entirely.

You 'might' be able to use javascript to add a css stylesheet to the iframe page with:

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.head.appendChild(cssLink);

But I'm not sure if that will work on all browsers.
Your best bet is to call the page with AJAX.
That way you can modify the contents of the page before you display it

An example jquery AJAX function might look like this:

$.ajax({
        type: "GET",
        url: "facebookURL",
        dataType: "html",
        success: function(html) {
            processData(html);

        }
    });

function processData(fbData) {
    $('#injectFBLikeHere').html(function() {
        return $(fbData).find('#LikePluginPagelet').html();
    });
}

Note I haven't test this, only use it as a starting point or a guide

Right align Facebook like button

iframe is an inline element, you can use

text-align: right

for a div that contains that iframe, or float the iframe to the right, but just make sure to clear the float afterwards.

sample: http://jsfiddle.net/Mujj6/3/

and: http://jsfiddle.net/Mujj6/5/

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

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.

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

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/

Misalignment of Facebook & Twitter buttons

Found the style that is pushing it down ..

If you use FireBug and scroll down to the iframe within the FB button.

This CSS style

.fb_iframe_widget iframe

has this element

vertical-align: text-bottom;

That's the one who's pushing it down.

You can override the CSS style with the following combo of selector and !important

.twitter-share-button[style] { vertical-align: text-bottom !important; }