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">

Engels

Answer 1

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; }

Engels

Answer 2

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>

Malvoisie

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. – Engels

Answer 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".

Ronen

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. – Engels

Answer 4

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

• box_count

Misconstrue

Answer 5

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

Martie

Answer 6

On the outer container do this:

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

Knighthood

Answer 7

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

html, body {overflow-x: hidden;}

Courbet