教程 | 在Blogger添加(Blogger+Facebook)可切换式评论箱

切换式 ⇔ 评论箱如下图，就是Blogger+Facebook的，其实也可以加其他得啦，比如google plus，但我博客是做这个所以就地取材，我本身有用到的也不会白心机呀，啊这个可以自由换其他颜色的哦，埋怕。

切换去FB就会这样

以下需要你的细心、耐心、恒心，不明白真的要问

我已经尽量做到不这么复杂惹顺着步骤去看很快就会完成哦！
一共有5个大步骤，哇咔咔从零O开始吧——

此乃大工程也，在这之前你需要做备份和设定。

童鞋们请主题背景>右上角的备份/还原下载好自己的博客模板的XML才开始哦。

不是选择嵌入评论的朋友要设定好嵌入/博客条件：评论设置：嵌入（如下图）。

我觉得我画到已经很明显的了，哈哈

首先呢，建立可管理FB COMMENTS 需要找出你的FB ADMIN ID & FB APPS ID。

找出你的Admin ID，就是（管理者偏号）。

点击此链接

Find My FB Admin ID

* 网址不是你FB名字哦，是你的FB个人主页上面的网址。(蓝框内)

输入后，点击“Find numeric ID”，它就会出现你的Admin ID编号。

接下来就只剩下找APP ID，点击此链接

Developers Facebook Apps

你要在FB APPS网站建立好应用，如果已经有的，可以直接索取APP ID(应用编号)。
图里面的橘子框内都是你的APP ID。

知道了自己的两个ID编号后，就可以先插入ID代码惹。

主题背景

修改HTML，Ctrl+F查找

<head>

在<head>的下一行，添加以下框内的代码。

把大步骤“

”所获得的两个ID数字填入，取代“你的FB Admin ID编号”和“你的FB Apps ID编号”字眼。

此评论箱设定是中文，如果你希望你的FACEBOOK COMMENT BOX是英文的话，把代码内的“zh_CN”更换到“en_US”。

可管理的FB评论箱：你可以点击评论箱那里的“审核工具”字眼审核那个帖子的留言，和到链接点我点我
不要看错你的应用程序哦~

https://developers.facebook.com/tools/comments/XXXXXXXXXXX(你的APP ID)

管理留言。嘛，所以搜寻ID的步骤很值得哦。
有时间去看看大概是怎样可以点：关于管理博客里Facebook式评论的那件事。

添加切换评论箱的设计代码，可调整宽度、颜色、字体等。

你确认你做了步骤“

”哦，还是一样主题背景

修改HTML (Ctrl+F查找)

]]></b:skin>

在“]]></b:skin>”的上一行，添加以下框框内的代码。

/* 切换式评论箱代码 */
.comment-count {
 padding-right: 1.0em;
}
.comment-count a{
 color: #fff !important;
}

/* 背景条 */
.blog-comment-tabs {
 list-style: none;
 float: right;
 margin: 15px 0;
 display: inline-block;
 padding: 0;
 width: 100%;
 background: transparent;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .4);
 box-shadow: 0px 0px 0px rgba(0, 0, 0, .3);
}

/* 没被选择的预设 */
.blog-comment {
 font-family: 'Gloria Hallelujah', cursive;
 float: left;
 font-size: 1.2em;
 list-style: none outside none;
 text-transform: uppercase;
 width: 24%;
 margin: 1px;
 padding: 10px 15px !important;
 font-weight: normal;
 color: #444; -moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, .4);
 -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, .4);
 box-shadow: 1px 0px 1px rgba(0, 0, 0, .4);
 cursor: pointer;
 -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
      -o-transition: all .2s ease-in-out;
     -ms-transition: all .2s ease-in-out;
         transition: all .2s ease-in-out;
}

/* 被选择后的预设 */
.blog-comment.selected {
 cursor: pointer;
 padding: 11px 20px !important;
 margin: 0 0 0 -8px;
}

/* 被选择的Blogger评论 */
.blogger-comment.selected {
 background: #FA9200;box-shadow: 1px 0px 1px rgba(0, 0, 0, .4);color:#fff;
}

/* 被选择的FB评论 */
.fb-comment.selected {
 background: #395795;box-shadow: 1px 0px 1px rgba(0, 0, 0, .4);color:#fff;
}

/* 评论标志 */
.commenticon {
 margin-right: 15px;
}

接下来的

、

到

都是EDIT PARTS，给你参考怎样设定影子、颜色、字体、宽度、等等... ...【没要修改外型的童鞋，可以直接跳到大步骤哦！】

