Widget bài viết liên quan (Facebook Recommendations Bar) cho Blogger - Blogspot

Mấy hôm nay Facebook giới thiệu Facebook Social Plugin mới cho Wordpress đó là Widget bài viết liên quan với hiệu ứng trượt. Theo xu hướng mới hôm nay chúng ta sẽ gắn cái widget tuyệt hảo này vào Blogger. Demo ngay trên blog này!

Làm tuần tự theo các bước sau.

1. Thêm Open Graphs meta tags

Muốn cho Facebook Recommendations Bar chạy được thì blog bạn phải có Facebook Open Graphs meta tags. Có một cách rất đơn giản để thêm phần này vào. Thêm đoạn code bên dưới vào dưới thẻ<head>

Data provided by Pastebin.com - Download Raw - See Original

<!-- Begin Open Graph metadata -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

        <meta content='article' property='og:type'/>

        <meta expr:content='data:blog.title' property='og:site_name'/>

        <meta expr:content='data:blog.pageName' property='og:title'/>

        <b:if cond='data:blog.postImageThumbnailUrl'>

                <meta expr:content='data:blog.postImageThumbnailUrl'property='og:image'/>

        </b:if>

<b:else/>

        <meta expr:content='data:blog.title' property='og:title'/>

        <meta content='website' property='og:type'/>

</b:if>

<meta expr:content='&quot;en_US&quot;' property='og:locale'/>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<!-- End Open Graph metadata -->

Chú ý: bạn chỉ việc thêm vào đoạn code này. Nó không ảnh hưởng gì đến các đoạn code thủ thuật seo mà bạn add trước đây.

2. Thêm code plugin widget

a) Vào trang Facebook Recommendations Bar Official Page.

b) Nhấn nút Get code (lần 1)

c) Click nút create a new app

d) Điền vào App Name tên blog của bạn và App URL là địa chỉ blog bạn. Nhấn tiếp tục

e) Điền Capcha Code và nhấn nút Submit

f) Nhấn nút Get code lần nữa

g) Copy đoạn code đầu tiên JavaScript SDK code (First Box Code)

h) Đăng nhập Blogger vào phần Template > Edit HTML > Proceed sau đó Expand Template Widgets

i) Điền đoạn code vừa chép được vào ngay dưới thẻ <body>

3. Tùy chỉnh hiển thị

Tìm trong Template thẻ <data:post.body/> và chèn ngay sau đó đoạn code sau

Data provided by Pastebin.com - Download Raw - See Original

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="fb-recommendations-bar" expr:data-href="data:post.url" data-read-time="30" data-action="like" data-side="right" expr:data-site="data:blog.homepageUrl" data-num-recommendations="2"></div>

</b:if>

Trong đoạn code trên bạn có thể tùy chỉnh các thông số hiển thị vị trí hiển thị, nút nhấn action hoặc số lượng bài viết liên quan…

data-read-time – thời gian chờ đợi trước khi widget bật lên từ góc màn hình. Mặc định là 30s. Thời gian tối thiểu là 10s

data-action – có thể chọn 1 trong 2 'like', 'recommend'

data-side – vị trí hiện thị của widget. Tuy chọn là 'left' hoặc 'right'

num_recommendations – số lượng bài viết được hiển thị. Mặc định là 2 nhưng bạn có thể chỉnh lên tối đa là 5

Thân mến.

Hồng Hòa Vi

About this blog

Widget bài viết liên quan (Facebook Recommendations Bar) cho Blogger - Blogspot

Related Posts

0 comments:

Post a Comment