CÓDIGO DE PROPRIEDADE
(cole abaixo de <head>)
<meta content='SEU ID DO APLICATIVO' property='fb:app_id'/>
<meta content='SEU USUÁRIO FACEBOOK' property='fb:admins'/>
CÓDIGO JAVASCRIPT
(cole acima de </head>)
<b:if cond='data:blog.pageType != "static_page"'>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script language='JavaScript'>
function showComments(tipo) {
if (tipo == 1) {
window.document.getElementById('blogger-comments-page').style.display="block";
window.document.getElementById('fb-comments-page').style.display="none";
}
else if (tipo == 2) {
window.document.getElementById('fb-comments-page').style.display="block";
window.document.getElementById('blogger-comments-page').style.display="none";
}
else if (tipo == 3) {
window.document.getElementById('blogger-comments-page').style.display="none";
window.document.getElementById('fb-comments-page').style.display="none";
}
}
window.onload = function(){
showComments(1);
}
</script></b:if>
CÓDIGO CSS
(colar acima de ]]></b:skin>)
.comments-page {
background-color: #fff; /*COR DE FUNDO DOS COMENTÁRIOS*/
}
#blogger-comments-page {
padding: 0px 5px;
display: none;
}
.comments-tab {
float: left;
padding: 5px ;
margin-right: 3px;
cursor: pointer;
background: #ff0075; /*COR DE FUNDO DAS ABAS*/
font: 14px Arial, sans serif !important; /*TIPO E TAMANHO DA FONTE*/
color: #fff;
}
.comments-tab-icon {
height: 15px; /*ALTURA DO ÍCONE*/
width:auto;
margin-right: 3px;
}
.comments-tab:hover {
background-color:#444; /*COR DE FUNDO DAS ABAS EM ESTADO HOVER*/
}
/* Final do código de personalização*/
CÓDIGO HTML
(colar abaixo das 2 ocorrências de <div class='comments' id='comments'>)
<b:if cond='data:blog.pageType != "static_page"'>
<div class='comments-tab' id='blogger-comments' onClick='showComments(1);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://4.bp.blogspot.com/-WhQzGVdf5KE/V49lJLj2uyI/AAAAAAAAAYo/eHStZW0KnD4veWexzewX3pVJo3x2X49CACK4B/s1600/blogger%2B%25282%2529.png'/>
<data:post.numComments/> comentários via Blogger
</div>
<div class='comments-tab' id='fb-comments' onClick='showComments(2);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://3.bp.blogspot.com/-bOi2AM6uc5A/V49k_O794rI/AAAAAAAAAYg/XlsaLBKBgBYRPhjmM7AX-uyAYNsFKQ6zQCK4B/s1600/facebook%2B%25283%2529.png'/>
<fb:comments-count expr:href='data:post.url'/> comentários via Facebook
</div>
<div class='clear'/>
</b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='7' width='670'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
