ปรับขนาดความกว้างของ facebook like box ให้เป็น responsive

หลายท่านคงเคยทำเว็บแล้วใส่ไอ้เจ้า facebok like box ลงไป หน้าตามันก็ประมาณนี้ครับ

หน้าตาของ ไอ้เจ้าFacebook like Box

ซึ่งเป็นตัวที่ทำให้ผู้เข้าเว็บสามารถเห็น ช่องทางการเชื่อมต่อ Social media ของเว็บเราได้ครับ โค๊ดที่ทาง Facebook ใส่ให้มาก็ประมาณนี้ครับ

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>

ซึ่งสามารถกำหนดขนาดความกว้างของกรอบ like box ได้ตรงนี้ data-width="400" จะใส่เท่าไร ก็ว่ากันไปครับ แต่พอเราจะมาทำความกว้างให้เป็น % หรือทำให้มันเข้ากับเว็บที่รองรับ Mobile Responsive ไอ้จะใส่ไปตรงๆ แบบ data-width="100%" ผมลองแล้วครับไม่ได้ผล ไอ้ที่ได้ผลคือต้องใส่แบบนี้ครับ

<style>
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { max-width: 100% !important; }
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/jumnum2go" data-width="400" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" ></div>

ใส่ไอ้ที่ผม hightlight สีแดงไว้ก่อนโค๊ด Facebook like box เข้าไป แค่นี้มันก็ยืดหดได้ตามใจแล้วครับ
ซึ่งหากใครสนใจเอาโค๊ด like box แบบนี้มาใส่ในเว็บนั้น ให้เข้าไปที่นี่ได้เลยครับ Facebook Page Plugin