Mấy hôm nay Facebook giới thiệuFacebook 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.
1. Thêm Open Graphs meta tagsMuố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ẻ :
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<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='"en_US"' 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:
<b:if cond='data:blog.pageType == "item"'>
<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>
4.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.
1. Thêm Open Graphs meta tagsMuố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ẻ :
a.Đăng nhập vào Blogger -> Bảng điều khiển và điều hướng đến Layout > Chỉnh sửa Html
b. Chọn vào box mở trộng tiện ích 'Expand Widget Templates'
c. Nhấn F3 tìm : <head> và thêm code sau vào sau <head> :
b. Chọn vào box mở trộng tiện ích 'Expand Widget Templates'
c. Nhấn F3 tìm : <head> và thêm code sau vào sau <head> :
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<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='"en_US"' 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:
<b:if cond='data:blog.pageType == "item"'>
<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>
4.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
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
Chúc bạn thành công.
Theo nguoiaolam
No comments:
Post a Comment