Tạo responsive cho facebook comment plugin

Hiện nay facebook comment plugin đang được tích hợp vào website khá phổ biến vì nó dễ sử dụng và quản lý, giúp website được chia sẻ nhanh trên mạng xã hội. Tuy nhiên với xu thế thiết kế web responsive hỗ trợ cho nhiều thiết bị như hiện nay, việc tích hợp plugin này vẫn còn vướng mắc một vấn đề là plugin này của facebook chỉ hỗ trợ kích thước có định mà chưa tự động co dãn theo giao diện web của bạn.

1. Tích hợp facebook comment plugin.

- Để tích hợp comment của facebook các bạn vào đây, nhập các thông tin yêu cầu, facebook sẽ cho ta 1 đoạn mã code để nhúng vào website của các bạn.

- Đoạn mã này bỏ ngay sau thẻ <body> của website các bạn:

<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&appId=1455957471290562";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

- Đoạn mã này bỏ vào phần comment các bạn cần hiển thị.

<div class="fb-comments" data-href="http://thuyvk.com" data-width="500" data-numposts="5" data-colorscheme="light"></div>

- Các bạn chú ý đoạn mã trên sẽ thấy data-width là cố định, nó sẽ không vấn đề gì khi website các bạn thiết kế theo kiểu cũ với kích thước không thay đổi, tuy nhiên khi website các bạn được thiết kế co dãn thì phần comment này nó sẽ bị tràn và gây mất thẩm mỹ

2. Responsive cho facebook comment

- Để giải quyết vẫn đề này chúng ta cần thêm một đoạn css nhỏ như sau.

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style], .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] 
{
       width: 100% !important;
}

- Mình đã thử áp dụng vào một số website mình đang làm và nó hoạt động rất tốt, chúc các bạn thành công!

Related Post


Sử dụng jQuery plugin Sidr tạo Menu Slide Left một cách dễ dàng
Wednesday, March 19, 2014
Hiện nay xu thế phát triển web responsive rất phát triển, có nhiều framework hỗ trợ người lâp trình viên phát triển ứng dụng web một cách nhanh chóng. Với cá nhân mình, mình lựa chọn sử dụng boostrap để xây dựng các ứng dụng web responsive vì nó đáp ứng khá đầy đủ nhu cầu thực tế và dễ sử dụng. Tuy nhiên trong một số dự án, mình nhận thấy navbar của bootstrap cung cấp hiện thị trên mobile chưa ưng ý với khi làm những menu có cấu trúc phức tạp. jQuery plugin Sidr là một giải pháp hay để giải quyết vấn đề này, nó hoạt động tốt cùng với boostrap và tạo ra được một menu slide khá đẹp mắt và đặc biệt rất phù hợp với web dành cho mobile...
Tạo Style Cho Các Dropdown Sử Dụng DropKick
Tuesday, March 18, 2014
Khi nói đến việc tạo style cho các trang web, không có gì khó như làm style cho các form. Và khi nói đến style của các form – gần như không có gì phức tạp như tạo style cho input <select>.Chúng ta có thể tạo một style cho <select> với CSS, nhưng có thể có những hạn chế lớn để chúng ta đạt được mục đích với việc chỉ sử dụng CSS
Search

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


Category

Blog Archive