Mini PopUp para curtir fan page do Facebook com cookies para Blogger

Olá. Recentemente, recebi uma sugestão de artigo de “Paulo Silva”, ele para ensinar como inserir uma popup para curtir a fan page do Facebook para Blogger, que é baseada em um plugin WordPress. E ela é muito leve e funcional. Ainda não sei o nome do plugin, mas ao souber, atualizo o artigo e crio um artigo sobre ele. OFacebook é uma ótima forma de conectar seus leitores ao seu blog, e é importante conseguir um número bom de fans para que a interação seja alta e que você passe a receber um tráfego razoável vindo da rede social. E com essa Popup, podemos melhorar drasticamente o número de fans.

Gostaria de agradecer ao Claudio Sanches pela grande ajuda dada na criação do código para rodar a abertura do plugin com os cookies, pois da forma que estamos apresentando agora fica muito mais leve e simples, e isso é graças a grande ajuda que ele nos deu. Obrigado! Como vocês podem notar, é algo simples, leve, funcional, prático e feito em CSS3. A única imagem presente nessa MiniPopUp é a do Botão fechar, que usar css3 não seria muito adequado, até porque há uma incompatibilidade com navegadores um pouco mais antigos. Além disso, ele apresenta a tecnologia de cookies, em que ele grava um ficheiro no seu navegador, dizendo que aquela popup só voltará a abrir para o mesmo usuário com aproximadamente 7 dias. Já fiz uma outra verão, que é a Fantástica Popup para Facebook Versão 1. Mas resolvemos fazer uma versão um pouco mais simples. Confira!

Ver Demonstração

Vamos ao Tutorial:
1º – Acesse o painel do seu blog e clique na guia modelo.
2º – Depois clique no botão Editar HTML.
3º – Segure as teclas CTRL+F e procure por:
</head>
4º – E, acima dele, cole o seguinte código:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

5º – Em seguida, segure novamente as teclas CTRL+F e procure por:
]]></b:skin>
6º – E, acima dele, cole o seguinte código:

#fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit{width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#fanclose {float: right;cursor: pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzdZi7YWpypT8PC5z3evdQ-ApSKw6y-D18BmYfXzp9ofEgLtCpx0PDFYPhnTGxghrwYibBlwfXP3QfDPu6DvcHOVXBFiSloyZXicbx0wcWIobLxeHlv7WZRLMyN-4ESF5aOASEEBtnWiIg/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}

7º – E, pela última vez, segure as teclas CTRL+F e procure por:
<body>
8º – E, abaixo dele cole o seguinte código:

<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DA SUA FAN PAGE AQUI&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false&amp;appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"></iframe>
</div></div>

Atenção: Lembre-se que ao mexer a barra de rolagem horizontalmente, há um texto negritado, onde você irá substituí-lo pelo endereço de sua fan page, não se esqueça!

9º – E, finalmente, clique em Salvar Modelo!

Esperamos que você tenha gostado. O que acharam dessa nova PopUp para Facebook?