Geek asks and answers

Facebook as a button: data width attribute is ignored on mobile devices

I used the following html code to display the FB "Like" button on our website:

<div class="fb-like" data-href="https://www.facebook.com/MyCompany?ref=hl" data-send="false" data-width="400" data-show-faces="false"></div>

On desktop computers, everything looks great. But I found out that on mobile devices the width-width attribute is ignored, and here is how the div with the fb-like class is loaded after the page loads:

<div class="fb-like fb_iframe_widget fb_iframe_widget_fluid" data-href="https://www.facebook.com/MyCompany?ref=hl" data-send="false" data-width="400" data-show-faces="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;href=https%3A%2F%2Fwww.facebook.com%2FMyCompany%3Fref%3Dhl&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=400" style="display: block; width: 100%; height: auto;>

You can see that the style attribute with “Width: 100%” is added to the div. While on desktops, the inline style is not added to this div.

The following error appears in the console:

Viewport argument value "device-width;" for key "width" is invalid, and has been ignored. Note that ';' is not a separator in viewport values. The list should be comma-separated.

with a link to the like.php file, which belongs to Facebook.

I do not know if this error message is due to data width issue on mobile devices. Perhaps someone has already encountered this problem. I would appreciate any help or explanation.

+3
2

. div "fb-like" :

<div class="fb-wrapper">
    <div class="fb-like" data-href="https://www.facebook.com/MyPage?ref=hl" data-send="false" data-width="400" data-show-faces="false"></div>
</div>

CSS

.fb-wrapper{float: right; width: 400px; height: 30px; overflow:hidden;}

, . .

+2

, , "" . FB div div , .

0

More articles:


All Articles