Thứ Ba, 18 tháng 9, 2012

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


11
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
  1. <!-- Begin Open Graph metadata -->
  2. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  3.         <meta content='article' property='og:type'/>
  4.         <meta expr:content='data:blog.title' property='og:site_name'/>
  5.         <meta expr:content='data:blog.pageName' property='og:title'/>
  6.         <b:if cond='data:blog.postImageThumbnailUrl'>
  7.                 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
  8.         </b:if>
  9. <b:else/>
  10.         <meta expr:content='data:blog.title' property='og:title'/>
  11.         <meta content='website' property='og:type'/>
  12. </b:if>
  13.  
  14. <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
  15. <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  16. <!-- 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)
Facebook-Recommendations-Bar (1)
c) Click nút create a new app
Facebook-Recommendations-Bar (2)
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
Facebook-Recommendations-Bar (3)
e) Điền Capcha Code và nhấn nút Submit
Facebook-Recommendations-Bar (4)
f) Nhấn nút Get code  lần nữa
Facebook-Recommendations-Bar (6)
g) Copy đoạn code đầu tiên JavaScript SDK code (First Box Code)
Facebook-Recommendations-Bar (5)
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
  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  2. <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>
  3. </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.

được đăng bởi Học HTML & CSS @ 23:04   0 Nhận xét

0 Nhận xét:

Đăng nhận xét

Đăng ký Đăng Nhận xét [Atom]

<< Trang chủ