Floating a Like button to the right

Question

My problem is basically described here. I need to float a FB Like button to the right, considering that the width of the button will vary according to the language (and number of likes).

Though it's impossible to manipulate elements in an iframe belonging to a different domain, I still wonder if there is some exotic method to do something about it. I can't believe there is NO way whatsoever to float a damn Like button to the right.

Actual solution for this — http://stackoverflow.com/a/9670314/535406 — jibiel, Apr 13 '13 at 19:41

score 0 · Answer 1 · answered Mar 04 '12 at 16:53

0

give the button a wrapper.

<div id="likeWrapper">

</div>

<style>
#likeWrapper{
   float:right;
}
</style>

answered Mar 04 '12 at 16:53

Eric Hodonsky

5,617
4
26
36

Won't remove the space on the right of the button which results from a fixed width. – drake035 Mar 04 '12 at 17:00
well you can always overwrite it with javascript. it may be a pain, but I'm sure it's possible. And where is this 'fixed width' set? if it's the like button code, I'm sure you can just edit it too... I've done it before. ORRR.... do the custom like button instead. – Eric Hodonsky Mar 04 '12 at 17:06

score 0 · Answer 2 · edited Mar 05 '12 at 09:29

0

Just float the actual iframe to the right.

edited Mar 05 '12 at 09:29

Mariusz Jamro

30,615
24
120
162

answered Mar 04 '12 at 16:54

christophmccann

4,181
7
42
66

Same comment : won't remove the extra space on the right resulting from fixed width. – drake035 Mar 04 '12 at 17:00

score 0 · Answer 3 · edited Mar 04 '12 at 21:13

I believe that you can't do that just by html and css, because of the fixed width of the button, you will always need to have some extra space on the right, even if you float the button to the right.

There is one quick dirty hack, but it will work only for one particular language -

.like{
  position: absolute;
  float:right;
  right: -20px; /*change this to fit your layout */
}

But you see the problem with this: if the like button is longer in another language, it will go beyond your layout.

So we can do it by javascript (jQuery), something like getWidth of the like button first, then move it to the right by required amount of pixels. I can't help you with the exact code, i am little rusty with jQuery, but that is the basic idea: get width of the button displayed, then change the right: css property with jQuery in order to match your layout.

As far as I know it's not just editing that can't be done inside a different domain iframe, it's even accessing/reading. So I can't get the width of anything inside the iframe. — drake035, Mar 04 '12 at 17:54

Floating a Like button to the right

3 Answers3