Hướng dẫn thêm Facebook Like Box vào website

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.

  1. Bước đầu tiên, bạn truy cập vào Developers Like Box
  2. Nhập URL Fanpage của bạn vào và thiết lập các thông số đầy đủ

facebook likebox

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.

facebook-likebox-iframe

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é

Facebook likebox in widget sidebar wordpress

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

them-tien-ich-vao-blogger

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.

Nguyễn Tấn Tài

Nguyễn Tấn Tài Founder/ CEO Giaotrinhhay.com - Giáo Trình Hay Chia Sẻ: Tài liệu SEO website, DIGITAL MARKETING, Ebook CNTT, Mẹo vặt, Phần mềm, Thủ thuật PC và kho tài liệu học tập hữu ích miễn phí.

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 [...]

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ó [...]

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 [...]

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 [...]

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 [...]

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 để [...]

Trả lời