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. O Facebook é 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!
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/AVvXsEijJr2pYJF3DIr4FKEcchGfmnfdXQNyNM-K0pY7FiavQXj2XIeZTJuZgwQXcsfk95YO7AQrbZ0n2l1dBN2yvgM9daXSwS6pYPbmuSkKTcDD-suTe199H9Onpa0ZJztyKnT6IzVZNLhtd0CL/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&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&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!
Esperamos que você tenha gostado. O que acharam dessa nova PopUp para Facebook?
Sem Comentários