29 junho 2012

Tutorial para blog : Como colocar a caixinha de comentário do facebook no blog !

Olá pessoal , tudo bom ?
Ainda estão resfriada , por isso estou entrando pouco aqui ! =/
Mais s Deus quiser semana que vem eu volto com muitos post , Makes , vídeos tutoriais e muito mais .. hehe'


Então no post anterior uma leitora minha perguntou como eu fazia pra colocar a caixinha de comnetário do Facebook no blog, e quando fui entrar nos meus email tinha mais 5 perguntando também , então hoje resolvi ensinar pra vocês como eu fiz !


No meu caso eu achei em um site então os créditos vão ser todo para esse site ok !!!!
________________________________________


Primeiramente você tem que criar um 
aplicativo no Facebook !
Para conseguir colocar os comentários do facebook no blogspot você precisa criar um aplicativo no facebook antes de alterar qualquer código HTML no seu blog. Nós já falamos sobre Aplicativos do Facebook para Blogs e Sites - Social Plugins, mas apenas dando uma visão geral sobre o assunto. Mas muitas pessoas têm dificuldades em criar esse aplicativo por isso vamos mostrar com mais detalhes.

Antes de criar o aplicativo de comentários do facebook você precisa verificar sua conta no facebook, isso pode ser feito cadastrando o numero do seu telefone celular. Após isso entre na pagina de gerenciamento de aplicativos do facebook, clique em novo aplicativo e preencha as informações pedidas (nome do seu aplicativo). Lembre-se na segunda linha não pode usar letras maiúsculas nem espaços. Depois disso você verá algumas letras de confirmação e apenas digitá-las e confirmar já está na pagina de configuração do seu aplicativo do facebook.

aplicativo de comentarios do facebook no blogger

Aqui precisamos colocar o endereço do blog que vamos utilizar os comentários do facebook. No campo App Domains você deve usar o endereço do seu blog sem o http:// mais abaixo no campo de texto Website with Facebook Login deve usar o endereço completo do seu blog.

App Domains: dicasdesitesuteis.blogspot.com
Website with Facebook Login: http://dicasdesitesuteis.blogspot.com

Mas atenção se o seu blog foi criado antes de alteração de domínios do blogger para cada paísvocê deve usar o endereço blogspot.com e não o endereço blogspot.com.br (no caso do Brasil). Nos testes que fizemos usando o endereço http://dicasdesitesuteis.blogspot.com.br/ apareceu uma mensagem de erro ao criar o aplicativo do facebook. Portanto use o seu endereço padrão do blogspot.
fazer aplicativo do facebook para colocar comentarios no blog

Claro que isso não vale para os blogueiros que usam domínio próprio no blogger como, por exemplo, nosso blog de frases que usamos o endereço desta forma:

App Domains: www.frasescurtas.com.br/
Website with Facebook Login: http://www.frasescurtas.com.br/

Então preencha corretamente essa pagina de criação de aplicativo e clique em salvar. Agora copie o numero do id do aplicativo.

numero do id do apps do facebook

E agora você pode usar esse numero do aplicativo para colocar os comentários do facebook no blogger.




Usando o Comentário do Facebook no blog !




usar comentários do blogger e do facebook juntos


Nós vamos colocar os códigos para mostrar os comentários do blogger e facebook juntos no seu blog. Na verdade são 3 partes de códigos, mas recomendamos colocar uma por vez e salvar antes de inserir a próxima, pois no teste que fizemos colocando as 3 partes de uma vez deu erro na hora de salvar, mas fazendo uma por vez funcionaram perfeitamente os códigos HTML, CSS e javascript no blogger.

Recomendamos fazer um backup do seu template antes de fazer modificações no seu blog. Agora entre na pagina editar HTML e marque a opção expandir modelo de widgets.

Procure pela linha <div class='comments' id='comments'> (se achar mais de um utilize o que estive mais no inicio do html) e coloque depois dessa linha o seguinte 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='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Depois que fizer o teste você pode ajustar a largura da caixa de comentários alterando o valor 450 e também o numero que comentários do facebook que aparecem no seu blog trocando o numero 3, neste trecho: fb:comments expr:href='data:post.url' num_posts='3' width='450'/

Clique para salvar e procure por </head> e coloque antes dele esse código, mas troque a parte YOUR_FB_ID pelo id do seu aplicativo no facebook como mencionamos no inicio deste post:

<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>


Salve novamente e procure por ]]></b:skin> e insira esse estilo CSS antes dele:

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

