facebook like button: responsive width

ChrisJM picture ChrisJM · Dec 7, 2013 · Viewed 12.4k times · Source

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

Answer

Fex del Sollo picture Fex del Sollo · Dec 9, 2013

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