8

For the facebook like button, I need to be able to keep a default width on desktop resolution (539px) and change the width to 100% when the screen resolution drops below 640px (mobile). This is not working as the fb-like div relies on an attribute called: "data-width", which sets a remote dynamically loaded iframe width and child element widths within the src html. So far I have tried:

<style>
@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important}
}
@media only screen and (min-width: 960px) {
    div.fb-like {width:539px !important}
}
</style>

<div class="fb-like" data-href="https://www.facebook.com/myFacebook" data-send="true" data-show-faces="true" data-font="lucida grande" data-colorscheme="dark"></div>

How can I alter the "data-width" value when I have a lower screen resolution or mobile device?

As a temporary measure, I have done the following to prevent the like button from breaking the layout on mobile devices:

@media only screen and (max-width: 640px) {
    div.fb-like {width:100% !important; overflow-x:auto}
}

This is not ideal as a user would have to swipe left to view any overflow, but it is the only solution I can think of until someone else has a working suggestion. Screenshots of this are attached (iOS 7 iPhone & Android 4.3.1)...
facebook like button as shown rendering on an Android 4.3.1 device facebook like button as shown rendering on an iOS7 iPhone device

RavatSinh Sisodiya
  • 1,596
  • 1
  • 20
  • 42
ChrisJM
  • 115
  • 1
  • 1
  • 7
  • Can you try detecting the width of the viewport and changing the attributes for data-width using jQuery. Is that an option? – Thilak Rao Dec 09 '13 at 06:14

2 Answers2

3

Try putting the .fb-like class into a div wrapper with style="width:100%;. Now you could add something like a $(window).bind("load resize", function(){} to get the actual width of the browser and resize the like button.

Edit:

<script>
    var container_width_current = $('#WRAPPER-DIV').width();

    $(window).bind("load resize", function(){    
         var container_width_new = $('#WRAPPER-DIV').width();

         if (container_width_new != container_width_current) {
             container_width_current = container_width_new;

             $('#container').html('<div class="fb-like-box" ' +
             'data-href="https://www.facebook.com/adobegocreate" ' +
             'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
             'data-stream="true" data-header="true"></div>');
             FB.XFBML.parse();
         }
    }); 
</script>

Edit #2:

This is a quick CSS approach:

#u_0_0 {
    width: 100% !important;
}
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span > iframe {
    width: 100% !important;
    height: auto !important;
}
Fex del Sollo
  • 387
  • 3
  • 12
  • Fex, looks like this is possibly a good solution. However, I am not quite clear on something - 'What is $('#container').html' in the script you provided? – ChrisJM Dec 09 '13 at 17:32
  • 1
    Hi Chris, "container" is the DIV ID of the wrapper/container called "#WRAPPER-DIV". I had "#container" as name for the wrapper at the first point. Your html-code could look like this: `
    `     – Fex del Sollo Dec 09 '13 at 19:48
  • This doesn't seem to work for me. I have added a test page here: [link]http://atlasdev.passportpp.com/fbtest.html Can you take a look and see what I may be doing wrong? – ChrisJM Dec 09 '13 at 20:16
  • 1
    Hi Chris, try the CSS approach I posted above. – Fex del Sollo Dec 12 '13 at 08:35
  • The css approach won't work well if, for instance, your widget doesn't have comments enabled, as the selector won't exist. I would recommend removing the `.fb_edge_widget_with_comment` to be less restrictive. Also, I don't like this solution at all as this simply cut the text line wherever it doesn't have enough space... – Pere Aug 02 '16 at 09:39
  • `data-width` value must be an integer value not float and need to use `parseInt(container_width_new)` – Aftab Ahmed Nov 05 '19 at 10:29
2

Try using Iframe code of facebook like button instead of HTML5.

Have a look at this: 

<iframe src="//www.facebook.com/plugins/like.php?href=
https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;
width=225&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;
share=true&amp;height=35&amp;appId=161427297222786" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; width:100%; height:50px;" 
allowTransparency="true"></iframe>

I have changed the inline CSS width to 100% and height to 50px. And width in URL is 225 which is minimum for facebook like.

Abhishek Sachan
  • 1,976
  • 2
  • 18
  • 33