Agora é só salvar mais uma vez e visualizar seu blog que já está tudo pronto e agora seu blog vai mostrar os comentários do facebook e blogger ao mesmo tempo.



__________________________


Pronto pessoal , é assim que funciona. é bem complicadinho mais se vocês tiverem bastante calma e fazer tudo direitinho vai resolver !

Lembrando que os créditos desse post vai para o site Dicas para blogs

Espero que tenham gostado e façam no de vocês também !
Beijos e até a próxima 

Postagem mais recente Postagem mais antiga Página inicial

5 comentários:

  1. infelizmente pra mim não dá certo, ainda não consegui encontrar o erro =/

    ResponderExcluir
  2. Gente, muito obrigada mesmo pelo tutorial. Estava louca pra colocar os comentários do face no blog, mas e primeira não consegui, mas agora sim deu certo. Obrigada mesmo, beijos

    http://facamake.blogspot.com

    ResponderExcluir
  3. ahhhhhhhhhhhhhhhh muito bom..tava doida pra saber como fazia isso .)
    beijos e boa semana!!

    http://www.cosasde-ladydiva.com/

    ResponderExcluir
  4. Eu prefiro comentar só pelo blogger mesmo! Mais fácil rs

    Beijos,
    Caroline, do http//criticandoporai.blogspot.com

    ResponderExcluir

Obrigado pelo seu comentário . Ele é muito importante pra mim *-* Deixem sempre o link do seu blog para retribuir a visitinha . E sempre respondo seus comentários aki no blog. Então se você postou aki , volte para vê a resposta . Beijos Flores !

# Compartilhar

Twitter Facebook Google Plus LinkedIn RSS Feed Email Pinterest

A Blogueira!

A Blogueira!

Novo Vídeo .

Seguidores

Marcadores

Amigo Secreto Andreza Goulart Animal print Antes e Depois Aplicativos Auto Maquiagem . Avon Batalha de Look´s Batom Batom da vez . BBB Blazers Blogueiras Iniciantes Book Cabelos . Cachos Camera Nikon canal Carnaval CeA Celular Conhecendo Gurus. cozinhando com a jaque Curiosidades Davi Lucas De ollho no look: Deco decoração Decoração quarto Desabafo Desafio Desafio das blogueiras. Descobrindo Sites Dica de make Dica do Amor Dicas de vídeo . Diversão Divulgando Sorteios . DIY Enquete Entrevista Erros de Maquiagem Esmaltes Eu pergunto. Blogueiras respondem . Faça Você mesma Famosos Feliz Páscoa. Filho Pedro . flagras Flash Make Up Foto do dia Foto Tutorial Fotografia. Ganhei sorteio.. Gato da Semana . Homenagens . Inspiração Maquiagem . Inspirações . Instagram Inverno iphone JaquelinePoraí Kim Kardashian Lançamento Lari Shop Lição da Semana . Look dos famosos . Look para gravidas. Look´s Look´s Inspirações . Lookbook.nu Maquiagem Maquiando clientes . Maybelline Meu Aniversário Meus Selinhos *-* Meus Trabalhos Meus vídeos . Minha Gravidez Minha loja de Maquiagens Minhas Comprinhas *-* Minhas Makes. Moda Mudança de visual . Nail Art Tutorial Namorado Natal e Ano Novo Natura Novela Novela salve Jorge Novidades . O que pode ou não pode na gravidez. Oxford PALETA DE SOMBRA Papo de Mãe Parcerias . Páscoa . Passatempo Pedro Penteadeira Penteadeira. Photoshop Pousada Preconceito . PrimaveraVerão Primeiro post Publieditorial Quem Vestiu Melhor ? Receita do dia . Resenhas . Review Ricardo Eletro Sapatos SEGUIDORES Sigma Sneakers Sobrancelhas . Sorteios StyleHaulMundo Tag. tatuagem Templates personalizado Tendência Tendência Mullet Tendências de Make Testei. Tirando dúvidas Top Five . Transformação TRESemmé TUTORIAIS Tutorial para Blog. Tutorial Photoscape Twitter do blog UNHAS Unhas da Semana Unhas inspirações Valeu-Falasério Verão Vestido de Noivas. Vida de Casada Videos vídeoTutorial Vult Cosmética Wishlist Xuxa Youtube
Secret
Secret
Tecnologia do Blogger.

Populares

Copyright © jaquinha | Traduzido Por: Mais Template - Premium Blogger Templates