Como colocar caixinha de comentários do facebook no blog

fevereiro 07, 2015


Como vocês podem ver no blog além da opção de comentar estando logado pela sua conta do Blogger também tem outra opção que é da caixinha de comentário do facebook, que é exatamente isso que irei explicar hoje para vocês.

Estando logado em sua conta do Facebook,  acesse a página de aplicativos do Facebook, acesse aquiA página que será aberta estará em Inglês, na parte superior clique onde está escrito "My Apps" depois clique em "Create Now App" (Canto Superior Direito). Apos isso será gerado uma aba e onde está escrito "Display Name" coloque o nome do seu blog e logo depois escolha a categoria e selecione "Aplicativos para páginas", agora "Create App ID". Deixe essa página do Facebook aberta porque você vai precisar do "App ID" que foi gerado.

Vá para o painel do seu blog em Modelo vá para "Editar HTML", dê Ctrl+F e busque por isso:
<div class='comments' id='comments'>
Abaixo desse trecho encomtrado, cole o código abaixo:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'> 
Você pode alterar os seguintes itens do código acima para combinar com o seu blog.

num_posts='3' ( Número de comentários a serem exibidos )
width='450' ( Largura do formulário ), no meu o Width está em 650

Agora localize </head> e antes dele coloque o código abaixo:
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/><meta content='SEU ID' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>
 Lembram que eu falei para não fechar a página que foi gerada o App Id, então agora onde está escrito no cógido acima "SEU ID" substituam pelo "App ID" que foi gerada para a página.

Procure por ]]></b:skin> e acima dele cole o seguinte código da personalização da caixinha de comentários.
.comments-page {background-color: #f2f2f2;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;} 
Se preferir pode alterar as cores, para isto basta mudar os itens destacados acima para código da cor de sua prefencias. Agora salve o modelo.

You Might Also Like

0 comentários

Like us on Facebook

Pinterest Images

Follow us on Twitter