Janela pop up de curtir a fanpage para blog

em 25 de junho de 2014

Há algum tempo ensinei aqui no blog como colocar o box de curtir do Facebook.
Relembre:
Como colocar o box de curtir do Facebook no blog

O resultado é o que você confere ali ao lado, em minha sidebar.
Assim:


Mas sempre me pediam para mostrar como colocar a mesma caixa abrindo em janela pop up.
Eu relutei porque na verdade não gosto do recurso, acho invasivo.
Não gosto quando entro em um blog e de cara abre aquela janela para curtir ou assinar o feed.
Mas reconheço que a estratégia é muito eficiente, e pode levar a um aumento muito significativo no número de curtidas que uma fanpage recebe.

Então, depois de pesquisar e fazer algumas alterações para ficar fácil de entender eu cheguei a esta caixa que abre em janela pop up e que compartilho com você.
Vou disponibilizar 2 versões: uma com cookies e outra sem.
A versão que utiliza cookies está configurada para abrir uma vez por dia para cada visitante, 1 vez por navegador, bem entendido.

Se você abrir o mesmo blog em cada navegador diferente é claro que a caixa vai aparecer em cada navegador, mas será uma vez por dia apenas, por navegador.
Já minimiza muito a questão da invasão.

A outra versão é idêntica, mas abre toda vez que o visitante acessar o blog ou recarregar a página.
Fica a seu critério qual escolher.

Você pode conferir como fica clicando no botão abaixo:


Demonstração do tutorial




Para instalar é muito simples.
Acesse seu painel e clique na aba Layout.
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Na janela que expandir cole o código abaixo.

Copiar o código-versão com cookies


Esta é a versão com cookies.
Isso significa que a caixa só vai aparecer de vez em quando para cada leitor.

Para copiar a versão sem cookies, que abre sempre que o leitor acessar o blog, copie este código:

Copiar o código-versão sem cookies


A forma de inserir é a mesma.
Você pode alterar cores e fontes, caso tenha o mínimo de conhecimento em CSS.
Isso é opcional.
Mas onde marquei em capslock vermelho é imprescíndivel que você altere, ok?
Precisa ser o nome de sua fanpage.
Não pode ser perfil, só serve fanpage.
E não é o endereço completo, é só o nome.
A minha, por exemplo, é  https://www.facebook.com/ElaineGaspareto sendo que ElaineGaspareto é o nome da fanpage.
Então é esse nome que eu coloquei onde pede no código.
Coloque o seu, entendido?

Também precisa alterar onde marquei em capslock azul. Coloque ali a mensagem que você desejar.

Depois de feitas as alterações salve, arraste para onde desejar e salve as alterações no Layout.
Não importa onde colocar, tá? Ela sempre abrirá no centro da tela.

Dica importante:
Caso seu blog use algum script que funcione à base de JQuery pode haver conflito e o box não aparecerá.
Slides em geral conflitam com o box, é preciso testar antes pois cada blog tem suas particularidades, ok?

Quer ver mais posts com dicas referentes ao Facebook?
Clica:
http://www.elainegaspareto.com/search/label/Facebook

Gostou?
Dá um Like aí!


Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

