Home » Tin Học

Tạo hộp like bài viết ở góc màn hình với facebook

Một tiện ích khá hay là hộp like bài viết góc màn hình cho blogspot, tiện ích này không những giống như kiểu bài viết liên quan, mà còn nổi bật những bài viết được nhiều người like lên, giúp cho độc giả có thể dễ dàng đọc những bài viết chất lượng trên blog của bạn từ đó giúp bạn giữ được độc giả ở trang của bạn lâu hơn và giúp bạn tằng pageview cho chính blog của bạn.

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<htmlthay 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 == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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://blogh3b.blogspot.com/' 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 ảnh

Thê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://blogh3b.blogspot.com/ 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 != &quot;&quot;'>
 <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.