Box curtir fanpage do Facebook, fácil de instalar

em 13/10/2021

Tempo de leitura:


Box curtir fanpage do Facebook, fácil de instalar


  • Hoje a postagem é curta e simples, duas formas de adicionar box do Facebook.

  • Os códigos para instalar um box para seguir e curtir do Facebook estilo pop up e outras duas formas de adicionar simples e elegante para você adicionar em seu blog.

  • O que seria de nossos blogs sem as redes sociais para divulgarmos nossos artigos, ganhar visibilidade, compartilhamentos e seguidores?


  • O box de curtir e seguir do Facebook é bem útil para a finalidade de atrair compartilhamentos, seguidores e curtidas.

  • Confira como fica o box do Faceboock:


  • Agora vamos ao código, não tem segredo, siga as instruções abaixo:


  • Vá à aba layout do blogger;
  • adicione um gadget, HTML;
  • insira o código do box;
  • salve.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#fcfffe;border:5px solid #fffafa;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#c2946d;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/universoblogueira/ &width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="https://www.universoblogueira.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">UniversoBlogueira</a></div>
</div>
</div>



Outra forma de instalar o plugin do Facebook no blog é indo à página do Facebook developers, além do plugin de página você também tem acesso aos botões para adicionar no blog.




  • Acesse a página de plugins, configure da forma que achar melhor para seu blog e clique em receber código, onde você verá duas opções para a instalação.

  • Como no exemplo abaixo:

exemplo dos códigos para instalação do plugin de página do facebook



  •  Caso sua opção seja pelo primeiro código, o primeiro deve ser incluído acima da tag de fechamento </body> no HTML do seu template, após isso adicione um gadget HTML\Javascript e cole o segundo código e salve. 

  • Troque o endereço da página do Faceboock do Universo Blogueira pela do seu blog, e pronto.


  • Para alterar as cores e deixar combinando com seu tema, consulte a tabela de cores.


  • Aproveite para curtir e compartilhar a página aqui do Universo Blogueira.

  • Dúvidas e sugestões deixe nos comentários abaixo, até breve!

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.