06 maio 2012

Sistema de comentários do Facebook no seu blog.

Boa noite pra vocês, vocês já devem ter se perguntado como fazer pra colocar os comentários no blog né mesmo? pois então vou postar aqui um tutorial pra vocês poderem usar em seus blogs. cliquem em leia mais pra ver o tutorial.
Para quem não sabe, irá ficar assim:

1- Primeiro vá em Painel de controle, depois em Designer e em seguida clique em Editar HTML e então marque a opção expandir modelo de Widgets. Depois de ter feito isso, clique em Ctrl + F no seu teclado, e irá aparecer uma caixinha de busca, então procure pelo seguinte código:
<div class='comments' id='comments'>
2- abaixo dessa linha acrescente esse código:
<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

O número em vermelho você irá determinar a largura do formulário de comentários do Facebook. Só altere esse número se você souber a medida do espaço que tem para os formulários.

3- Agora procure pela seguinte tag:
<head>
4- Logo abaixo cole esse código:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_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>
 5- Agora salve tudo, e depois procure pela seguinte tag:

]]></b:skin>
6- Logo acima dela, cole esse código:
.comments-page {  background-color: #FFFDF2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #FFFDF2;}
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #F5FCFE;}
.inactive-select-tab { background-color: #FFFDF2;}
Entenda:  
Em amarelo é o fundo da área do comentário.
Em verde é a cor do botão Facebook, Comentários.
Em azul é a cor do botão quando passar o mause em cima.
Em Roxo é a cor do botão quando selecionado.

Agora salve clicando no botão laranja, e pronto. Agora já está funcionando o seu novo modelo de formulário de comentários, integrando Blogger e Facebook ao mesmo tempo.

Observações: Para funcionar perfeitamente, recomendo que escolha a opção de moderar comentários do Blogger e retire a verificação de palavras.
Não é possível, segundo esse modelo, moderar os comentários feitos no Facebook.
Créditos: Ferramentas Blog
Comentários
6 Comentários

6 comentários:

  1. adoreeeeeeeeeei saber disso :O
    beijoss
    www.portefeminino.blogspot.com

    ResponderExcluir
  2. Muito bacana este sistema néah!!!
    facilita a vida da gente..
    Estou seguindo acabei de montar um blog
    ajuda seguindo??
    http://momentsofteens.blogspot.com.br/

    ResponderExcluir
  3. AAAI VOU USAR***** QUE MASSA

    TO SEGUINDO AKII PODERIA RETRIBUIR A VISITA ?

    http://bellalautner.blogspot.com.br/

    ResponderExcluir
  4. Ai finalmente achei um tutorial que funcione!
    Procurei tanto por ele, valeu *---------*

    Beijinhos~~> Unicorns of Plush

    ResponderExcluir
  5. O tutorial é muito bom, super bem explicado ^^
    Fiz no meu blog e deu super certo :33

    1-maginer.blogspot.com

    ResponderExcluir

- Fique a vontade para comentar, mas seja sempre educado(a)
- Seu comentário precisa ser relacionado com o assunto do post, caso não seja use a Cbox AQUI :)
- Não falar palavrões e não ficar criticando.
- Se for dar sugestões que seja para a melhoria do blog.
- Quer Parceria? então siga meu blog e coloque meu banner e me avise.
- Deixe a URL do seu blog para que eu possa retribuir.
- Não precisa pedir pra seguir que eu vou.
- ah e Não participo de concursos,e tags NÃO INSISTA!