Caixa pop up Like Box Facebook- aumente as curtidas de sua página!

em 1 de março de 2016


Quer aprender como colocar em seu blog um box pop up para que os visitantes do blog possam curtir a sua fanpage?
Então vem comigo, eu te mostro como é simples de instalar!
Ficará exatamente assim:


Demonstração do tutorial


E o melhor é que você pode optar de o box aparecerá toda vez que o visitante acessar seu blog ou se o box abrirá a um intervalo de 7 dias, por exemplo.
E mesmo esse intervalo pode ser redefinido para mais ou para menos, como preferir.
Vamos aprender?


Colocar box opo up para curtir fanpage no blog


Para começar copie este código:


Copiar o código



Agora vá ao painel administrativo de seu blog e clique na aba Layout.
A seguir clique em Adicionar um gadget, e dentre as opções escolha HTML/JAVASCRIPT.
Na caixa que expandir cole o código copiado.
Faça as alterações que explico abaixo e depois de pronto, salve.
Não importa onde o gadget fique, em qualquer lugar que ele estiver no layout dará certo.


Alterações a serem feitas:
A mais importante delas é colocar o endereço de sua fanpage no local onde está o endereço da minha: https://www.facebook.com/elainegaspareto
Troque a minha pela sua, não esqueça!

Alterações opcionais:
O código está configurado para exibir o box sempre que o blog for aberto, sempre que a página for atualizada ou sempre que algum link interno for clicado, tipo se alguém clicar para comentar, por exemplo.
Para fazer com que o box seja exibido a cada 7 dias altere essa parte do código:

$.cookie('popup_facebook_box', 'no', { path: '/', expires: 7 });

Onde está escrito no troque por yes e se quiser mudar a quantidade de dias do intervalo altere o número 7 para qual preferir.
Assim o box só abrirá de 7 em 7 dias para o mesmo IP e mesmo navegador, a menos, claro, que o seu leitor limpe o cache de seu navegador, use outro navegador ou use outra máquina..

Você pode também alterar a largura, a altura e a cor de fundo  (azul) de sua caixa. Pode alterar cor de fundo do plano geral, pode alterar a fonte.
Recomendo que só mexa nisso se tiver um conhecimento ao menos básico em CSS.
Está marcado no código onde alterar.


Salve as alterações.
Se tudo deu certo seu blog tem agora um box para curtir a fanpage, simples, limpo e sem complicação.
Legal, né?
Aproveita e ó: curte aí!!!!

Alguém que escreve. Especialista em si mesma. Leitora voraz. Blogueira apaixonada. Propriedade (atualmente) de 3 cachorras e um cachorrinho muito levado. Casada desde 1995 com o mesmo marido. Feliz.

22 comentários , comente também!

  1. Ótimo! Ficou linda a caixinha. Obrigada!

    ResponderExcluir
  2. Gostei. Vou abrir uma Fanpage qualquer dia desses.
    Valeu.
    joturquezzamuindial
    Beijos.

    ResponderExcluir
  3. Não consigo fazer esse processo, no meu caso sempre da erro...não aparece

    ResponderExcluir
  4. muito obrigada por essa força gostei muito.

    ResponderExcluir
  5. Olá Elaine ! Também não consegui fazer, não aparece. No código que aparece as frases a seguir eu preciso deletar além de alterar o nome do blog? /*--- COR DE FUNDO TOTAL--- */ /*--- COR DE FUNDO DO BOX--- */ /*--- LARGURA--- */ /*--- ALTURA--- */ /*--- ALTERE SE DESEJAR--- */ /*--- COR DE FUNDO DA ÁREA FECHAR--- *//*--- TAMANHO DA FONTE--- */ Tem de deletar isso tudo

    ResponderExcluir
    Respostas
    1. Aline, não precisa deletar.
      Releia o tutorial e se certifique que tenha feito tudo certinho e que não haja scripts que conflitem em seu blog.

      Excluir
  6. Acabei de fazer e deu certo, mas queria que o fundo geral ficasse transparente, como aparecia no seu, mas o fundo está como sólido. O que faço???

    ResponderExcluir
    Respostas
    1. Renata, olhei seu blog e com exceção da largura, está igual ao do meu exemplo.
      Qual fundo aparece sólido pra você?

      Excluir
  7. Oi deu tudo certo, OBRIGADA!
    Só uma duvida tem como deixar para aparecer só no inicio do blog?
    ou seja quando abrir outra página n aparecer novamente, pq tdu que clica aparece dnv
    deis de ja agradeço

    ResponderExcluir
    Respostas
    1. Por favor releia o tutorial, a informação está nele. Altere a área relativa aos cookies.

      Excluir
  8. Gostei imenso mas eu gostaria de tirar a cor azul ao redo, como faço

    ResponderExcluir
    Respostas
    1. No código está marcado a área editável, troque o código hexadecimal da cor azul pelo código hexadecimal da cor que desejar.

      Excluir
  9. Olá Elaine! Obrigada pelo popup. Tem como deixar funcionando somente no desktop e tirar do celular? Obrigada.

    ResponderExcluir
    Respostas
    1. Lidiane, nunca tentei mas em tese tem sim.
      Basta adicionar ao código fonte do gadget a condicional que oculta elementos em celulares.
      Acrescentei o código aqui:
      http://www.elainegaspareto.com/2015/06/conhecendo-condicionais-blogger.html

      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…