10/9/13

Tích hợp Facebook comment vào Blogspot

Okay, mình bắt đầu làm luôn nhé! Đầu tiên bạn cần phải có app Facebook, tạo app để bạn có thể quản lý được các comment Facebook trên website bạn, nếu bạn không dùng app riêng thì sẽ không thể nào quản lý được. Về cách tạo app Facebook thì các bạn có thể tự Google, ở đây mình chỉ hướng dẫn sơ về cấu hình app, các bạn xem hình sau nhé:

[IMG]

Sau khi đã có app ID Facebook rồi thì các bạn vào Blogspot để thêm code vào template, đầu tiên ta sẽ thêm đoạn code sau ngay dưới thẻ </head>
Code:
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="10" data-width="700"></div>';
//]]>
</script>
Các bạn có thể thay thông số data-num-posts là 5 hay 10 tùy ý, đây là số comment tối đa hiện ra, nếu trên 5 hay 10 nó sẽ rút gọn lại. Còn data-width là chiều rộng của khung comment.

Tiếp theo các bạn thêm đoạn code này sau thẻ <body>
Code:
<div id='fb-root'/>
<script>(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 = &quot;//connect.facebook.net/en_GB/all.js#xfbml=1&amp;appId=317194081746383";;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Thay appId mà khi nãy bạn tạo app Facebook vào nhé!

Và cuối cùng là thêm đoạn code hiển thị cái khung Facebook comment này, cái này bạn muốn đặt ở đâu trong template là tùy theo bạn nhé :)
Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
Ấn Save và tận hưởng kết quả nha :D

nguồn: http://forum.vietdesigner.net

Tag

Không có nhận xét nào:

Đăng nhận xét





Đăng ký: Đăng Nhận xét (Atom)