facebook like button: responsive width

Question

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

Patiencepatient

Can you try detecting the width of the viewport and changing the attributes for data-width using jQuery. Is that an option? – Cimex

Answer 1

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

Bothnia

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? – Patiencepatient

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: <div id="container" style="width:100%"> <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> </div> – Bothnia

This doesn't seem to work for me. I have added a test page here: [link]atlasdev.passportpp.com/fbtest.html Can you take a look and see what I may be doing wrong? – Patiencepatient

Hi Chris, try the CSS approach I posted above. – Bothnia

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

data-width value must be an integer value not float and need to use parseInt(container_width_new) – Sartor

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

Pipe

Thanks, @asachanfbd didn't see your comment until Fex answered above. Thanks for the additional suggestion though! – Patiencepatient

@Patiencepatient you should mark one answer as correct for others users to rely on. – Pipe