Demo hộp like bài viết ở góc màn hình |
Cách làm:
Bước 1: Bạn vào trang https://developers.facebook.com/apps và tạo một ứng dụng mới như hình sau:
Nhấn tiếp tục => gõ Capcha => Tiếp tục
Bước 2: Đăng nhập blogger => Mẫu => Chỉnh sửa HTML => Tìm
<html
thay nó thành
<html xmlns:fb='http://ogp.me/ns/fb#'
- Đoạn code trên sẽ giúp cho các phiên bản cũ của blogger cũng tương thích với plusin này và giúp plusin chạy tốt trên cả Internet explorer.Đồng thời nâng cao hiệu xuất của plusin.Dán đoạn code bên dưới vào sau thẻ <body>.
<div id='fb-root'/>
<script>
//<![CDATA[
(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/en_US/all.js#xfbml=1&appId=ID-APP";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'>
<div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.share123.vn/' trigger='40%'/></div>
</b:if></b:if>
Lưu ý: Nếu bạn sử dụng mẫu simple của blogger thì thẻ bodu có dạng <body... như hình ảnhThêm Facebook Recommendations Bar cho blogger
TÙy chỉnh:
- Thay ID-APP thành Id mà bạn thu được ở trên.
- Thay http://www.share123.vn/ thành URL blog của bạn.
Lưu mẫu lại và truy cập vào một bài viết bất kỳ, chờ khoảng 10 giây để tiện ích hiện
Cập nhật:
- Hầu hết các mẫu đều không có cấu trúc của plusin. Do vậy yêu cầu đặt ra là phải cài đặt các thẻ meta để nói với Facebook nhằm lấy tiêu đề trang, hình thu nhỏ và tiêu đề blog chính xác. Để làm điều này hãy: Đăng nhập (login) vào Blog => Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Dán đoạn mã sau ngay dưới thẻ <head> bên trong mẫu của bạn
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
- Lưu mẫu của bạn và bây giờ nhìn thấy các plugin nếu nó một cách chính xác cho thấy cả hai tiêu đề của trang trên blog của bạn và Facebook.
Không có nhận xét nào: