Sau bài hướng dẫn chèn Facebook Like Box với hiệu ứng Popup vào website wordpress, mình nhận được một số câu hỏi vào email và trên facebook là làm thế nào để chèn một Facebook Like Box vào một website bất kỳ, cho dù nó là bất cứ mã nguồn gì, bất cứ website nào.
Thêm Facebook Fanpage Like Box vào website
Facebook cung cấp cho các bạn những công cụ tùy biến có sẵn giúp bạn có thể dễ đàng đưa các ứng dụng hỗ trợ của nó vào trang web của bạn. Sau đây thì mình sẽ hướng dẫn các bạn cách chèn Facebook Like Box vào trong website.
- Bước đầu tiên, bạn truy cập vào Developers Like Box
- Nhập URL Fanpage của bạn vào và thiết lập các thông số đầy đủ
Facebook Fanpage URL: Link trang Fanpage của bạn
Width: Độ rộng của khung Like Box
Height: Chiều cao của khung Like Box, có thể không điền để tự co dãn
Color Scheme: Màu của Likebox, thông thường thì đa số các website đều để dạng Light, hiếm khi để dạngDark
Show Friends’ Faces: Hiển thị avatar của những người like
Show Header: Nếu bạn tích vào sẽ có thêm dòng chữ Tìm chúng tôi trên Facebook
Show Posts: Hiển thị bài mới nhất của Fanpage ra
Show Border: Hiển thị đường viền của khung
Sau khi bạn điền đầy đủ thông tin mà bạn muốn, bạn nhấp chuột vào ” Get Code” để lấy thông tin mã để chèn vào website. Có 2 cách đề bạn lấy code và chèn vào chỗ cần hiển thị khung Like Box đó chính là sử dụng code iframe và HTML5, bạn có thể chọn một trong 2 cách.
Cách 1: Chuyển sang tab iframe như hình dưới là bạn sẽ chỉ cần chèn 1 đoạn code thôi chứ không phải chèn kiểu kia nữa, ngắn gọn được một bước nhưng theo mình cứ chơi theo cách 1, cách mà Facebook nó muốn mình hiển thị nhất.
Mình có làm một video hướng dẫn chèn vào wordpress
Cách 2: Chèn Facebook Like Box sử dụng HTML5
Đầu tiên thì bạn sẽ nhận được một đoạn code chèn sau thẻ <body> của trang web:
<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/vi_VN/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Sau đó, bạn chèn dòng code thứ 2 vào chỗ bạn muốn hiển thị khung Like Box này. Ví dụ đoạn code của mình
<div class="fb-like-box" data-href="https://www.facebook.com/giatangthunhaponline" data-width="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="false"></div>
Chèn Facebook Like Box vào WordPress
Đối với mã nguồn wordpress thì bạn có nhiều plugin hỗ trợ nhưng nếu bạn muốn làm thủ công theo cách này cũng được, thường thì bạn sẽ phải vào phần Widgets và dán đoạn code thứ 2 bạn nhận được vào đó nhưng nên nhớ rằng phải gán đoạn code thứ nhất vào sau thẻ <body> rồi nhé
Chèn Facebook Like Box vào Blogger
Đăng nhập Dashboard Blogger => Bố Cục => Thêm Tiện Ích => Chọn box HTML/Javascript
Rồi Paste đoạn code như mình nói ở trên cung cấp vào. Lưu ý: Bạn nhớ phải chèn đoạn code thứ nhất sau thẻ<body> đó nhé
Mình đã giúp bạn từng bươc từng bước một để chèn một khung Like Box của Facebook vào website rồi, nếu bạn không sử dụng Blogger/ Blogspot hay WordPress thì bạn cũng sẽ làm tương tự vào một website khác thôi, đơn giản phải không nào.
Bài viết liên quan
DEVOPS LÀ GÌ?
DEVOPS LÀ GÌ? Devops là gì Theo Wikipedia Devops là thuật ngữ chỉ tập hợp các hoạt [...]
Sep
Database là gì?
Database là gì? Database được gọi là Cơ sở dữ liệu, là một bộ sưu tập dữ liệu có [...]
Sep
Tạo Responsive và Mobile-Friendly Tooltip bằng jQuery
Việc tìm kiếm một chức năng Tooltip phù hợp với website hay blog thì không [...]
May
Code tự động lưu ảnh vào host khi copy bài từ nguồn khác
Như tiêu tiêu đề thôi hôm nay mình sẽ share đoạn code tự động lưu [...]
Apr
Tài liệu lập trình về Yii framework
Tài liệu lập trình về Yii framework Yii không phải là cái gì đó mới [...]
Dec
Sypex Dumper: Upload và backup dữ liệu lớn – hướng dẫn sử dụng Sypex Dumper
Xin chào các bạn, lần trước tôi có đăng bài viết làm thế nào để [...]
Sep