como colocar comentários do facebook no blogger

hoje vou explicar como usar e moderar sistema de comentários do Facebook no Blogger.

Incluir o sistema de comentários do facebook, é um excelente aliado para gerar mais visitas no seu blog, e pode ajudar ainda mais na divulgação do seu conteúdo, afinal, cada pessoa que comenta no seu post usando o sistema de comentários do facebook, está, automaticamente, divulgando no mural o conteúdo que acabou de comentar.

A seguir, vou ensinar como incluir esse sistema de comentários, sem duplicar os comentários em todos os posts, sem necessidade de desativar o sistema de comentários do blogger, bem como ensinarei uma forma de moderar todos os comentários recebidos.

usar e moderar sistema de comentários do Facebook no Blogger

Atenção: Antes de prosseguir com este tutorial, para que o sistema de comentários do Facebook funcione corretamente no seu blog, é necessário criar um aplicativo (App)do Facebook e já ter instalado o código SDK Javascript, bem como já ter instalado e configurado o código do aplicativo no html do seu blog.

Se ainda não criou, então leia este tutorial ? Criar aplicativos do Facebook para usar no blog e siga todos os passos, pois você precisará da ID do seu aplicativo para utilizar corretamente o sistema de comentários do Facebook que você vai instalar.

1. procurar apertado "Ctrl F" no campo de busca você procura:

<div Class='comments' id='comments'>

2. colar o código em abaixo dessa Tag   <div Class='comments' id='comments'>  Em alguns templetes você terá que colar isso na segunda ocorrência dessa Tag ai você vai ter que testar.

Bloco 1 - <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'> <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'>

3. localize Apertando "Ctrl F" agora a Tag

</head>
E logo acima dessa Tag cole o seguinte bloco de códigos:


Bloco 2- <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>
neste bloco de codigos no "SEU ID" coloque o id do aplicativo que você criou no https://developers.facebook.com/apps

4. Agora pra terminar voce tem que colocar o estilo da sua caixa de comentarios:
localize a tag:
  ]]></b:skin>
e logo acima dela coloque este bloco de código:

Bloco 3 - .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;}

neste ultimo bloco de códigos você pode mudar as cores, e no primeiro bloco de códigos você pode ta alterando o tamanho da caixinha na tag <fb:comments expr:href='data:post.url' num_posts='3' width='450'/>   que vem no padrão '450' de acordo com sua preferencia.
e o numero de postagens que vem no padrão '3'

5. moderando os comentário: para moderar os comentários acesse:
https://developers.facebook.com/tools/comments

vídeo explicando passo a passo:

Se gostou comente, compartilhe. Obrigado

COMPARTILHAR:

Curtir

+1

Tweet

Tweet