Hướng dẫn thêm comment Facebook và Google+ vào WordPress không cần Plugin

Chào các bạn, sau một thời gian bỏ bê Blog vì một số lý không mong muốn, hôm nay mình trở lại với bài viết hướng dẫn các bạn thêm bình luận của Facebook và Google+ (hay còn gọi là Google Plus) vào WordPress mà không cần cài Plugin, thao tác nhanh, hiển thị đẹp.

Vì sao cần thêm comment Facebook và Google+ vào website?

• Thêm comment Facebook giúp bạn tránh tình trạng giả danh đi bình luận gây hiểu nhầm.
• Giúp độc giả không cần gõ tên, mail hay website mà họ sẽ bình luận luôn khi họ đã đăng nhập Facebook và Google.
• Sử dụng hệ thống comment facebook và google+ rất phù hợp và có nhiều lợi ích đối với những blog cá nhân, trang tin tức….
• Giao diện đơn giản, đẹp mắt, hiển thị avatar của người bình luận.
• Người bình luận dễ dàng nhận được thông báo khi có người trả lời comment của mình.
• Không còn lo gánh nặng về spam, tuyệt đối không có spam.
• Tiết kiệm được tài nguyên, băng thông. Giảm được các request tới database để lấy nội dung comment.
• Giảm được các nguy cơ bị hack qua lỗ hổng comment.
• Là một phương pháp quảng bá website hiệu quả, mỗi khi comment thì bài viết của bạn sẽ xuất hiện lên tường người đó, mức độ lan truyền tăng theo cấp số nhân, quá hiệu quả phải không nào.
• Số lượng người dùng và hoạt động trên Facebook cực lớn, tại Việt Nam lượng người dùng đang tăng mạnh.
• Rất tốt cho blog của bạn vì chắc không ai phủ nhận sức ảnh hưởng của 2 ông lớn của cộng đồng Social.

Bài Nên Đọc: Tích hợp bình luận Facebook vào WordPress

Bước 1: Chèn đoạn js của Facebook plugin và Google+

Bước này các bạn sẽ thêm 1 đoạn script vào trước thẻ </body> trong theme. Cụ thể chèn vào file footer.php

<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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript"> window.___gcfg = {lang: 'vi'};(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script type="text/javascript"> window.___gcfg = {lang: 'vi'};(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>

Bước 2: Khai báo khung comment vào theme.

Sau khi đã include js rồi, bước tiếp theo là khai báo vị trí hiển thị khung comment. Đa phần chúng ta sẽ chèn nó dưới cuối bài viết.
Ở bước này có 2 lựa chọn:

1. Thay thế hệ thống comment của WordPress (khuyên dùng).
2. Thêm bên dưới comment của WordPress.

Để thực hiện chúng ta mở file single.php ra và tìm đoạn

<?php comments_template(); ?> Thay thế nếu chọn phương án 1 hoặc thêm ngay bên dưới nếu chọn phương án 2. <div class="tabs comment"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1"><i class="fa fa-facebook-square"></i>Facebook</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2"><i class="fa fa-google-plus-square"></i>Google +</label> <div class="clear-shadow"></div> <div class="content-tab"> <div class="tab-1"> <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="650" data-numposts="15" data-colorscheme="light"></div> </div> <div class="tab-2"> <script src="https://apis.google.com/js/plusone.js"></script> <div class="g-comments"data-href="<?php the_permalink(); ?>"data-width="650" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php comments_template(); ?> Thay thế nếu chọn phương án 1 hoặc thêm ngay bên dưới nếu chọn phương án 2. <div class="tabs comment"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1"><i class="fa fa-facebook-square"></i>Facebook</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2"><i class="fa fa-google-plus-square"></i>Google +</label> <div class="clear-shadow"></div> <div class="content-tab"> <div class="tab-1"> <div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="650" data-numposts="15" data-colorscheme="light"></div> </div> <div class="tab-2"> <script src="https://apis.google.com/js/plusone.js"></script> <div class="g-comments"data-href="<?php the_permalink(); ?>"data-width="650" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div> </div> </div> </div>

