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
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 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...
No comments