Box flutuante para curtir a fanpage (aparece ao sair do blog e não ao entrar!) - * Blog Elaine Gaspareto *

Box flutuante para curtir a fanpage (aparece ao sair do blog e não ao entrar!)

em 20/09/2017

Box flutuante para curtir a fanpage (aparece ao sair do blog e não ao entrar!)

Em 2016 eu ensinei aqui no blog como instalar um box flutuante que aparece ao sair do blog e não ao entrar.
Não sabe do que estou falando?
Veja:

Para ver o tutorial do box Assinar o feed clique sobre a imagem

No tutorial em questão eu prometi adaptar os códigos para exibir o box de curtir a fanpage, mas acabei esquecendo...
Até que um leitor do blog me perguntou se o tutorial havia sido feito, e por isso resolvi trazê-lo hoje.
Depois de pronto o resultado será este (claro que com a sua fanpage):


Demonstração do tutorial



Como instalar o Box de curtir a fanpage que aparece ao sair do blog e não ao entrar?


Para começar voce precisará do código da caixa de curtir a sua fanpage.
Vou deixar aqui o link que ensina como conseguir esse código, mas também vou deixar o código padrão na página com todos os códigos necessários, ok?
Então, para começar, acesse a página com os códigos necessários a execução do tutorial:

Copiar o código


Agora vá ao painel de seu blog e clique em Tema. A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F. Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
ACIMA de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

A seguir, na barra de busca, digite </head> e localize.
ACIMA de </head> cole o CÓDIGO JAVASCRIPT.

Pausa para informação importantíssima!
Caso seu blog use domínio próprio o arquivo javascript a ser usado é este:
<script src='http://yourjavascript.com/08011672710/ouibouncebyelainegaspareto.js'></script>
Mas caso seu blog não use domínio próprio o código javascript será este:
<script src='https://sites.google.com/site/codigoselainegaspareto/scripts/boxflutuantebyelainegaspareto.js'/>

Isso acontece por causa do sufixo http ou https.
Se for blog que começa com http (blogs com domínio, até a presente data) tem que usar o arquivo que começa com http.
Se for blog sem domínio, que começa com https, precisa usar o arquivo que começa com https.
Sim, foram horas até sacar isso...
Fim da pausa

Inseriu o código correto?
Salve.

Localize agora </body> e acima disso cole o CÓDIGO HTML.
Salve e verifique se está tudo ok.
O box deve surgir ao levar o mouse para fechar a página, mas precisa rolar a mesma um pouco antes de clicar para fechar.
Tudo ok?
Então vamos trocar a minha fanpage pela sua.

Como o Blogger não aceita códigos não-parseados em seu código-fonte precisamos então converter esse código.
Calma, é simples!
Acesse essa página aqui do meu blog:
Conversor de códigos.

No primeiro campo cole o código completo de sua caixinha Curtir e clique em Converter.
Copie o conteúdo do campo abaixo (Código convertido) e cole no local determinado no CÓDIGO HTML.
Salve.
E tá feito!


Dicas extras importantes


Abaixo deixo algumas respostas para perguntas que podem surgir.
Antes de ficar frustrado por não dar certo releia o tutorial, certifique-se de haver entendido tudo e de não haver esquecido nada, e leia as dicas abaixo.
Testei em vários modelos diferentes e em todos deu certo, então pode crer: dá certo, basta fazer certinho, com paciência e persistência...


1- No CÓDIGO CSS você altera coisas como cores e fontes.
Cores eu deixei as oficiais do Facebook mas se quiser trocar fique à vontade. Sempre altere os códigos hexadecimais precedidos de # para trocar as cores que estão no código pelas cores que deseja.

2- A fonte Muli pode ser trocada pela fonte que desejar, e nesse caso precisa alterar também o CÓDIGO JAVASCRIPT dela, ok?

3- Aliás, falando em javascript: eu hospedei os arquivos que fazem o tutorial funcionarem uma conta minha mas sugiro que você baixe o arquivo e hospede em seu próprio servidor, ok?
Para baixar pé só clicar sobre o link e ele abrirá, daí é só copiar, colar em um bloco de notas, salvar na extensão .js e hospedar em seu host.


4- A largura ideal da caixa de curtir, nesse caso, é de 530px, ok? Caso queira alterar larguras precisa entender o básico de CSS. Mas faça testes até chegar onde deseja; é assim que passo horas pra chegar no resultado que partilho aqui.

5- Caso seu blog tenha algum outro script que use JQuery para funcionar pode dar conflito e ambos se anularem. Aí não tem jeito, tem que escolher...

6- Para finalizar: gostou do tutorial e acredita que ele será útil para seus leitores? Então me ajude a divulga-lo. Eu  agradeço muito!
3 comentários via Blogger
comentários via Facebook

3 comentários:

  1. A página dos códigos não está funcionando.

    ResponderExcluir
  2. Oi, Elaine!
    Consegui executar o passo a passo e deu certinho no blog de testes. Ficou perfeito, igualzinho ao seu! Mas quando fui instalar no meu Blog atual (baixado da internet), não deu certo. A caixa fica fixa no final da página, no canto inferior esquerdo do Blog. Por que será?
    Obrigada, bjs!

    ResponderExcluir
    Respostas
    1. Isso acontece mesmo. Em geral templates baixados da internet possuem códigos e scrits que causam conflito quando tentamos adicionar algo. Por isso nunca uso, porque é caixa de surpresa, a gente nunca sabe direito o que foi colocado neles...

      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…



Visualizações

Contando...

Dias online
Postagens
comentários