10/03/2012

Tutorial: comentário do Facebook e do Blog ao mesmo tempo

(22) Tumblr

Olá gente. 
Eu acho que alguém já deve ter percebido hoje que os comentário daqui do PHANNY TEEN mudaram! Quer dizer não totalmente, mas foi acrescentado os comentários do facebook *-* Mas por quê? Porque simplesmente é uma maneira ótima de divulgar o blog através do face, já que o assunto da internet é redirecionado a ele. A parte boa que gosto desse código é que você não perde os comentários do blog Ah! Sem esquecer de agradecer ao Dicas para blogs (recomendo) Quer ver só?





Primeiro você terá que ter o código ID do seu Facebook e não da sua Fan Page! Adquira acessando este site www




Agora vamos aos seguintes passos em seu blog:

Modelo - Editar Html - Ctrl+F ou F3 e procure por:

<div class='comments' id='comments'>

Irá aparecer duas vezes. Na primeira vez em que aparece, cole abaixo dele, o seguinte o 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://i62.tinypic.com/16q87o.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://i57.tinypic.com/acu39y.png'/> <data:post.numComments/> comentário(s)
</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='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
vermelho: imagem do logo do Facebook
verde: imagem do logo do Blogger
violeta: largura do formulário de comentário

Visualize para ver se não deu erro em seu blog e, depois salve!

Se não der certo usando a primeira vez em que o código <div class='comments' id='comments'> aparece  teste na segunda vez  o mesmo código: <div class='comments' id='comments'>

e abaixo desse código, cole o mesmo 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://i62.tinypic.com/16q87o.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://i57.tinypic.com/acu39y.png'/> <data:post.numComments/> comentário(s)
</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='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Exemplo:


Você poderá alterar os seguintes itens:

vermelho é a url da imagem do facebook
verde é a url da imagem do blog
violeta você vai alterar a largura dos comentários como quiser

Não dará para ver o resultado clicando em visualizar, mas mesmo assim clique, pois assim você verá se aconteceu algum erro em seu blog. Se não deu nada de errado, salve!

Não acabou! 

Clique em Ctrl+F e procure por: </head> e acima dessa tag cole o seguinte 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>
Exemplo:



O que marquei de 
vermelho no código é do primeiro passo que eu lhe disse no começo do tutorial, e que eu pedi para você guardar, lembra? Pois é, você vai substituir o YOUR_FB_ID pelo código do ID do seu facebook que você guardou no início do post. Feito isso, salve!

Ainda não acabou

Ctrl+F novamente e procure por: ]]></b:skin> e acima dessa tag cole o seguinte código:
.comments-page {background-color:#fffcfc;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #fffcfc;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #fffcfc;}
.inactive-select-tab { background-color: #fffcfc;}

Exemplo:



Ufa ... Esse foi o último passo!

• Lembrando que se você modera os comentários assim como o PHANNY TEEN modera, não irá acontecer com os comentários do Facebook, pois eles não são moderados, apenas as do blog. 
Sempre que alguém comentar irá uma notificação em seu Face.




Só para fazer foi mais de 1 hora escrevendo isso aqui kkkk' Só pra sair direitinho para vocês :D
Beijos e espero que tenha gostado. 



14 comentários:

  1. Oi, fofa. Amei o tutu, muito legal. Tudo bem explicadinho do jeito que gosto! hihi

    Gostaria que me ajudasse votando no Vida de garota mais uma vez, pois graças a vocês que nos ajudou na 1°etapa, fomos para 2° etapa, então peço que nos ajude novamente !!
    Clique Aqui A enquete está na barra lateral.
    Quando precisar, me avise que te ajudo, também. Obrigada!

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  2. e bom, esse tutorial por que tem gente que nao tem a conta do blogger, mais a conta do face.
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  3. Ah! Já ia esquecendo de comentar que Sempre que alguém comentar irá uma notificação em seu face.

    Beijos :*

    ResponderExcluir
  4. Amo <3
    Ei linda,segue de volta ?

    http://atualizadasbr.blogspot.com

    ResponderExcluir
  5. Aaah,fui sua seguidora 500 <3

    http://atualizadasbr.blogspot.com

    ResponderExcluir
  6. Que ótimo! Bem legal essa de comentar pelo fb *O*

    Beijos,
    theplugados.blogspot.com

    ResponderExcluir
  7. Obrigada por ter votado em mim fofa, se algum dia precisar pode contar comigo! ^^

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  8. adorei xará,vou juntar os meus quando reformar,aqui só tem tutorial bom,vontade de fazer todos de uma vez,haha *-*

    Beijos,
    http://theperfect-girls.blogspot.com

    ResponderExcluir
  9. Amei esse post e tudo aqui, esse lay é perfeitão.
    cutesandlove.blogspot.com

    ResponderExcluir
  10. Obrigado por mais esse tutorial super útil! Deu super certo. Achei que ia ser complicado mas na verdade foi bem fácil!
    Abç

    adraftbox.blogspot.com

    ResponderExcluir
  11. Olá, gostaria de agradecer pelo tutorial e pedir para que me tire uma dúvida:

    Quando eu faço o primeiro passo pra criar o App - colocando o nome do blog, selecionando a caixa abaixo e clicando em confirmar - aparece uma caixa assim "Host your site with Heroku", deixei o padrão - PHP e um e-mail meu - e cliquei em "Criar".

    Mas quando eu tento sair da página pra pegar o App/ID aparece uma janela perguntando se eu quero sair da página sem salvar as alterações. Cliquei em não, coloquei o nome do meu blog, tentei salvar mas deu um erro assim:

    "Error
    glowing-mountain-7534.herokuapp.com must be derived from your Site URL or your Mobile Web URL."

    Não tem problema isso? Desculpa pela dúvida meio complexa, mas já tentei de tudo pra colocar as caixas de comentário no meu blog e nunca consegui até hoje, tô até meio desesperado >.<

    Outra coisa, não achei a opção de comentar pelo facebook aqui, como faço?

    ResponderExcluir
  12. Não conseguir :\

    - Visite meu Blog: http://gah-principe-hype.blogspot.com/

    ResponderExcluir
  13. Adorei *----* obrigado pela visita, volte sempre !

    Visite o Blog: http://gah-principe-hype.blogspot.com/

    ResponderExcluir

Olá! Obrigada pela sua visita e comentário. Só peço que não venha com palavras de baixo calão!

Agradeço, desde já!♥