Facebook Like Button Causing Horizontal Scrollbar

V

7

I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.

I've checked the created code in Firebug and can't see what's going wrong.

Here's a link to the site so you can see: http://www.swiftfurniture.com/

As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.

I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.

I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.

Viglione answered 21/3, 2012 at 16:28 Comment(0)

P

4

I've looked into your problem a bit with Firebug and can share some observations that might be helpful.

There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.

That is what is causing the scrollbars.

Plaided answered 21/3, 2012 at 17:19 Comment(1)

Don't know how I missed that, I knew there must be something making it wider but couldn't spot it. Doh! I added: .FB_UI_Hidden { width: 100px !important; } as a css style and it fixed the issue. Thanks – Viglione 21/3, 2012 at 17:33

D

4

You can add to the "fb-like" attribute data-width="100px"

Delectate answered 12/2, 2014 at 10:29 Comment(2)

This was the right solution. My like widget no longer jumps to a large width while loading. – Gertrude 26/2, 2014 at 4:13

Of the various solutions listed on this page, this was the only one that actually worked for me. Symptom was horizontal scrollbar flashes while FB button loading (and then disappears). – Fission 6/4, 2014 at 15:9

M

3

The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.

You can resolve this issue by placing the fb-root div as the first child of your body element

<body>
    <div id="fb-root"></div>

The script tag and fb-like div can remain in their original place.

Ref: Facebook documentation and bug report

Moina answered 17/4, 2012 at 7:21 Comment(1)

I have #fb-root as the first child div, and I'm still seeing the problem. – Yorgos 14/2, 2014 at 23:59

A

0

I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.

Good Luck, hope that helps.

Audwin answered 21/3, 2012 at 17:14 Comment(0)

W

0

There is a DIV just after

<div id="fb-root" class=" fb_reset">

<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">

Remove position absolute from this and that horizontal scroll will disappear after that it will show some content saying

Given URL is not permitted by the application configuration.

so either just remove this DIV or apply

display:none; to get this working perfectly

See this screenshot

enter image description here

having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted content in circle.
applying display none; to this div or by removing this div completely from the code, will lead you to the solution

Wasteland answered 21/3, 2012 at 17:17 Comment(1)

I can't change any of that code though as far as I'm aware? It's injected by Facebook. – Viglione 21/3, 2012 at 17:33

S

0

None of the answers here worked for me so I tried it myself. I found a solution:

Put following CSS in your site head:

#fb-like-wrapper iframe {
    width:100px!important
}

Put following HTML where you want to show your like button:

<div id="fb-like-wrapper">
    <div id="fb-root"></div>
    <div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite" 
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div
</div>

There you go :)

Staurolite answered 16/2, 2014 at 0:11 Comment(0)

Y

0

Add this to your css

.fb-like{height:20px}

Add attributes data-width and data-height to

<div class="fb-like" data-width="124px" data-height="20px"></div>

This also prevents the vertical scrollbar from appearing if it is not needed.

Yates answered 6/7, 2014 at 17:1 Comment(0)

Recommended topics

Hot tags