Cài đặt comment blogger cùng comment facebook song song cho blogspot ~ Ngoc Anh

Thủ thuật dùng 2 nhận xét của blog và facebook là một thủ thuật theo mình nghĩ lên có hầu hết trên các web / blog bây giờ vì sao ? . vì nó c...

Blogspot+ Javascript+ Thu-thuat-blog

Thủ thuật dùng 2 nhận xét của blog và facebook là một thủ thuật theo mình nghĩ lên có hầu hết trên các web / blog bây giờ vì sao ? . vì nó có rất nhiều lợi thế cho các trang web, người dùng Việt Nam chúng ta khá là ưa chuộng và mình nghĩ hầu như lúc nào tài khoản facebook lúc nào cũng trong trạng thái đã đăng nhập, do đó việc thêm nhận xét của facebook vào blog là một trong những việc giúp cho người dùng nhận xét một cách dễ nhất.

Cài đặt comment blogger cùng facebook song song cho blogspot

Và cái quan trong nữa làm cho web của bạn có thêm được nhiều nhận xét và có sự tương tác với độc giả.

I : Cài đặt song song nhận xét Blogger và Facebook

B1 : Đầu tiên để khung nhận xét facebook có thể hiện trên blog của chúng ta, bạn phải chèn đoạn mã sau đây vào sau thẻ <body>

<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.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

( nếu có đoạn mã tương tự thì bạn có thể bỏ qua, nhưng tốt nhất là nếu có thì nên sao chép và dán đè lên đoạn mã có sẵn.)
B2 :Tiếp tục tìm đến đoạn mã sau đây

<b:includable id='comments' var='post'>

đặt đoạn mã dưới đây vào trước thẻ đóng </b:includable> của nó

<div id="fb_comments" style="height:0;visibility: hidden;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>

sau khi làm xong thì đoạn mã trong template của bạn sẽ như sau

<b:includable id='comments' var='post'>
...
...
...
<div id="fb_comments" style="height:0;visibility: hidden;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>
</b:includable>

B3 : Lại tiếp tục tìm đến đoạn mã sau và làm tương tự như trên

</div><b:includable id='threaded_comments' var='post'>

B4 : Bước cuối cùng bạn tìm đến đoạn mã sau

</b:includable><b:includable id='post' var='post'>

chèn đoạn mã dưới đây vào trước thẻ đóng </b:includable> của nó

<b:if cond='data:blog.pageType == "item"'>
<div id="Button1" style="margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='none';Button2.style.display='block';">Blogger Comments</div>
<div id="Button2" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='block';Button2.style.display='none';">Blogger Comments</div>
<div id="Button3" style="margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='none';Button4.style.display='block';">Facebook Comments</div>
<div id="Button4" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='block';Button4.style.display='none';">Facebook Comments</div>
</b:if>

II : Sử dụng song song nhận xét Blogger, Facebook, Google+

Để có thể sử dụng được comment nhận xét Blogger, Facebook, Google+ các bạn cũng làm tương tự từ bước 1 đến bước 3 nhé ...
Đến bước 4 thay vì sử dụng đoạn mã đó để chèn vào trước thẻ đóng </b:includable> của

<b:includable id='post' var='post'>

thì bạn hãy sử dụng đoạn mã này

<b:if cond='data:blog.pageType == "item"'>
<div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'>
<div id='Button1' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='none';Button2.style.display='block';' style='margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px;display:block'>Blogger Comments</div>

<div id='Button2' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='block';Button2.style.display='none';' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Blogger Comments</div>

<div id='Button3' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='none';Button4.style.display='block';' style='margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div>

<div id='Button4' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='block';Button4.style.display='none';' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div>

<div id='Button5' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button5.style.display='none';Button6.style.display='block';' style='float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div>

<div id='Button6' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button5.style.display='block';Button6.style.display='none';' style='display:none;float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div>
</div>

<div id='g_comments' style='display:none;text-align:center'>
<script src="https://apis.google.com/js/plusone.js"></script>
<div id='gcontainer' style="max-width:100%"><div class="g-comments" expr:data-href='data:post.canonicalUrl' data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" data-width="642"/></div>
</div>
</b:if>

Ở đoạn mã này thì các bạn thay data-width="642" bằng kích thước khung Google+ Comment cho phù hợp với blog của bạn. Google không hỗ trợ data-witdh="100%" như Facebook đâu nên các bạn phải đặt kích thước một cách thủ công .

Note :

Nếu bạn không thích hiện bình luận của Blogger trước khi người dùng chọn để hiện lên, thì bạn có thể thêm đoạn css sau vào blog của bạn (chèn lên thẻ ]]></b:skin>)

#comments { display :none }

Vậy thì chỉ khi người dụng chọn vào một trong 2 hệ thông bình luận thì chúng mới bắt đầu hiện lên.
Những đoạn mã mà mình đã hướng dẫn bạn ở trên thì hoàn toàn sử dụng Javascript chứ không đụng chạm gì đến jQuery nên bạn có thể yên tâm về tốc độ hoạt động trên blog của bạn vì tốc độ xử lý của Javascript nhanh hơn jQuery khá nhiều. Mong rằng sau khi sử dụng song song hai hệ thống bình luận này thì blog của bạn sẽ nhận được nhiều nhận xét hơn.
Chúc các bạn thành công và phát triển blog của mình đi lên. Nếu có vấn đề gì thắc mắc bạn comment bên dưới nhé thanks.