Cách thêm khung comment Facebook và Google Plus dưới bài viết WordPress

Nhiều lúc bạn muốn người đọc comment bên dưới bài viết bằng các tài khoản như Facebook và Google Plus mà bạn không thích dùng các Plugin thì đây là cách đơn giản dành cho bạn. Dĩ nhiên bạn cũng cần biết chút ít về kỹ thuật để có thể gắn khung comment Facebook và Google Plus theo cách này nhé !

Các bước làm cụ thể như sau:

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

Bước này các bạn sẽ chèn 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>
Bước 2: Khai báo khung comment vào theme.

Sau khi đã include js rồi ( save lạ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:

Phương án 1: Thay thế hệ thống comment của WordPress (khuyên dùng).
Phương án 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ế đoạn code trên bằng đoạn code bên dưới nếu chọn phương án 1 hoặc chèn ngay bên dưới nếu chọn phương án 2. Trong web maxnguyen.net thì mình mình xài 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>

P/S: các giá trị data-width thì các bạn tùy chỉnh theo kích thước styles của bạn 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é.

( Cái này bạn cần mở FTP lên nhé ! ) Bạn nào không biết cách mở FTP thì 2 bước bên trên là có thể comment bằng tài khoản Facebook hay Google Plus dưới bài viết được rồi. 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;
}

Xong. Bây giờ bạn có thể mở một bài post nào đó và xem thành quả 20 phút làm việc của bạn. Max chúc bạn thành công nhé !

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.