Face
book là một mạng xã hôi lớn nhất hiện nay. Đây cũng là mạng có số lượng
người dùng lớn nhất thế giới. Vậy tại sao chúng ta không tận dụng những
commnet của mọi người trên face book bằng cách chèn vào blog.
Lần trước namkna đã giới thiệu cho các bạn cách chèn comment face book vào blog ves 1 (Các bạn có thể xem lại tại đây) Hôm nay namkna giới thiệu thêm cho các bạn một cách khác sử dụng song song 2 comment trên blog.
Tạo app trên facebook và lấy Application ID
1- Đăng ký một apps trên Facebook tại Developers.facebook bạn có thể sử dụng tài khoản facebook của bạn để đăng nhập.
2- Điền tên vào bảng Popup nếu trang báo Valid là tên có thể sử dụng.
- Bấm tiếp tục.
3- 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ằng mobile phone hoặc credit card (Thông thường thì hãy xác
minh bừng số điện thoại của bạn).
- Hãy nhập mã Captra vào và bấm Tiếp tục.
5- Tiếp theo bấm vào Create new app để đăng ký ứng ụng nha.
- Bấm tiếp tục liên tục nha. Đến khi xuất hiện trang như sau.
6- Bấm vào tên ứng dụng bạn vừa nhập ở bước trên và bấm vào Edit setting. và nhập các thông số như hình dưới.
- Chú ý phần App Id mình tô màu xanh trong ảnh vì ở bước sau này sẽ sử dụng.
7- Bấm Lưu Thay đổi.
Nếu cảm thấy các bước trên quá khó để thực hiện bạn có thể sử dụng cách khác Tại đây
7- Bấm Lưu Thay đổi.
Nếu cảm thấy các bước trên quá khó để thực hiện bạn có thể sử dụng cách khác Tại đây
Chèn comments Facebook vào blogger
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced). => Mở rộng tiện ích mẫu.
4- Dán code bên dưới sau thẻ <head>:
<meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='article' property='og:type'/> <meta content='Logo.png' property='og:image'/> <meta content='App ID' property='fb:app_id'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <script type='text/javascript'> function commentToggle(selectTab) { $(".comments-tab").addClass("inactive-select-tab"); $(selectTab).removeClass("inactive-select-tab"); $(".comments-page").hide(); $(selectTab + "-page").show(); } </script>
Trong đó:
- Thay Logo.png thành link ảnh của bạn. Tốt nhất hãy sử dụng ảnh có kích thước 30 x 30px
- Thay App ID thành App ID đã tạo ở bước 6. (Trong ví dụ của mình là 131761626979828 )
5- Tìm đoạn code có dạng tương tự như sau (Mẹo: bấm Ctrl +F):
<html
- Và thay thế thành:
<html xmlns:fb='http://www.facebook.com/2008/fbml'
- Lưu ý: nếu trong template của bạn đã có đoạn code xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì có thể bỏ qua bước 5 này.
6- Dán đoạn code sau vào trước thẻ ]]></b:skin>.
.comments-page {
background-color: #f2f2f2;
width:520px
}
#blogger-comments-page {
padding: 0px 5px;
display: none
}
.comments-tab {
float: left; padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2
}
.comments-tab-icon {
height: 14px;
width: auto;
margin-right: 3px
}
.comments-tab:hover {
background-color: #eeeeee
}
.inactive-select-tab {
background-color: #d1d1d1
}
7- Tìm code sau:<div class='comments' id='comments'>- Và thêm vào sau đoạn code vừa tìm được đoạn code sau:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJMhNiC_GrDwlNtXRpMAan_nxwxQzPepRJI7GYfqJhFJa1vFqwwMPv0IviVwnffnBWZvURIGsYXAJINV70obJVUtd1LTXZvpUUGJZV4WD_pceJcX4mUDInRZRM1q9ILPwRJiaVFJ2HqM/s1600/Facebook-icon-namkna-blogspot-com.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTA6Qfg1BqqlJ4tusd5O3ezZmNdaCcCoQSbRUqDGI929Dy_-mHHu0YP-itdLutBLRru3kNo-aNx5MG-aDsdm1qGynYrbVZYXIgGNUuAG8n3x9FpKTUbhJv82irbGBJe9mHlAxQnjx7iU/s1600/blogger-icon_namkna-blogspot-com.png'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='520'/>
</b:if>
</div>
8- Lưu mẫu của bạn lại và xem kết quả nha.
Theo blog namkna
Facebook
Twitter
Google+
Rss Feed
20120819(1).jpg)
