Thêm Facebook Recommendations Bar cho blogger

Facebook đã giới thiệu social Plugin mới được gọi là thanh đề xuất bài viết (Facebook Recommendations Bar). Nó là một bản Plugins mở rộng. Trong hướng dẫn này, namkna sẽ giúp các bạn tìm hiểu làm thế nào để cài đặt Facebook Recommendations Bar trong Blogs Blogger. Widget này rất hữu ích vì nó có thể tăng lượng truy cập từ Facebook và thích ngay lập tức các bài viết liên quan trên thanh đề xuất.

Nó có thể tăng lưu lượng truy cập của bạn?

Chắc chắn có mà không có gì phải nghi ngờ! Namkna thường chia sẻ các thủ thuật mà chưa test thủ, trừ khi nó cung cấp một số giá trị cho traffic hoặc pagerank. Như bạn có thể thấy, Namkna đã thêm thanh đề xuất trên tất cả các bài viết của namkna và điều này chắc chắn sẽ đặt một hiệu ứng tích cực trên trang truy cập bởi vì bây giờ du khách có thể xem những gì bạn bè của họ trước đây thích trên blog của bạn và do một sự tò mò của con người, họ chắc chắn sẽ kiểm tra thêm các bài viết dọc theo con đường xuất hiện dưới Label "Bạn cũng có thể muốn". Nút Google Plus cho thấy bạn bè khuyến nghị trong kết quả tìm kiếm và Bar Facebook sẽ hiển thị như trên blog của bạn. Vì vậy, dùng plugin như vậy luôn luôn là lợi ích.

Làm thế nào để cài đặt bài viết đề xuất từ Facebook cho blogger?

Nó có thể được cài đặt dễ dàng trên cả BlogSpot và Wordpress nhưng với một chút kiên nhẫn namkna tìm ra cách cài đặt dễ dàng và bỏ qua các bước không cần thiết như cài đặt mở Meta Tags Graph để giữ cấu trúc blog. Mã chúng Namkna chia sẻ được tối ưu hóa và sẽ hiển thị tiêu đề blog của bạn và hình ảnh thu nhỏ một cách chính xác và với rất nhiều các thuộc tính kiểm soát trong tầm tay bạn.

Mình chia làm 2 phần cài đặt như sau:
1. Tạo một Facebook Recommendations Bar
2. Chèn mã Facebook Recommendations Bar vào blogger.
Sau đây chings ta bắt đầu tiến hành:

1. Tạo một Facebook Recommendations Bar

1.1- Truy cập vào trang sau: https://developers.facebook.com/apps/
1.2 Bấm vào nút Create a new App ở góc trên cùng bên tay phải

1.3- Điền Tên blog của bạn vào ô App Name, Sau đó bấm vào button Tiếp tục (Continue).

- Nếu tài khoản của bạn chưa được xác minh thì bạn phải xác minh. bạn có thể xác minh bằngmobile phone hoặc credit card (Tiện nhất hãy xác minh bằng số điện thoại của bạn mobile phone).

- Tại cửa sổ Popup bạn chọn quốc gia là Việt Nam và điền số điện thoại vào (lưu ý số điện thoại không có số 0 ở đầu nha):

- Sau đó bạn sẽ được gửi một tin nhắn về mã xác nhận tới điện thoại bạn vừa nhập. hãy nhập vào ô mã và bấm xác nhận. Khi dó trình duyệt báo như sau là được.

1.4- Sau khi xác minh xong bạn hãy tải lại trang (bấm F5) để thực hiện lại tiến trình như bước 1. Sau khi nhập tên và bấm Tiếp tục (Continue) bạn sẽ được chuyển đến trang như sau:

Nhập mã Captra và bấm tiếp tục.

1.5- Bấm chọn vào tên bạn vừa chịn ở cột bên tay trái và chọn Edit.

1.6- Điền URL blog của bạn vào mục Website with Facebook Login còn các phần khác giữ nguyên, sau đó bấm Lưu tahy đổi (Save change)

- Hãy nhớ đoạn mã ID mình tô màu xanh để tiến hành bước sau nha.

