24 de agosto de 2016

Inferior flutuante Facebook Like Box Widget para Blogger


Às vezes sentimos a necessidade de se envolver mais com o nosso público no Facebook. Fazer uma fã page crescer não é fácil e nem impossível, porém requer de alguns cuidados por parte de nós, blogueiros.

O primeiro cuidado que você deve ter é colocar uma caixa de curtir no seu blog, isso faz com que o visitante curta sua página sem ele precisar acessar o endereço do facebook em si. Pensando nisso estou trazendo para este post um widget bastante discreto e ao mesmo tempo impressionante, eu digo isso pois estou utilizando ele aqui no blog e os resultados são ótimos!

Como instalar

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Clique sobre o editor e tecle CTRL+F e procure por </b:skin> e logo acima do trecho cole o seguinte código:
  4. #open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
    .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
    .slideUp{
     animation-name: slideUp;
     -webkit-animation-name: slideUp; 
    
     animation-duration: 1s; 
     -webkit-animation-duration: 1s;
    
     animation-timing-function: ease; 
     -webkit-animation-timing-function: ease;
    
     visibility: visible !important;   
    }
    
    @keyframes slideUp {
     0% {
      transform: translateY(100%);
     }
     50%{
      transform: translateY(-8%);
     }
     65%{
      transform: translateY(4%);
     }
     80%{
      transform: translateY(-4%);
     }
     95%{
      transform: translateY(2%);
     }   
     100% {
      transform: translateY(0%);
     } 
    }
    
    @-webkit-keyframes slideUp {
     0% {
      -webkit-transform: translateY(100%);
     }
     50%{
      -webkit-transform: translateY(-8%);
     }
     65%{
      -webkit-transform: translateY(4%);
     }
     80%{
      -webkit-transform: translateY(-4%);
     }
     95%{
      -webkit-transform: translateY(2%);
     }   
     100% {
      -webkit-transform: translateY(0%);
     } 
    }
    
  5. Agora acima de </body> cole o seguinte código:
  6. <div class='slideUp' id='open-fb'>
    <a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Fechar'><i class='fa fa-times'/></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/AJUDAEMCODIGO' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FAJUDAEMCODIGO&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
    </span></div></div>
    <script type='text/javascript'>
    
    function show(target) {
        document.getElementById(target).style.display = &#39;block&#39;;
    }
    
    function hide(target) {
        document.getElementById(target).style.display = &#39;none&#39;;
    }
    </script>
    
No trecho destacado AJUDAEMCODIGO, troque pelo usuário da sua página no Facebook, esse usuário é o nosso aqui do Códigos Blogger.

É isso, espero que tenha curtido esta dica e se ficou alguma dúvida, poste um comentário que eu tento ajudar =)


5 estrelas - baseado em 59 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

0 comentários: