Responsive like box facebook

Gần đây tôi có làm một website với giao diện responsive và trên trang có nhúng like box facebook, vấn đề ở đây tôi gặp phải là đoạn mã like box mà facebook cung cấp chỉ cho phép chèn chiều rộng (width) và chiều cao (height) là những con số cụ thể, chính vì vậy khi kích thước màn hình co dãn, giao diện responsive theo thì like box đó bị vượt khỏi khung trông rất thiếu thẩm mỹ.

Khi tiến hành tích hợp like box vào website, chúng ta được cung cấp một đoạn mã như sau:

<div class="fb-like-box" data-href="https://www.facebook.com/thuyvk.blog" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Với các tham số data-width quy định là một số cụ thể với đơn vị pixcel, và để box này responsive theo thẻ chứa nó, tham số truyền vào này phải "động". Để giải quyết vấn đề này ta có thế sử dụng một đoạn mã javascript nhỏ như sau:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(window).bind("load resize", function(){    
  var container_width = $('#container').width();    
    $('#container').html('<div class="fb-like-box" ' + 
    'data-href="https://www.facebook.com/thuyvk.blog"' +
    ' data-width="' + container_width + '" data-height="730" data-show-faces="false" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Đoạn mã này cần include thêm thư viện jQuery, nó hoạt động theo cách lấy with của thẻ chứa like box (ở đây là một thẻ div với id=container), và gán giá trị này cho data-width của like box. Vì vậy khi giao diện responsive (div#container thay đổi kích thước) thì like box facebook cũng sẽ thay đổi theo.

Chúc các bạn thành công!

Related Post


Sử dụng jQuery Picture plugin tối ưu hóa hình ảnh cho web mobile.
Sunday, September 22, 2013
Như bài trước tôi có giới thiệu về jQuery Mobile - một bộ mã nguồn mở hỗ trợ xây dựng giao diện cho responsive rất chuyên nghiệp dành cho các thiết bị smartphone và máy tính bảng. Và việc tiếp theo các bạn sẽ phải quan tâm khi xây dựng được một web mobile ưng ý đó là tối ưu nó. Với các thiết bị di động thường hạn chế về tốc độ và dung lượng truy cập internet so với máy tính, vì vậy tối ưu dung lượng web sẽ là việc bạn sẽ cần làm tiếp theo. Ở bài này chúng ta sẽ sử dụng môt plugin rất nhỏ gọn là jQuery Picture, nó hỗ trợ chúng ta trong việc lựa chọn sử dụng hình ảnh theo tỷ lệ màn hình thiết bị một cách hợp lý nhất.
Sử dụng jQueryMobile để phát triển web cho thiết bị di động
Tuesday, September 17, 2013
jQuery Mobile là một bộ khung giao diện người dùng cảm ứng thân thiện, được xây dựng dựa trên jQuery Code và làm việc trên hấu hết trên các thiết bị điện thoại phổ biến, máy tính bảng và nền tảng máy tính để bàn.  
Search

Đăng ký nhận bài mới


Category

Blog Archive