2. Chèn Facebook Recommendations Bar vào blogger.

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed):

4- Chọn Mở rộng tiện ích mẫu (Expand Template Widgets)

5- Tìm thẻ:

<html

- Thay thế 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.
6- Dán đoạn code bên dưới vào sau thẻ <body>.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by namkna.blogspot.com
//<![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://namkna.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

TÙy chỉnh:
- Thay ID-APP thành Id mà bạn thu được ở trên.
- Thay http://namkna.blogspot.com/ thành URL blog của bạn.
6- Lưu mẫu lại và truy cập vào một bài viết bất kỳ, kéo chuột xuống khoảng 50% và chờ khoảng 10 giây để tiện ích hiện (xem Demo).

Tùy chỉnh nâng cao

Dưới đây là các tùy biến và tùy chọn điều khiển. Bạn có thể bỏ qua chúng nếu bạn muốn

max_age: sẽ quyết định giới hạn tuổi của các bài báo. Đôi khi bạn không muốn hiển thị bài viết quá cũ, do đó bạn có thể thiết lập nó hiển thị lên đến 1-180 ngày. Nhưng nếu bạn không muốn thì hãy để là 0 như mặc định.
num_recommendations: Bạn có thể thiết lập số bài viết hiển thị. Bằng cách tăng hoặc giảm giá trị 3.
read_time: Ngay khi dộc giả đọc đến một vị trí nhất định được quy định, các plugin sẽ mở rộng và trước khi mở rộng, nó sẽ mất một thời gian. Namkna đã giữ nó bằng với 10 giây, bạn có thể tăng đến 30 hoặc nhiều như bạn muốn. bằng cách thay đổi số 10.
side: Bạn có thể quyết định vị trí của các plugin. Theo mặc định nó hiển thị lên về phía góc dưới cùng bên phải trang của bạn. Bạn có thể thiết lập nó nổi bên trái bằng cách sử giá trị right thành left.
trigger Tải plusin và ngay sau khi nó được kéo đến một vị trí quy định trước, nó sẽ mở rộng. Bạn có thể chọn vị trí đó trong ba cách tức là onvisible, X% hoặc manual. Namkna thích vị trí các điểm kích hoạt bằng tỷ lệ phần trăm cho các lần xem trang mượt và tốt hơn. Các widget sẽ mở rộng ngay sau khi người sử dụng di chuyển xuống 40% trang của bạn. Bạn có thể tăng hoặc giảm giá trị này. Nếu bạn muốn rằng các plugin phải mở rộng ngay sau khi người đọc đến bài viết của bạn thay vì dán mã giữa các dòng màu tím dán ngay bên dưới thẻ <data:post.body/> và sử dụng giá trị onvisible thay vì 40%.
Namkna cài đặt để các widget chỉ hiển thị trên các trang bài viết và không hiển thị trên trang chủ hoặc các trang tĩnh. Để hiển thị nó trên tất cả các trang, chỉ cần xóa các dòng in đậm màu tím.

Cập nhật gỡ rối?

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

Bạn nên biết về tiện ích này?

Bạn nên biết các plugin sẽ hiển thị các trang mà bạn và bạn bè của bạn thích. Những gì bạn thấy có thể xuất hiện khác nhau khi người khác nhìn thấy. Người khác sẽ thích trang của bạn từ bạn bè của họ và tương tự như vậy, bạn sẽ thấy các khuyến nghị tại các plugins từ những người trên hồ sơ của bạn. Vì vậy, nó có liên quan Số lần "Like" được thực hiện bởi bạn bè của bạn chứ không phải là bài viết liên quan.

Nếu không có bạn bè của bạn trong danh sách của bạn thích bất kỳ của trang của bạn sau đó bạn sẽ thấy chỉ có tiêu đề không có tính thích.

Ý kiến của bạn?

Namkna thấy việc cài đặt không quá khó, tuy nhiên nếu bạn có bất cứ rắc rối nào sau đó chỉ cần comment. . Namkna sẽ cập nhật thêm về nó ngay khi Facebook có thêm cập nhật mới.

Theo: Namkna.blogspot.com