Bài viết này mình sẽ hướng dẫn các bạn thêm cùng lúc 3 loại comment phổ biến nhất hiện nay dành cho blogger. Đó là comments mặc định của blogger, comments của trang facebook và cuối cùng là comment của trang google +. Với dạng tab chuyển động nên cho dù các bạn chèn 3 loại comment nhưng không hề chiếm diện tích và làm sấu bố cục, mà ngược lại nó còn làm cho trang của bạn nhìn chuyên nghiệp hơn.
Các bạn có thể xem ảnh minh họa để thấy rõ nguyên tắc hoạt động của thủ thuật này trước khi quyết định có áp dụng nó hay không nha:
Và nếu cần thiết bạn có thể thử nghiệm trực tiếp trên blog demo của mình nha:
Để làm được điều đó các bạn lần lượt làm theo các bước bên dưới:
» Bước 1: Tạo app trên facebook và lấy Application ID
Bước này mình đã từng giới thiệu đến cho các bạn trong ves 2 và các bạn có thể xem cách tạo một APP facebook như trong bài viết mình từng hướng dẫn ở đây: » Tạo app trên facebook và lấy Application ID
» Bước 2: Cài đặt phần comment mặc định của blogger
- Để các blogger để hiển thị bình luận facebook tab, bạn phải thiết lập comment nhúng bên dưới bài viết. Để hiển thị các comment blogger bên dưới bài hãy làm như sau:
2.1- Bào Blogger> Cài đặt> Bài đăng và nhận xét
2.2- Thiết lập "Vị trí nhận xét" (Comment Form Placement) để nhúng (Embedded ) bên dưới bài viết và Lưu thiết đặt của bạn lại. Như vậy khi chuyển tab phần comment đó sẽ nằm ở vị trí như trong demo
(Bước này đa số mặc định của blogger đã cài đặt sẵn tuy nhiên một số blog có thể vô tình mà bạn cài đặt dạng khác. Nếu kiểm tra thấy nó không như hướng dẫn thì hãy cài lại nha)
» Bước 3: Chèn comment Facebook, comment Google+ và comment mặc định của blogger vào blogspot
3.1- Vào phần mẫu (Template)
3.2- Chọn Chỉnh sửa HTML (Edit HTML).
3.3- Tìm thẻ như bên dưới (thông thường nó nằm ngay phần đầy của blog vì nó là thẻ mở của template mà):
<html
- Thay thế nó thành đoạn code bên bên dưới<html xmlns:fb='http://www.facebook.com/2008/fbml'
3.4- Dán code khai báo với face book 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 type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
☼ Tùy chỉnh code:
- 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. Nếu bạn không muốn có một biểu tượng hiển thị trên tường mỗi khi có một ai đó đăng nhận xét trong blog của bạn thì hãy xóa đoạn code màu xanh đi.
- Thay App ID thành App ID đã tạo ở bước 1. (ở bài này)
- Nếu blog của bạn đã có file jquery-min.js rồi thì xóa phần màu vàng (Để biết blog có file đó hay chưa hãy bấm CTrl + F và đánh tên file vào).
3.5- Dán đoạn CSS sau trước thẻ ]]></b:skin> :
#blogger-comments-page{padding:0 5px}
#comments h4{text-indent:-999em;height:1px;background:#0186CB;margin-top:27px}
#fb-comments-page, #googplus-comments-page{display:none}
#googplus-comments-page {border-top: 1px solid #0186CB;margin-top: 27px;}
.comments-page{width:98%}
.comments-tab{float:left;padding:5px;margin-left:5px;margin-right:3px;cursor:pointer;background-color:#048F14;color:#fff}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#rgb(35,117,44)}
.inactive-select-tab{background-color:#000}
.fb_iframe_widget{background:#333;color:#fff}
☼ Tùy chỉnh CSS:
- background:#333 là màu nền của phần comment facebook bạn có thể đổi lại thành màu khác (trong bài này mình để nền màu đen)
- color:#fff là màu chữ của phần commnet facebook. Nếu bạn thay đổi màu nền thì hãy thay đổi cả phần này cho thích hợp với blog của bạn nha.
- background-color:#000 là màu nền của các tab. Phần mà khi bạn bấm để chuyển qua lại giữa các tab như hình sau:
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
- Thêm vào sau nó đoạn code sau:<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjDM6XRqa8XhNZ3uTb7poBhG3GwICVpeT-Tvo-XKwno70INvHUq3PloaGYQQwpMs31B7UNjRoO6L_FlyZfMNRgrX61EssHeog0VoPBMobrqwUGGc8ZtgU_c0meKabSsPUH3M0pwq0wRnk-/s1600/icon-blogger-namkna.png'/><data:post.numComments/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='googplus-comments' onclick='javascript:commentToggle("#googplus-comments");' title='Comments made with Google+'><img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyVs8xodc_BdqMCqBwTgrzxaOrpTgPCgmhjbPVj9Dbqt0GLaWdYo7qKxjC6t9xeGat32qyNItWqiT_5BS5D45ViWvS9xckJHyjUl6PQHewmBxBwQxPVGZQDL5HELmNbuJXCr9cQLo_buy/s1600/google+++namkna.png'/>
G+ Comments
</div>
<div class='comments-tab inactive-select-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/AVvXsEjTjcVW0scrCatiGjHAKCa1hUAcnaOQQvTyngHtjUoo_g_5hPDNTJlpsBFyE12Ll5GB-onOroT4BEXXDZn2eYAXoCLAqCO_pdN-P8pFUn-6Y6PtD3g-7tH7jHjl2JUo7gJvm8NQ6OX8qA63/s1600/facebook-namkna123.png'/>
<fb:comments-count expr:href='data:post.url'/>Comments
</div>
<div class='comments-page' id='googplus-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='google_comments'/>
<script>
gapi.comments.render('google_comments', {
href: window.location,
width: '680',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div class='fbcm'>
<div id='fb-root'/>
<fb:comments colorscheme='dark' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='680'/>
</div>
</b:if>
</div>
<div class='comments-page' id='blogger-comments-page'>
☼ Tùy chỉnh phần comment:
- Phần màu vàng là phần comment của google + nếu không thích thì bạn có thể xóa nó đi.
- Phần màu xanh là phần comment của facebook nếu không thích thì bạn có thể xóa nó đi.
</div>
3.8- Lưu mẫu của bạn lại và kiểm tra kết quả đã làm nha.
Nếu gặp bất cứ khó khăn nào khi áp dụng hãy để lại comment của bạn ở dưới bài viết này mình sẽ hướng dẫn cụ thể và giải đáp các thắc mắc của các bạn.
☼ Quản lý comment được đăng trong tab facebook:
- Để đánh dấu bất cứ bình luận nào đó là thư rác (spam) hoặc loại bỏ/ẩn bất cứ bình luận bạn cần đăng nhập vào tài khoản facebook đã tạo App trên của bạn bằng cách truy cập trang này:
http://developers.facebook.com/tools/comments
Bạn có thể kiểm duyệt tất cả cùng một lúc mà không cần truy cập tất cả các bài viết trong blog của bạn và điều chỉnh các ý kiến cá nhân cho mỗi bài viết.
Làm thế nào để cho phép các nhà cung cấp khác đăng nhận xét trên khung comment facebook,
Với Facebook Plugin bạn có thể chọn để chấp nhận ý kiến ngay cả với Yahoo, Hotmail hay AOL. Để chấp nhận bình luận từ các nhà cung cấp phần thứ ba chỉ cần nhấp vào liên kết Settings trên Facebook hộp bình luận bên trong một bài viết bất kỳ của bạn và nhấp vào hộp kiểm nói rằng "các nhà cung cấp đăng nhập khác" (Other login providers)
Lưu ý với thread comment:
Với các bạn sử dụng mẫu thread comment của blogger thì các tab chỉ xuất hiện khi có một commnet đầu tiên được xuất bản.
No comments:
Post a Comment