Como colocar comentários do Facebook junto com os do blog
Autor: Marcy Moraes | Publicado: 2015-12-02T13:24:00-03:00




Olá cherrys! Primeiramente, antes de começar o tutorial vou falar que farei uma mudança de datas de postagens aqui no blog, eu defini quer iria postar as terças e aos sábados, mas como vocês sabem eu criei um novo blog (quem quiser visitar clique aqui) e eu queria dar mais atenção a ele, então decidi que irei postar aqui no Sweet as quartas e aos sábados. Agora vamos ao post.



O tutorial de hoje foi um pedido da&nbsp;Camila Lima do blog Segredos da Cáh, ela pediu um&nbsp;tutorial de como colocar comentários do Facebook no blog, pesquisei, fiz vários testes e o único que funcionou é o qual irei postar que é&nbsp;Como colocar comentários do Facebook junto com os do blog.



Primeiramente vá nesse link abaixo:

https://developers.facebook.com/apps

Você será redirecionado para uma página de aplicativos do Facebook.



Se é a primeira vez que você entrar nesse link ele aparecerá assim:



Então é só clicar em Register Now.



E logo depois irá abrir uma janela assim:



E você irá clicar onde estar indicado na imagem, assim você irá aceitar a politica de privacidade. E logo depois clique em Cadastre-se. E em Concluir.



Vai aparecer isso aqui:



E é só clicar na imagem onde está WWW&nbsp;Website.



Logo depois aparecerá essa página:



Aqui você clica em Skip and Create App ID&nbsp;como indicado na imagem.



Logo aparecerá essa janela:



Onde está escrito Nome de exibição&nbsp;coloque o nome do aplicativo ou do seu blog

Onde está escrito Namespace&nbsp;é onde você pode colocar um nome de identificação para seu aplicativo, se caso colocar, coloque tudo junto.

E escolha a categoria.



E depois clique em Crie um ID do Aplicativo. Depois aparecerá uma Verificação de Segurança, veja o que pede e clique em Enviar.



E irá aparecer uma página com o ID do aplicativo.



Deixe reservado essa página.



Agora vamos para parte do tutorial que vamos colocar os comentários do Facebook no blog.



Vá em Modelo&gt;&gt; Editar HTML&gt;&gt; clique dentro da caixa de código e aperte Ctrl+F e procure por:

&lt;div class='comments' id='comments'&gt;

Em alguns caso esse código aparece duas vezes, então você tem que testar em qual das duas você vai utilizar. No meu caso o segundo é onde funcionou o código.



Abaixo dessa linha cole o seguinte código:

&lt;div class='comments-tab' id='fb-comments' &nbsp;onclick='javascript:commentToggle(&amp;quot;#fb-comments&amp;quot;);' &nbsp;title='Comentários no Facebook'&gt;&lt;img class='comments-tab-icon' src='http://1.bp.blogspot.com/-gnieoeKGabg/UtTzC6E-XaI/AAAAAAAAXSU/rHuJmbZcrmc/s1600/%C3%ADcone+do+Facebook.png'/&gt;&lt;fb:comments-count expr:href='data:post.url'/&gt; Comentários&lt;/div&gt;&lt;div class='comments-tab inactive-select-tab' id='blogger-comments' &nbsp;onclick='javascript:commentToggle(&amp;quot;#blogger-comments&amp;quot;);' &nbsp;title='Comentários no Blogger'&gt;&lt;img class='comments-tab-icon' &nbsp;src='http://www.blogger.com/img/icon_logo32.gif'/&gt; &nbsp;&lt;data:post.numComments/&gt; Comentários&lt;/div&gt;&lt;div class='clear'/&gt;&lt;/div&gt;&lt;div class='comments-page' id='fb-comments-page'&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;div id='fb-root'/&gt;&lt;fb:comments expr:href='data:post.url' num_posts='3' width='450'/&gt;&lt;/b:if&gt;&lt;/div&gt;&lt;div class='comments comments-page' id='blogger-comments-page'&gt;

Agora vamos procurar por:

&lt;/head&gt;

E cole o seguinte código acima dessa tag.

&nbsp;&lt;script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/&gt;&lt;script src='http://code.jquery.com/jquery-latest.js'/&gt;&lt;meta content='SEU ID' property='fb:admins'/&gt;&lt;script type='text/javascript'&gt;function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}&lt;/script&gt;

Onde está escrito SEU ID&nbsp;é onde você vai colar o ID do aplicativo, volte lá na página que eu falei que era pra deixar reservada e copie o ID e cole onde é indicado.



Depois disso vá em:

]]&gt;&lt;/b:skin&gt;

E cole o código a seguir acima dele.


&nbsp;.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;}

Você pode alterar o que está em negrito&nbsp;e depois é só salvar.

Verifique se deu certo, se caso não der certo, mude a posição aquele primeiro código que eu falei que havia dois, salve e verifique se deu certo.

Resultado





Bom pessoal espero que tenham gostado!



Créditos ao blog Elaine Gaspareto