How to Make the Facebook Like Button's Width Automatically Resize

facebook like button: responsive width

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

facebook like button: change width and height

try this

#fb-bar iframe{min-height:80px !important;}

<div id="fb-bar">
  <fb:like href="link"></fb:like>
</div>

Or

<div id="fb-bar">
<iframe 
        src="http://www.facebook.com/widgets/like.php?href=<? the_permalink(); ?>&layout=button_count&width=450&action=like&colorscheme=light&font&show_faces=false&height=64"
                            scrolling="no" frameborder="0" 
                            style="border:none;">
</iframe>
</div>

facebook like button: change width and height

try this

#fb-bar iframe{min-height:80px !important;}

<div id="fb-bar">
  <fb:like href="link"></fb:like>
</div>

Or

<div id="fb-bar">
<iframe 
        src="http://www.facebook.com/widgets/like.php?href=<? the_permalink(); ?>&layout=button_count&width=450&action=like&colorscheme=light&font&show_faces=false&height=64"
                            scrolling="no" frameborder="0" 
                            style="border:none;">
</iframe>
</div>

Automatically resize input according to button size?

You can use several tools to achieve that :

• CSS property float (example below)
  
  • will run even on old browser
  • doesn't fit for complex use (in your case, that fine)
• CSS Grid Layout
• CSS Flex element

Float Example

.chatinp {
  height: 30px;
  width: 100%;
}

#CHAT, #SEND{
  box-sizing: border-box; /* permit the use of border and padding without overstepping the width */
  height: 100%; /* use all of the avaible height given by the parent */
  padding: none;
  margin: none;
  position: relative; /* needed for float */
  float: left; /* make element align from left to right, then top to bottom */
}

#CHAT {
  width: 85%;
  border: 3px solid grey;
}

#SEND {
  width: 15%;
  border: 3px solid green;
}

<div class="chatinp">
  <input type="text" name="CHAT" id="CHAT">
  <button name="SEND" id="SEND">SEND</button>
</div>

Dynamically resize Facebook Like Box - responsive change of data-width={n}

Try adding this to your css code:

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width:  100% !important;display:block;z-index:2000;position:relative}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe  span[style] {width: 100% !important;display:block;z-index:2000;position:relative}

Hope it helps..

---

Related Topics