Tạo tab nhận xét facebook cho blogspot

Bài trước mình đã hướng dẫn mọi người cách tạo facebook comment cho bài viết blogger.

HD cách đưa facebook comment vào một tabs.

Đầu tiên mình vẫn sử tab hover (trong bài viết tạo tabs nhiều tiện ích blogspot. Link trực tiếp)
(Code html: Download )

Bạn cần tham khảo cách tạo facebook comment trước khi thực hiện:

Cách thêm tiện ích tabs này vào blogger :

Lưu ý : Mọi người thực hiện sao lưu template dự phòng trong trường hợp thực hiện sai.

Bước 1

Thêm CSS và Javascript.

Các bạn search với khóa ~~</head>~~ . Và thêm đoạn code này trước </head>
(Nếu bạn muốn quản lý thì thay ID của mình bằng ID của bạn. Không thì xóa toàn bộ ID đó đi. ID màu đỏ)

<meta content='524808000891158' property='fb:app_id'/><script type='text/javascript'>//<![CDATA[var purl= location.href;var fb_href = purl.substring(0,purl.indexOf(".html")+5);var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="540"></div>';//]]></script>

<script type="text/javascript">

//<![CDATA[var LINK = "_link";

var CLASS_NAME = "current";var displayed_tab = null;
(function()
{
if (window.addEventListener)
{
window.addEventListener("load", setup_tabs, false);
}
else
{
window.attachEvent("onload", setup_tabs);
}
})();
function setup_tabs()
{
var tab_links = document.getElementById("tabs").getElementsByTagName("a");

for (var i = 0; i < tab_links.length; i++)
{
setup_tab_link(tab_links[i]);
}
}
function setup_tab_link(link)
{
var num = link.id.indexOf("_");
var link_id = link.id.substring(0, num); link.onmouseover = function(){display_tab(link_id);};
}
function hide_all_tabs()
{
var tab_divs = document.getElementsByTagName("div");
//Only need those div elements that have an id value starting with 'tab'
for (var i = 0; i < tab_divs.length; i++)
{
if (tab_divs[i].id.indexOf("tab") === 0)
{
change_tab_display(tab_divs[i], "none", tab_divs[i].id, "");
}
}
}
function display_tab(id)
{
if (!displayed_tab)
{
hide_all_tabs();
}
else
{
change_tab_display(displayed_tab, "none", displayed_tab.id, "");
}
//Make the selected tab visible
displayed_tab = document.getElementById(id);

change_tab_display(displayed_tab, "block", id, CLASS_NAME);
}
function change_tab_display(tab_content_element, display, tab_link_id, class_name)
{
//Make the selected tab visible or not visible
tab_content_element.style.display = display;

//Change the class name of the tab link
document.getElementById(tab_link_id + LINK).className = class_name;
}
//]]></script>
<style type="text/css">
.tab
{
display: none;
clear: both;
margin-bottom: 10px;
padding-top: 15px;
overflow-x: hidden;
height:auto;
width:546px;
}
.tab_current
{
display: block;
clear: both;
margin-bottom: 10px;
padding-top: 15px;
overflow-x: hidden;
height:auto;
width:546px;
}

.tab *, .tab_current *
{
margin: 0%; }
.tabs
{
padding: 0%;
margin: 0%;
list-style-type: none;
}
.tabs li
{ margin: 0px 5px 0px 0px; float: left;

font-size: 11px;
font-weight: bold;
}
.tabs li a.current
{
background-color: white;
}
.tabs li a.current
{
background: #df5a13 !important;
color: #ffffff !important;
text-decoration: none;
position: relative;
z-index:9999;
border:1px solid #DF5A13 !important;
}
.tabs li a
{
padding: 3px 15px;
color: #005399 !important;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
border-top: 1px solid #d5dae0;
border-left: 1px solid #d5dae0;
border-right: 1px solid #d5dae0;
}
.tabs li a:hover
{
text-decoration: none;
}
.tabs_top
{
margin-bottom: 0px;
padding-bottom: 15px;
}
</style>

Bước 2

Thêm đoạn code sau ngay dưới ~~<body>~~
(Tương tự. Nếu bạn muốn quản lý thì thay ID màu đỏ bằng ID của bạn. Không thì có thể xóa đi)

<div id='fb-root'/><div id='fb-root'/><script>//<![CDATA[(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=524808000891158"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));//]]></script>

Bước 3

Search đoạn code sau : ~~<b:includable id='comments' var='post'>~~

Sử dụng notepad++, dreamweaver.... để xóa toàn bộ code <b:includable id='comments' var='post'>.....</b:includable>

Như hình :

Thay toàn bộ đoạn code đó bằng code Như hình:

CODE :

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

<ul class="tabs" id="tabs">

<li>
<a href="#" class="current" id="tab1_link">Nhận xét Mới</a>
</li>
<li>
<a href="#" id="tab2_link">Nhận xét với facebook</a>
</li>
</ul>
<div class="tab_current" id="tab1">
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</div>
<div class="tab" id="tab2">
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>
</b:if>
</div>
</b:includable>

OK. Save lại là xong.

Lưu ý: Nếu bạn muốn quản lý facebook comment quản lý để lấy ID thì tham khảo bài viết trước. Nếu không thích quản lý thì xóa ID đi cũng được.

Bạn cần chỉnh lại kích thước tab cho phù hợp với width của bạn. (search .tab và .tab_current)

Nếu bạn không chắc chắn có thể làm demo nháp trước khi áp dụng trực tiếp vào web blog của bạn.

Default comments
Facebook comments

- Rất vui khi được mọi người nhận xét, đóng góp ý kiến để bài viết chất lượng hơn.
- Các ý kiến mang nội dung xấu, tính chất spam, chia rẽ, vi phạm sẽ bị xóa mà không nhắc nhở.
- Comment và share bài viết nếu bạn cảm thấy hay và thú vị.
- Không quên ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này.