想更多颜色可以到 HTML COLOURS 调你喜欢的颜色。(如果要写颜色英文代号的话，要去掉“#”,例如：color : pink ;)

color: #FFF; (字体颜色)
background: #395795; (背景颜色)

想更换字体，可以更改这行'Gloria Hallelujah',cursive;

font-family: 'Gloria Hallelujah', cursive;

如果你要鼠标触碰的效果，可以添加以下设定。也可以自行在“{”和“}”之间再添加字体、影子等等。

.blog-comment:hover {
background: #EECCE;(背景颜色)
}

blog-comment设定里的“width:24%”是Blogger和FB切换钮的长度。

width: 24%;

你想让长方形加圆角，可以加入以下代码，“5"px，数字越大就越圆。

border-radius: 5px;

想改变蓝框橘框的整体大小，可以动用Padding哦

修改(被选择预设)里的，就会改变选择了的框大小。
修改(没被选择预设)里的，就会改变没被选择的框大小。

padding: 11px 20px !important;

“BLOGGER”和“FACEBOOK”字体太贴框的左边？你可以任意改字眼框内的位置，和也可以把“right”改成“left”，字数越大就越靠近(左边/右边)。

.commenticon {
margin-right: 15px;
}

你不想它在左边，你要在右边，你可以在blog-comment这里的以下代码的“left”改掉去“right”。

float: left;

替换大工程（1），细心留意代码避免看错哦。

Ctrl+F 找以下的这个代码... ...((无力

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

你大概就会看到这样的画面（每个人的代码都不一样，I don't know）。请点开那行的“...”查看更多，因为它的收缩起来的，你要展开它。点击图片查看大图

另外，我建议，除了“<b:includable id='comments' var='post'>”这行，其他的可以收起来，不然会很乱。(橘子框内的黑三角形是已经收起来的)

把“<b:includable id ='comments'var='post'>”一直到到到... ...“</b:includable>”的代码都Highlight， 替换成以下框内的代码 。

<b:includable id='comments' var='post'>
                     <div id='blog-comment'>
<div class='blog-comment-tabs'>
<ul>
<li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger</li>
<li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook commenticon'/>Facebook</li>
</ul>
</div>
<div class='commtab' id='blog-comment1'>
 
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
        <b:if cond='data:post.numComments == 0'> Leave your comment </b:if>
        <b:if cond='data:post.numComments == 1'> 1 Comment </b:if>
        <b:if cond='data:post.numComments > 1'> <data:post.numComments/> comment </b:if> 
        </a>
      </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>

</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='commtab' id='blog-comment2'>
 
    <div class='fb-comment-box'>
        <div>
            <div id='fb-root'/>
            <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' height='110' width='720'/>
        </div>
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>  
       var $jq = jQuery.noConflict();  
</script>
<script type='text/javascript'>
//<![CDATA[
$jq(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $jq('.blog-comment-tabs ul li').click(function(){ 
        //  First remove class "selected" from currently active tab
        $jq('.blog-comment-tabs ul li').removeClass('selected');
        //  Now add class "selected" to the selected/clicked tab
        $jq(this).addClass('selected');
        //  Hide all tab content
        $jq('#blog-comment .commtab').hide();
        // Show selected tab along with its assigned content
        $jq('#blog-comment .commtab').eq($jq('.blog-comment-tabs ul li').index(this)).slideToggle()(200);
   });
   // Default Tab Selection: Hide all tab content
   $jq('#blog-comment .commtab').hide();
   // Shows the first tab content
   $jq('#blog-comment .commtab:first').show();
   // Default Selected Tab: Blogger Comment Section
   $jq('.blog-comment-tabs ul li:first').addClass('selected');
});
//]]>
</script>

</div>
</b:includable>

EDIT：你可以在这个代码和步骤“

”代码内的“fb-comment-box”的“width:720px”根据你的博客更改宽度。

<h4>那里的“Leave your comments”可自行更改。(例如：留下你的话)

替换大工程（2），细心留意代码避免看错哦。

再找以下的这个代码

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

一样刚刚那样，点开“...”然后下面那行的要收缩起来(黑色三角形)没那么乱。点击图片查看大图

Highlight“<b:includable id='threaded_comments' var='post'>”一直到到到... ...“</b:includable>”的代码， 替换成以下框内的代码 。

<b:includable id='threaded_comments' var='post'>
                     <div id='blog-comment'>
<div class='blog-comment-tabs'>
<ul>
<li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger</li>
<li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook  commenticon'/>Facebook</li>
</ul>
</div>
<div class='commtab' id='blog-comment1'>
 
  <div class='comments' id='comments'>
    <a name='comments'/>
      <h4>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
        <b:if cond='data:post.numComments == 0'> Leave your comment </b:if>
        <b:if cond='data:post.numComments == 1'> 1 Comment </b:if>
        <b:if cond='data:post.numComments > 1'> <data:post.numComments/> 只Bombombaa </b:if> 
        </a>
      </h4>
<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
<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='commtab' id='blog-comment2'>
 
    <div class='fb-comment-box'>
        <div>
            <div id='fb-root'/>
            <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' height='110' width='750'/>
        </div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script type='text/javascript'>  
       var $jq = jQuery.noConflict();  
</script>
<script type='text/javascript'>
//<![CDATA[
$jq(document).ready(function(){
    //  When user clicks on tab, this code will be executed
    $jq('.blog-comment-tabs ul li').click(function(){ 
        //  First remove class "selected" from currently active tab
        $jq('.blog-comment-tabs ul li').removeClass('selected');
        //  Now add class "selected" to the selected/clicked tab
        $jq(this).addClass('selected');
        //  Hide all tab content
        $jq('#blog-comment .commtab').hide();
        // Show selected tab along with its assigned content
        $jq('#blog-comment .commtab').eq($jq('.blog-comment-tabs ul li').index(this)).slideToggle()(200);
   });
   // Default Tab Selection: Hide all tab content
   $jq('#blog-comment .commtab').hide();
   // Shows the first tab content
   $jq('#blog-comment .commtab:first').show();
   // Default Selected Tab: Blogger Comment Section
   $jq('.blog-comment-tabs ul li:first').addClass('selected');
});
//]]>
</script>

</div>
<div style='clear: both;'/>
                    </b:includable>

Edit：代码内的“只Bombombaa”可更改成“个评论”/“comments”。

代码内的

<li class='blog-comment blogger-comment'><span class='comment-count'><data:post.numComments/></span><i class='fa fa-comments commenticon'/>Blogger</li>
<li class='blog-comment fb-comment'><span class='comment-count'><fb:comments-count expr:href='data:post.url'/></span><i class='fa fa-facebook commenticon'/>Facebook</li>

“Blogger”和“Facebook”字眼可更改成自己想显示的字。
例如：博客评论、面子书评论。

完成了，保存主题模板。

成功滴话在帖子下留言说声哦科科

"Welcome 喵子屋"