Facebook Like a button that scrolls horizontally on a mobile device

Question

I have a Facebook Like button function that perfectly displays all browsers on the desktop and on mobile devices. But the problems lie with low-resolution devices with a resolution of 240x320. The “Like” button forces the device to zoom in on the page, thereby ensuring horizontal scrolling.

The buttons perfectly display devices with a width> 320 pixels, such as iPhone, etc., but older Android devices with a width less than theirs.

The way I see it. The page loads fine, and then calls a Facebook call, and then returns with some parameter that breaks everything. It generates an <iframe> . I am trying to set width and overflow CSS options, but none of them work. I initialize the “Like” button as follows:

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

Answer 1

None of the above solutions helped. Finally got an answer. Although this is not the best solution, but it does its job.

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

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

Answer 2

Put your button in a div and apply a hidden overflow style on that div.
UDATE: Try also to set the overflow hidden in the html and body tag (of great importance on the tabs of the fb page).

A snippet of code that you might also find useful is:

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

Answer 3

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

Answer 4

Finding a low-resolution device and using another, such as a button layout, that works best for it.

It:

 data-layout="box_count" , 

it will take a little more vertical space, although this is normal.

• button_count

• box_count

Answer 5

I think the only way to solve this is to use custom css for your fblike button

check these links:

Custom skin for facebook button, like http://forum.developers.facebook.net/viewtopic.php?pid=236534 button

Answer 6

Have you checked other regular sites in one low resolution browser? check twitter.com, if the scrollbar still appears in the browser (I encountered something similar), the definition of a full-screen browser is always larger than the available width, I eventually had to define a “div” inside the body with a certain width (320 pixels ) and dump the contents inside it, in addition to the fact that the body overflows: hidden

Answer 7

It was the easiest for me, it works on iOS Safari if you use both:

 html, body {overflow-x: hidden;}