Facebook Like Button Align Text In Iframe to the right

Question

I'm using the facebook like button on my site, via an iframe.

Now you have to specify a width of the iframe. Due to various languages of the like button, this means that I have to set the width to at least 70px.

Now i want the like button to be aligned to the far right of my site, now i can do this by adding "text-align:right" in the css style of the iframe. The iframe shows on the right, but not all the way on the right.

This happens because of the iframe width, its 70px, and for example the english like button is only 55px.

Now what i want: To align the actual content of the iframe to the right of the actual iframe.

http://pastehtml.com/view/1dnwtbh.html

Here i have build an example. Its aligned on the right of the div ive build, but because the iframe is larger than the actual like button, its not perfectly aligned to the right. I want to like button to be aligned to the right in the iframe.

I hope you guys can help

Answer 1

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