60 comentários , comente também!

  1. Sempre tive uma duvida, como colocar adsense no cabeçalho do blog, igual no seu!

    ResponderExcluir
    Respostas
    1. Eu fiz uma alteração, dividi o header em 2.

      Excluir
  2. Elaine, muito obrigada pelo tutorial, me ajudou muito. Escolhi a versão com cookies, mas não encontrei o capslock vermelho. Será que você pode me ajudar? Desde já, obrigada.

    ResponderExcluir
    Respostas
    1. Candie, releia o código até o final, o trecho está destacado nele.
      Bem no final, tá?
      bjssss

      Excluir
  3. Oi Elaine!
    Adorei a dica!
    Mas também me sinto meio desconfortável em colocar...pelo menos por enquanto.
    Embora o fato de só abrir "apenas uma única, simples e mísera vez por dia" (olha eu me justificando! kkkk) deixe essa janelinha mais tentadora!
    Vou pensar mais um bocadinho e, se colocar no blog, te conto!
    Obrigada e beijinhos,
    Cris

    ResponderExcluir
  4. Muito bom adorei!

    http://midnightsun-layouts.blogspot.com.br/

    ResponderExcluir
  5. Elaine, em primeiro lugar quero parabenizar pelo seu excelente trabalho que já me ajudou demais!!! E lendo esse post acho que irei colocar o PopUp Curtir dessa forma tb. Mas quero pedir uma coisa não achei aqui no blog, é como fazer: (menu do blogger encostado topo pagina ao rolar scroll) Seria o menu depois do cabeçalho normal, mas ao rolar o scroll ele acompanha e fica depois no topo. Desde já agradeço!!! :)

    ResponderExcluir
    Respostas
    1. Esse tutorial eu ainda não fiz, mas está nos planos :)

      Excluir
  6. Elaine, como colocar esse popup curtir iagual ao do seu blog, no rodape cantinho direito do blog? Bjs

    ResponderExcluir
    Respostas
    1. Sim, esse tutorial tem no blog, dá uma olhada nas Dicas para blogs :)

      Excluir
  7. No meu blog não está dando certo, não aparece pra curtir a página, aparece apenas a caixa e a mensagem mais curtir que é bom nada.... não teria outra forma de colocar no meu blog, sem ser essa?

    ResponderExcluir
  8. Instalei a popup mas não gostei, agora tento excluir mas não tem jeito. Já fiz de tudo. Exclui o código mas ela permanece na página. O que fazer??

    ResponderExcluir
    Respostas
    1. Gilson, em geral basta excluir o gadget e salvar as alterações.
      Você salvou depois de excluir?

      Excluir
  9. Eu sempre pensei em colocar , mas como você acho invasivo , mas realmente imagino que dê resultados.
    Beijinhos
    Deus abençõe

    ResponderExcluir
  10. Sim, exclui e depois salvei. O gadget HTML/java tá em branco e mesmo assim ele continua na página. Alguma sugestão??

    ResponderExcluir
    Respostas
    1. Gilson, eu nunca vi isso.
      Não sei o que pode haver, mas sugiro que procure pelo widget dentro do código fonte e o exclua.
      Mas repito: se excluiu de fato então não sei o que pode ser, lamento.

      Excluir
  11. Também acho invasivo. Mas vou usar por um tempo, como alternativa para melhorar os acessos.
    Obrigadíssima, deu super certo!
    Beijo!

    ResponderExcluir
  12. Elaine ! quero te agradecer pelas otimas dicas que voce disponibiliza para os blogueiros de primeira viagem (assim como eu) tenho aprendido muito as suas postagens e estou conseguindo personalizar o meu blog, muito obrigado por compartilhar o seu conhecimento conosco

    ResponderExcluir
  13. Eu coloquei direitinho o código... troquei a parte em vermelho e a parte em azul. Mas quando entro em visualizar o blog não aparece nada.. :( A parte em vermelho faz diferença se eu colocar tudo em minúscula? Pq foi assim que coloquei.. Outra coisa, tem uma letra f antes da palavra em vermelho... Tira ou deixa? Porque eu deixei... somente alterei mesmo o nome em vermelho... mas não vejo nada.. demora algum tempinho para aparecer?

    ResponderExcluir
    Respostas
    1. Marina, aparece na hora, tem que colocar o endereço da fanpage exatamente como ele é e não pode tirar o F do código.

      Excluir
  14. Eu tenho dúvidas de como mudar essas imagens que referem-se normalmente aos últimos posts e ao clicar te leva ao post indicado, mas a imagem é você que escolhe (como apresentação de fotos).

    Não achei por aqui, você pode me ajudar ?

    ResponderExcluir
    Respostas
    1. Procure aqui nas dicas para blogs a categoria Slides, e especificamente Slide destaque, creio que é isso...

      Excluir
  15. Amei a dica! Vou experimentar e ver se dá resultado. Fui testando, tentando e consegui mudar o visual pra ficar como eu queria. Muito obrigada por compartilhar! =)
    www.gabrielamacedo.com

    ResponderExcluir
  16. Adorei! Vou aplicar ao meu agora! Obrigada pelas dicas! Beijinhos!
    http://paixaodeleitora.blogspot.com.br/

    ResponderExcluir
  17. Obrigada pelo tutorial, acho muito mais simples por gadget !!
    Acho que para impulsionar curtidas é bacana sim, o pessoal nem sempre olha barra lateral e etc!
    Mari
    http://blog.maricomio.com.br

    ResponderExcluir
    Respostas
    1. O meu funcionou dois dias apenas :/ O que será que aconteceu ?

      Excluir
    2. Mariana, tem certeza?
      Olhei seu blog e pra mim apareceu normalmente...

      Excluir
  18. Já tentei de tudo quanto é tipo de modos que vc disponibilizou e nenhum deu certo :(
    O ultimo que tentei foi o da janelinha igual a sua no canto da página, mas aparecia só a chamada e o resto em branco... Mas Eu quero mesmo é que apareça a janelona na hora de abrir kkkkkk maqs tb não consegui!!!

    ResponderExcluir
    Respostas
    1. Gerliane, será que você não está deixando passar nada? Talvez tenha esquecido algum detalhe...

      Excluir
  19. o meu deu certo mais o que eu faço para a versão sem cookies. so que aparece na pagina inicial e quando clico nas postagens tambem como faço para ficar so na inicial.

    ResponderExcluir
    Respostas
    1. Maurício, veja a resposta no comentário abaixo.
      Att.

      Excluir
  20. por favor me ajuda como faço pra deixar somente na pagina inicial ? seu blog ta ótimo bjs !

    ResponderExcluir
    Respostas
    1. Tiago, precisa aplicar ao código a condicional que faz isso.
      Procure aqui nas dicas para blogs a postagem Condicionais do Blogger, lá tem as informações de como aplicar.
      bjssss

      Excluir
  21. Elaine, que lindo! Mudei algumas configurações para combinarem com o layout e deu certinho!!!! Obrigada!
    Tenho visto muitas dicas legais no seu blog. Já até apliquei algumas no meu e ficaram excelentes. Obrigada por compartilhá-las conosco.
    Abraços
    Carolina
    http://belotur.blogspot.com.br

    ResponderExcluir
  22. Boa noite Eliane!!!
    Mais uma vez venho agradecer, por seus tutoriais que sempre me salvam...
    Hoje que tive tempo de tentar colocar e funcionou perfeitamente.
    Deus abençoe!!!
    Tenha um ótimo feriado!!!
    Bjokas...da Bia!!!

    ResponderExcluir
  23. Boa noite! Elaine!!!
    Gostei muito do seu blog, é super legal design e dicas.
    Feliz 2016, um grande abraço e até mais.

    ResponderExcluir
  24. Amei. XD Testei e deu certinho. Decidi mudar meu blog, estou mexendo em várias coisas. Essa é uma das coisas que será muito útil. Muito obrigada. XD

    ResponderExcluir
  25. Gente, por favor, me ajudem, eu quero tirar esse pop up de curtir a fan page, e eu removi todos os códigos mencionados nesse post, mas continua, como eu faço para remover?

    ResponderExcluir
  26. Infelizmente no meu segundo blog não funcionou.

    ResponderExcluir
  27. Oieee Cherry, fiz certo aparece o layout da caixa apenas com a mensagem: Encontre nos no facebook que coloquei, mas o restante não e meu endereço está certo pq.colei da minha página no face...

    ResponderExcluir
  28. funcionu muito obrigado elaine. bjs

    ResponderExcluir
  29. Como faço pra colocar no meu blog do tumblr? ja tentei e nao aparece :(

    ResponderExcluir
    Respostas
    1. Fabiana, esses códigos se aplicam somente ao Blogger.

      Excluir
  30. OI ELAINE, TUDO BEM?
    PARABÉNS PELO BLOG, SEMPRE QUE PRECISO DE ALGUMA DICA É AQUI QUE EU ENCONTRO.
    ALÉM DE DAR SEMPRE CERTO, VOCÊ É OBJETIVA E EXPLICA BEM DIREITINHO. AMOOO!

    OBRIGADA POR COMPARTILHAR COM A GENTE SUAS DICAS.

    BEIJOS, QUE DEUS TE ABENÇOE!

    PABLINE TORRECILLA
    www.blogpalavrafeminina.com.br

    ResponderExcluir
  31. Minha dúvida está somente onde eu edito o tamanho dele. Alguém disponível a ajudar

    ResponderExcluir
  32. legal muito bom. Mas voc~e sabe como fazer a mesma janela mas somente quando a pessoa vai sair do site e em vez de uma fã page, se dá pra usar link do canal do youtube.

    ResponderExcluir
    Respostas
    1. Rodolfo, tem um tutorial assim aqui no blog.
      Procure na categoria Facebook.
      Acho que sim, pode trocar o iframe do Facebook pelo código do botão de inscrição do Youtube, mas nunca testei.

      Excluir
  33. oi elaine tudo bem?
    gostei muito do seu blog, e queria te fazer um pedido.
    você quer fazer parceria com meu blog
    ele é sobre curiosidades tou começando agora
    obrigado.

    ResponderExcluir
    Respostas
    1. Edward, no momento fico devendo, eu não faço parcerias...
      Atenciosamente

      Excluir
  34. Primeiramente, parabéns pela simplicidade. Criei o meu blog em um experimento universitário no meu curso de jornalismo, porém resolvi continuar alimentando-o e desde então venho tornando ele mais "multimídia" porém acessível em qualquer plataforma e para isso tenho utilizado tutoriais que me ajudem 100% ( sou uma negação com HTML) as suas dicas foram perfeitas e já estou utilizando veja como ficou : www.altotaquariempauta.com.br e fique a vontade em entrar em contato para dar dicar. Super Obrigado

    ResponderExcluir
  35. Muito obrigado pela dica, já o testei e agora é ver se o público gosta :) Caso veja que está a ser um transtorno para quem me visita, retiro. Mas espero que seja bem aceite e os likes aumentem um pouco ;)
    Beijinhos...
    Blog: Guloso qb

    ResponderExcluir
  36. Ola Muito bom seu blog, parabens. fiz tudo certinho mas da uma mensagem quando abre a janelinha que a URL não é válida como uma página do facebook. Quero tambem propor trocas de links com você

    ResponderExcluir
    Respostas
    1. Ramon, você colocou o endereço da fanpage? Não pode ser do seu perfil, tem que ser fanpage, ok?
      Eu não faço troca de links... desculpe, fico devendo...
      Atenciosamente

      Excluir
  37. parabéns , deu certo no meu site, se possível, tem alguma forma de fazer com que as pessoas que ja curtiram a página, não recebam mais o popup

    www.festivaltropicalia.com.br se quiser visualizar pra ver como ficou.

    grato

    ResponderExcluir
    Respostas
    1. Flavio, não tem como, não que eu saiba ou tenha testado...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…