Các bạn chú ý 2 giá trị data-width thì các bạn tùy chỉnh theo kích thước style của mình nhé.

Bước 3: Makeup một chút bằng css3

Thực hiện xong 2 bước trên thì bạn đã có đầy đủ comment Facebook và Google+ rồi, tuy nhiên nếu để mặc định như vậy sẽ rất xấu và khiến cho trang bị dài quá, nên chúng ta sẽ để nó hiển thị dạng tabs nhé.

Chèn thêm đoạn css này vào file style.css trong folder theme

/* Tabs comment */ .tabs{ max-width:650px; margin:0 auto; position:relative; clear: both; padding-top:20px; } .tabs h3 {font-size:15px;background: #C0392B;color: #fff;padding: 0 20px;margin: 0 -24px;} .tabs input{ position:absolute; top:0; left:0; display:none; } .tabs label{ display:block; float:left; position:relative; padding:10px 20px; line-height:1.5em; min-width:55px; text-align:center; color: #222; font-size:13px; font-weight:bold; letter-spacing:1px; cursor:pointer; } .tabs label:after{ content:""; display:block; position:absolute; width:100%; height:5px; background:#fff; left:0; bottom:-5px; } .clear-shadow{ clear:both; } .content-tab{ position:relative; width:100%; border-top: 1px solid #DDD; padding-top: 10px; margin-top:-1px; } .content-tab>div{ overflow:hidden; top:0; left:0px; opacity:0; display:none; transition:opacity .4s; -moz-transition:opacity .4s; -webkit-transition:opacity .4s; -ms-transition:opacity .4s; -o-transition:opacity .4s; } /***** Xu Ly An Hien*****/ .tabs input:checked + label{background: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/PfBgtiydy5U.gif) no-repeat bottom center;z-index:1} .tabs input.tab-selector-1:checked ~ .content-tab .tab-1, .tabs input.tab-selector-2:checked ~ .content-tab .tab-2{ opacity:1;display:block; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

/* Tabs comment */ .tabs{ max-width:650px; margin:0 auto; position:relative; clear: both; padding-top:20px; } .tabs h3 {font-size:15px;background: #C0392B;color: #fff;padding: 0 20px;margin: 0 -24px;} .tabs input{ position:absolute; top:0; left:0; display:none; } .tabs label{ display:block; float:left; position:relative; padding:10px 20px; line-height:1.5em; min-width:55px; text-align:center; color: #222; font-size:13px; font-weight:bold; letter-spacing:1px; cursor:pointer; } .tabs label:after{ content:""; display:block; position:absolute; width:100%; height:5px; background:#fff; left:0; bottom:-5px; } .clear-shadow{ clear:both; } .content-tab{ position:relative; width:100%; border-top: 1px solid #DDD; padding-top: 10px; margin-top:-1px; } .content-tab>div{ overflow:hidden; top:0; left:0px; opacity:0; display:none; transition:opacity .4s; -moz-transition:opacity .4s; -webkit-transition:opacity .4s; -ms-transition:opacity .4s; -o-transition:opacity .4s; } /***** Xu Ly An Hien*****/ .tabs input:checked + label{background: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/PfBgtiydy5U.gif) no-repeat bottom center;z-index:1} .tabs input.tab-selector-1:checked ~ .content-tab .tab-1, .tabs input.tab-selector-2:checked ~ .content-tab .tab-2{ opacity:1;display:block; }

Sau khi thao tác xong 3 bước trên và update lại, các bạn Visit Site để cảm nhận thành quả của mình 😀
Dưới đây là demo hình ảnh khi các bạn hoàn thành 3 bước đơn giản trên của mình.

Lời Kết:

Với những lý do đầu bài viết của mình nhằm nêu lên những điều mà ta cần thêm comment của mạng xã hội vào WordPress. Hy vọng với bài viết này sẽ giúp bạn thêm comment của FaceBook và G+ vào WordPress mà không cần cài Plugin, đỡ rườm ra và khó tùy biến. Nếu các bạn có câu hỏi gì hãy để lại ở dưới, Thích Blogger sẽ giúp bạn trong tầm khả năng 🙂
Chúc các bạn thành công!