October 19, 2014

Dùng chung nhận xét Blogger, Facebook, Google+ đẹp kiểu metro



Đầ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.

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>
Lại tiếp tục tìm đến đoạn mã sau và làm tương tự như trên
<b:includable id='threaded_comments' var='post'>
Bước cuối cùng bạn tìm đến đoạn mã sau

bạn chèn vào trước thẻ đóng </b:includable> của
<b:includable id='post' var='post'>
 đoạn mã này
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'>
<div id='Button1' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button1.style.display=&apos;none&apos;;Button2.style.display=&apos;block&apos;;' 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(&apos;comments&apos;).style.display=&apos;block&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button1.style.display=&apos;block&apos;;Button2.style.display=&apos;none&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;100%&apos;;fb_comments.style.visibility=&apos;visible&apos;;Button3.style.display=&apos;none&apos;;Button4.style.display=&apos;block&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;100%&apos;;fb_comments.style.visibility=&apos;visible&apos;;Button3.style.display=&apos;block&apos;;Button4.style.display=&apos;none&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;block&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button5.style.display=&apos;none&apos;;Button6.style.display=&apos;block&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;block&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button5.style.display=&apos;block&apos;;Button6.style.display=&apos;none&apos;;' 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. Bác Google không hỗ trợ data-witdh="100%" như bác Facebook đâu nên các bạn phải đặt kích thước một cách thủ công nhé.

Sau khi hoàn thành thì lưu lại là bạn đã có ngay bộ ba sát thủ nhận xét ngay trên blog của mình. Lưu ý nhỏ là cũng như bài viết trước của mình thì nếu bạn nào muốn ẩn nhận xét cho tới khi khách chọn vào hệ thống bình luận thì thêm đoạn mã nhỏ này lên trên thẻ ]]></b:skin>
#comments { display :none }
như vậy là xong.

Lời kết

Lý do trước đây mình không hướng dẫn các bạn sử dụng chung luôn 3 thằng này chung với nhau là vì Blogger với Google+ thì cũng sử dụng chung Google do vậy thì người dùng thấy 1 trong 2 cái này trước thì thường nhận xét trên đó, ngoài ra thì Google+ lại bắt buộc điền tay chiều rộng (quá chi là chán). Nhưng bữa nay có bạn thắc mắc thì mình cũng xin có bài viết hướng dẫn để giải đáp bạn ấy cũng như những bạn có thắc mắc tương tự.

No comments:

Post a Comment