Nhờ khả năng lan truyền thông tin nhanh chóng, Facebook là một cộng cụ không thể thiếu đối với các blogger và các Webmaster. Ngày càng có nhiều trang blog, website tích hợp thêm chức năng comments Facebook để tận dụng khả năng tuyệt vời của công cụ này. Có rất nhiều plugins có thể hỗ trợ bạn làm được điều này nhưng trong bài viết này, mình sẽ hướng dẫn các bạn chèn chức năng comment Facebook vào WordPress mà không cần dùng đến plugin.
Chèn comment Facebook vào WordPress
Trước tiên, bạn cần chèn đoạn script sau vào file header.php, trước khi đóng thẻ </head>:
1 2 3 4 5 6 7 8 |
<div id="fb-root"></div> <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 = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=247718772064794"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
Đối với các bạn sử dụng Genesis, bạn vào mục Genesis > Theme settings và chèn đoạn script trên vào mục Header and Footer Scrips.
Tiếp theo, bạn sử dụng đoạn code sau chèn vào vị trí bất kì trong theme mà bạn muốn hiễn thị khung comment:
1 |
<div class="fb-comments" data-href="'.get_permalink($post->ID).'" data-numposts="10" data-colorscheme="light" data-width="640"></div> |
Đối với Genesis Childthemes, bạn có thể chèn đoạn code sau vào file functions.php:
1 2 3 4 5 |
add_action('genesis_after_post_content','rayno_comment_face'); function rayno_comment_face(){ if(is_single()){ echo '<div class="fb-comments" data-href="'.get_permalink($post->ID).'" data-numposts="10" data-colorscheme="light" data-width="640"></div>';} } |
Đếm số comment Facebook trên bài viết trong WordPress
Để làm được điều này, bạn chỉ cần sử dụng đoạn code sau:
1 |
<fb:comments-count href="'.get_permalink($post->ID).'"></fb:comments-count> |
Chèn code trên vào vị trí bạn muốn hiễn thị số comments Facebook trên bài viết.
Đối với Genesis Childthemes, bạn có thể chèn code trên vào phần post info, chẳng hạn như:
1 2 3 4 5 |
add_filter( 'genesis_post_info', 'post_info_filter' ); function post_info_filter($post_info) { $post_info = '<span class="post-view">[post_view]</span> <span class="post-comments"> <fb:comments-count href="'.get_permalink().'"></fb:comments-count></span> <span class="post-like"><div class="fb-like" data-href="'.get_permalink($post->ID).'" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> </span><span class="post-share"><div class="fb-share-button" data-href="'.get_permalink($post->ID).'" data-type="button_count"></div></span> [post_edit]'; return $post_info; } |
Trong đoạn code trên mình có chèn vào nút like và share bài viết lên Facebook, bạn có thể tham khảo và áp dụng. Kết quả của đoạn code trên cùng với một số lớp css, bạn sẽ được như thế này:
Để hiễn thị số lượt xem bài viết, bạn có thể sử dụng plugin BAW Post Views Count. Bạn có thể tham khảo trang mẫu tại đây: xemdecuoi.com
Nếu bạn muốn sử dụng plugin để chèn comment Facebook vào WordPress, bạn có thể tham khảo bài viết Tích hợp comments Facebook, Google+ vào blog WordPress