Cài đặt các tiện ích Facebook trong vòng một nốt nhạc

Các tiện ích Facebook được dùng phổ biến trên blogger/blogspot như Fanpage Like Box, các nút Like, Share, Follow, Khung bình luận Facebook,... nhưng bạn không biết làm thế nào để thêm (cài đặt) các tiện ích này vào blog của bạn? Không sao, sau khi xem bài viết này bạn sẽ có thể áp dụng nó vào blog của bạn trong khoảng thời gian ngắn nhất.

Có thể với một số bạn đây chỉ là kiến thức cũ, bạn đã biết, đã từng đọc qua. Nhưng ở thể giới Blogger luôn luôn phát triển này thì mình tin chắc nhiều người cũng chưa biết. Nên ở bài viết này mình sẽ tổng hợp cách cài đặt các tiện ích Facebook này với hướng dẫn chi tiết nhất, cho dù bạn là newbie vẫn có thể cài đặt một cách dễ dàng.

1. TẠO MỘT APP FACEBOOK CHO BLOGGER

Bạn hỏi tại sao lại phải tạo app này? Rất đơn giản, đó là vì khi muốn sử dụng và quản trị các tiện ích Facebook bạn cần phải có một ID nhưng muốn có ID thì bạn phải tạo một APP cho blog.
Bước 1: Vào link https://developers.facebook.com/apps/ để tạo APP mới.
Bước 2: Click vào Thêm ứng dụng mới

Bước 3: Chọn Trang web

Bước 4: Tạo 1 cái tên cho APP và Click Tạo ID ứng dụng mới trên Facebook.

Bước 5: Một Tab mới hiện lên, bạn điền email xong chọn 1 danh mục và ấn Tạo ID ứng dụng (Nếu hiện bảo mật thì các bạn chọn hình ảnh và gửi).

Bước 6: Ở trang mới các bạn kéo xuống dưới cùng và điền địa chỉ blog vào và ấn NEXT.

Bước 7: Quay lại đường link ở bước 1 để lấy ID APP.
Hoàn thành các bước trên là các bạn đã có một ID để sử dụng cho các tiện ích Facebook trên blog của bạn rồi.

Xem thêm: Tùy chỉnh tiện ích bài viết xem nhiều mà không phải ai cũng biết

2. THÊM THƯ VIỆN JAVASCRIPT (JS) FACEBOOK CHO BLOGGER

Hầu hết các tiện ích Facebook đều phải sử dụng đến thư viện javascript này để có thể áp dụng chúng một cách dễ dàng.
Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn Js sau trên </head>

<div id='fb-root'></div>
<script type='text/javascript'>
/*<![CDATA[*/
//Facebook 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&appId=1746489938932701&version=v2.3";fjs.parentNode.insertBefore(js,fjs)}(document,'script','facebook-jssdk'));
//Google Plus Script
(function(){var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='https://apis.google.com/js/plusone.js';var x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x)})();
/*]]>*/
</script>

Bước 4: Thay 1746489938932701 bằng đoạn ID ở Phần 1.
Bước 5: Lưu Mẫu để hoàn tất thêm thư viện js cho blog của bạn.

3. THÊM TIỆN ÍCH FANPAGE LIKE BOX CHO BLOGGER

Sau khi bạn đã có ID và thêm thư viện js Facebook cho blog của bạn thì thêm các tiện ích facebook sẽ rất dễ dàng. Chèn đoạn code sau vào nơi bạn muốn hiển thị

<div class="fb-page" data-href="https://www.facebook.com/dangbuipage/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
    <div class="fb-xfbml-parse-ignore"></div>
</div>

TÙY CHỈNH
data-href	Link Fanpage FB của bạn
data-tabs	+ timeline / hiển thị các bài đăng trên fanpage + messages / hiển thị chatbox trên fanpage + events / hiển thị sự kiện trên fanpage
data-small-header	+ true / hiển thị tiêu đề nhỏ + false / không hiển thị tiêu đề nhỏ
data-adapt-container-width	+ true / Tự động chọn kích thước ngang phù hợp +false / không tự động chọn kích thước ngang phù hợp
data-hide-cover	+ true / hiển thị cover trên fanpage +false / không hiển thị cover trên fanpage
data-show-facepile	+ true / hiển thị hình ảnh bạn bè like fanpage +false / không hiển thị hình ảnh bạn bè like fanpage

Sẽ update thêm...