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

score 2 · Accepted Answer · answered Oct 06 '11 at 23:51

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

score 0 · Answer 2 · edited May 23 '17 at 12:28

Modifying the contents of an iFrame is typically impossible by modern web standards : http://en.wikipedia.org/wiki/Cross-site_scripting

Because you cannot determine the width of the like button inside of the iframe, you can't resize the iframe to the minimum width to be nested on the right.

The only way I can think of is resizing the iframe, but as you said, you need it to support multiple languages, which I guess then if you used javascript to detect the user's language ( JavaScript for detecting browser language preference ). You might be able to manually style the like button's iframe width depending on the language. I can't think of any automated way to do this, due to cross site scripting.

score 0 · Answer 3 · answered Jan 04 '12 at 04:47

Here is what to do.

Insert a DIV called #like before you tag, then Put your Facebook code inside as shown below

<div id="like">

  <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
  <fb:like href="http://www.facebook.com/pages/HUE-Architecture/122612441133152" layout="box_count"></fb:like>
</div>
<!-- End Like

Now create the #like CSS that you applied to the above DIV as shown below and adjust as needed.

/* CSS for Facebook like*/

 #like {
        position: fixed;
        top: 300px;
        right: -20px;
        float: right;
        height: auto;
        width: 130px;
}

Note: remove any previous CSS that you applied to the i-frame so it doesn't conflict with this one.

score 0 · Answer 4 · edited Oct 26 '12 at 11:52

0

Maybe this will work for you: when you generate code here, set the width to 0.

edited Oct 26 '12 at 11:52

Pedro Romano

10,973
4
46
50

answered Feb 28 '12 at 07:35

Neha Parmar

1

score -1 · Answer 5 · answered Mar 16 '11 at 19:20

-1

Like this? http://d.pr/Cbkd

If so, here's what I did via Firebug

.connect_widget_number_cloud, 
.connect_widget_connect_button {float: right !important;}

I also changed the iframe width to something like 60px.

answered Mar 16 '11 at 19:20

Koes Bong

1,113
3
15
28

http://pastehtml.com/view/1dnxiy8.html i did what you said, but it makes no difference for me. maybe i did something wrong? Im testing on Windows, latest Chrome version. – Mr.Boon Mar 16 '11 at 19:30
2

You can't change CSS in a iframe from your website, thats facebooks part. You can only do it in firebug ect. – Allan Kimmer Jensen May 23 '11 at 08:09

Facebook Like Button Align Text In Iframe to the right

5 Answers5