Tình hình là hôm nay mình nổi hứng tìm hiểu về like box của Facebook và kiếm được một đoạn code khá hay về việc tùy biến cách hiển thị Like box của Facebook trên website và blog.
Cách làm này là dùng một tập tin css để tùy chỉnh cách hiển thị Like box. Thông tin cụ thể như sau:
Lấy code hiển thị Like box
Code hiển thị Like box này mình lấy từ trang chủ Vindictus phiên bản Bắc Mỹ. Các bạn nhớ thay ID bằng ID của fanpage của các bạn và tùy chỉnh chiều rộng (width) và chiều cao (height) cho hợp lý nhé.
<iframe scrolling="no" frameborder="0" style="width: 239px; height: 272px; border: 1px;" name="fbfanIFrame_0" allowtransparency="true" src="http://www.connect.facebook.com/widgets/fan.php?id=126657887391399&name=&width=239&connections=8&stream=&logobar=&css=http%3A%2F%2Fnxcache.nexon.net%2Fvindictus%2Fcss%2Ffb.css?1" class="FB_SERVER_IFRAME"></iframe>
Đoạn code này sẽ ẩn stream và logobar. Nếu bạn muốn kích hoạt hai chức năng này thì thêm thuộc tính true vào sau dấu “=” của hai biến này nhé. Muốn tăng hay giảm số người đã like fanpage thì chỉnh số lượng phía sau biến connections.
Tùy chỉnh cách hiển thị Like box với css
Dưới đây là toàn bộ tập tin css về thay đổi cách hiển thị Like box của Vindictus. Nếu dùng bộ css này thì Like box sẽ không hiển thị tên của fanpage, không hiển thị background của like box mà hiển thị background của khu vực đang chứa like box trên website.
.fan_box .full_widget .connect_top {background:none;}
.fan_box .full_widget {background:none;border:none;}
.fan_box .connections {border:none;}
.fan_box .profileimage {margin:0 10px 4px 0;padding:0;}
img.img {border:1px solid #996633}
.connect_widget_connected_text, .connections {color:#fff;}
a, .fan_box .connections_grid .grid_item .name { color:#996633; }
.fan_box .connect_action {padding-top:4px;}
.fan_box .connect_action .name_block {display:none;}Các bạn có thể copy và tùy chỉnh cho phù hợp với yêu cầu của từng cá nhân. Sau khi có tập tin css, các bạn có thể upload lên host và chèn đường dẫn trực tiếp tới tập tin css đó sau chữ css trong đoạn code Like box phía trên.
Lưu ý: Phía sau đường link dẫn đến tập tin css phải có ký tự “?1” nhé.
Hàn Thiên Hải