Công nghệ

Cách chèn Facebook Fanpage vào trong sidebar của website

Xin chào các bạn, sau vài ngày bận rộn với nhiều kế hoạch mới, hôm nay Jam lại quay trở lại nhà …

Xin chào các bạn, sau vài ngày bận rộn với nhiều kế hoạch mới, hôm nay Jam lại quay trở lại nhà và bật máy tính, chia sẻ với các bạn cách hiển thị fanpage của Facebook trên sidebar của website. Nó sẽ như thế này:

fanpage1

OKey, bây giờ cách làm cực kì đơn giản như sau:

Bước 1: Các bạn thêm đoạn mã sau vào dưới thẻ <Body> của website:

<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>

Bước 2: Nhúng Fanpage của các bạn vào

Các bạn vào Admin > Giao diện > Widget và kéo phần Text vào trong sidebar rồi thêm đoạn code như hình:

fanpage2

Đoạn code đó như sau:

<div class="fb-like-box" 
data-href="ĐỊA CHỈ ĐƯỜNG DẪN ĐẦY ĐỦ CỦA FANPAGE" 
data-colorscheme="light" data-show-faces="true" 
data-header="true" data-stream="false" data-show-border="true">
</div>

* Các bạn lưu ý là nếu không dùng WordPress, hãy lấy mã trên rồi dán vào đâu bạn thấy thích đều được 😀

Trong đó có các thông số như sau:

+ data-href: Đây là nơi bạn cho địa chỉ đầy đủ của đường dẫn tới Fanpage của bạn nhé

+ data-colorscheme : Hiển thị dạng box màu trắng hoặc màu đen để các bạn phối màu cùng website, sẽ là “light” hoặc “dark”

+ data-show-faces: điền vào True nếu bạn muốn hiển thị danh sách người thích trong box, False nếu muốn ẩn

+ data-header: Nếu true, Box sẽ hiển thị tựa đề là “tìm chúng tôi trên Facebook” còn nếu False, header sẽ bị ẩn

+ data-stream: Nếu bạn muốn hiển thị danh sách bài đăng trên Fanpage

+ data-show-border: True nếu bạn muốn nó bo lại, nếu không bạn điền False

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

Thông tin liên quan