Facebook like box widget 2017

facebook widget blogger 2017 like box


Hoje vamos apresentar um widget botão curtir que aparece no rodapé da pagina sendo muito útil para utilização no template isso também é bom para engajamento dos visitantes afim de curtir sua fanpage 
se deseja instalar no seu template siga os passos abaixo:

Como instalr o widget facebook like box 2017 no blogger 

Faça login no template do blogger va no menu modelo então editar
com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e acima disso copie e cole o seguinte código CSS


<style type="text/css">
#fbLikeBox{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}
.fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
.slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
@keyframes slideUpfbLikeBox{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 slideUpfbLikeBox{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%)}}
</style>


Agora procure por </body> e logo acima disso copie e cole o seguinte código:

<div class='slideUpfbLikeBox' id='fbLikeBox'>
    <a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times' /></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/mybloggerseo' 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%2Fmybloggerseo&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>

Obs: não esqueça de trocar os nomes onde esta realçado em amarelo pela sua fanpage do facebook
então salve e veja o resultado.

Click to comment