23

I am able to put a Facebook like button on my website, but how do I make it to be right-aligned within the div/iframe it is in?

I tried applying various CSS properties, but I could not get anything to move in the iframe.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Moshe Marciano
  • 2,349
  • 4
  • 33
  • 44
  • You probably want to use "float: right;" but it's really hard to say without seeing what you have. Please provide your html/js code. – Ben Lee Nov 07 '10 at 16:22

7 Answers7

14

I think this link could help too: http://shades-of-orange.com/post/2011/01/09/Embed-Facebook-Like-Button-e28093-Right-Align-with-css-and-Settings.aspx

It says to set the width to "0". Then the box will be autoresize by Facebook and you can apply a float right to that box.

SequenceDigitale.com
  • 4,038
  • 1
  • 24
  • 23
  • Perfect, this is exactly what I was looking for that brought me here. Thanks! – CWSpear May 10 '12 at 16:07
  • 4
    The link is dead, which is why it's always a good idea to copy and paste the relevant code in an answer. – Soviut Dec 18 '12 at 04:45
  • Quoting the link above: On [Facebook Button Page](https://developers.facebook.com/docs/reference/plugins/like/) "in the settings make sure to select width to equal 0. This leads to the facebook like button element always being the size it actually is. Which allows you to position whichever way you want, to the right for example. However there is one little trick, you still have to pull: There is a 15 pixel margin to the right of the element. You can align the button exactly to the right by giving your parent html element following css style: position:relative; right:-15px;". – Avatar Sep 16 '13 at 13:58
3

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/

sakibmoon
  • 2,026
  • 3
  • 22
  • 32
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • 13
    There's a problem with this, you have to set the width - you won't know the width of the box because the text is always different – Jason Jun 23 '11 at 02:05
  • 9
    Neither `text-align:right` nor `float:right` solve the problem of a right aligned like button which should have no margin to the right border. You need to set the width, which is variable and depends on the language the button is displayed in. Sample: http://jsfiddle.net/Mujj6/921/ – JimmyBlu Jul 22 '11 at 13:18
  • @JimmyBlu ... note that if your select the button that shows Like counts - that the width will also change. – MeSo2 Aug 13 '22 at 14:58
1

Thanks for everyone's input. The position relative trick doesn't always do it for me:

div.around-fb-like{
    position:relative;
    float:right;
}

So far this has been more dependable:

#fb-root{
    position:absolute;
    left:-1000%;
}
sakibmoon
  • 2,026
  • 3
  • 22
  • 32
site
  • 1,608
  • 14
  • 11
1

Seems as though there are many ways to achieve this that work in different situations.

None of the above seemed to make any difference to the position of my 'like' button, however a little trial and error with a "margin-left" tag and I got it in the right place.

Chris Sharp
  • 19
  • 1
1

What is described in Embed Facebook Like button – Right align with CSS and settings works. However, in my website, I had to change the style to

position:relative; right:-130px;
sakibmoon
  • 2,026
  • 3
  • 22
  • 32
pallu
  • 43
  • 1
  • 5
-1

the 'like' social plug-in seems to have changed styles within the iframe. what's the best way to prevent the 'like' from flowing right, on the following page?

[http://www.biographile.com/the-righteousness-and-ruin-of-science-on-this-week-in-history/16573/][1]

daily-learner
  • 617
  • 1
  • 8
  • 17
-1

With DIV it's easy:

.fb-like{ vertical-align:top;}

posted also on SimpleMediaCode.info ( http://e-art.lv/x/fbas )

sakibmoon
  • 2,026
  • 3
  • 22
  • 32
Umbrovskis.com
  • 9