Facebook Like button causing horizontal scrolling on mobile device

Question

I have a Facebook Like button implementation which is rendering fine in all browsers desktop and mobile. But the issues lies on low-res devices with resolution of 240x320. the Like button is causing the device to zoom into the page thus rendering horizontal scrolling.

The buttons is rendering fine on devices with width >= 320px like the iPhone etc., but older android devices with width less than that are facing issues.

The way I see it. The page loads fine, then makes a server call to Facebook and then returns with some parameter that breaks it all up. It is generating an <iframe>. I am trying to put width and overflow CSS parameters but none seem to work. I am initializing the Like button like this:

<div id="fb-root">
<!--Facebook begins-->       
        <div class="fb-like" data-href="<%=RedirectURL%>" data-send="false" data-layout="button_count" width="80" data-show-faces="false"></div>
        <!-- ends -->
</div> 

<script>
        window.fbAsyncInit = function () {
            FB.init({ appId: '328982000461228', status: true, cookie: true,
                xfbml: true
            });
            FB.Event.subscribe('edge.create', function (response) {
                ntptEventTag('ev=Social&Action=Method Shared');
            });
        };
        </script>
    <script type="text/javascript">

borisdiakur · Answer 1 · 2011-12-19T09:05:19.587

4

Put your like button into a div and apply the overflow hidden style on that div.
UDATE: Try also to set overflow hidden on the html and body tag (makes a big difference on fb page tabs).

A code snippet you also might find useful is this:

<meta name="viewport" content="width=320,user-scalable=false" />
<style type="text/css">
    body {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -webkit-user-modify: none;
        -webkit-highlight: none;
        -webkit-user-select: none;
    }
</style>

edited Dec 19 '11 at 09:05

answered Dec 16 '11 at 13:31

borisdiakur

10,387
7
68
100

the viewport if set to 320px, would pose a problem for low res devices. not recommended. and the overflow: hidden i already implemented. not working. – amit Dec 16 '11 at 15:47

score 4 · Accepted Answer · answered Dec 21 '11 at 06:42

None of the above solutions helped. Finally got the answer. Although it is not the best solution, but it gets the job done.

I applied this to the parent container of the fb like button:

.socialIcons { display: inline-block; width: 200%; /* for low res androids */ overflow: hidden; margin: 5px 0 5px 10px; }

score 3 · Answer 3 · answered Dec 16 '11 at 13:21

3

Facebook Like Button automatically generates an iframe on your page. Try set the width if the iframe with css or dynamically with javascript. The iframe has class="fb_ltr".

answered Dec 16 '11 at 13:21

Kristoffer Svanmark

778
5
11

cannot be done. i try to do it through javascript. but the like button makes a server call to facebook. after which its all the same story. – amit Dec 16 '11 at 13:30

score 3 · Answer 4 · answered Dec 20 '11 at 07:02

3

Detect a low resolution device, and use other like button layout which suits it better.

That one is :

data-layout="box_count" ,

it would take slightly more vertical space though, which is fine.

button_count

enter image description here

box_count

enter image description here

answered Dec 20 '11 at 07:02

DhruvPathak

42,059
16
116
175

score 2 · Answer 5 · answered Dec 20 '11 at 06:32

Did u check other regular sites on the same low-res browser? check twitter.com, if the scrollbar still appears its a problem in the browser (i ran into something like that), the definition of the browser full screen is always larger than the available width, i eventually had to define a "div" within the body with a specific width (320px) and dump the content inside of it, in addition to making the body overflow: hidden

score 0 · Answer 6 · answered Nov 18 '21 at 02:36

0

On the outer container do this:

.fb-like-wrapper {
    width:300px!important;
    overflow-x:hidden!important;
    margin: 5px 0 5px 10px;
    display:block!important;
}

answered Nov 18 '21 at 02:36

realPro

1,713
3
22
34

score -2 · Answer 7 · edited Jun 16 '14 at 16:49

-2

This was the easiest thing for me, works on iOS Safari if you use both:

html, body {overflow-x: hidden;}

edited Jun 16 '14 at 16:49

Rahil Wazir

10,007
11
42
64

answered Jun 16 '14 at 16:12

Rich

1

Facebook Like button causing horizontal scrolling on mobile device

7 Answers7