Todo estamos de acuerdo que tener una web profesional y con bonito aspecto ofreciendo a los usuarios siempre estar en constante aviso de lo que pasa en la Web es muy esencial, al momento de crear una pagina web todo deberíamos de crearnos una fans page y hacerla crecer desde nuestra web ya que es una herramienta para que los usuarios estén atentos de lo que se Publica en el Sitio.
Este truco que hoy les dejare en este Post nos ayudara a insertar una Fanbox Facebook en nuestro sitio web, pero no los comunes que vemos en los sidebar derecha o izquierda, NO, este sera un Fanbox Popup se abrirá una Ventana (imagen) como la que vemos en la parte de arriba o al abrir esta web.
Este truco salio en este presente año (2016), nos ayuda a que los usuarios nos regalen un like y así que crezca nuestra fanpage.
Para añadir este truco a tu blog dirígete a Plantilla, Editar HTML, das un Clic sobre el código y presionas la tecla Ctrl+F para buscar, y buscas el siguiente código ]]></b:skin> cuando lo consigas justo antes colocar el siguiente código:
.popup { background-color: #ffffff; color: #888888; height: 285px; padding: 20px; position: fixed; right: 30%; top: 25%; width: 340px; z-index: 101; -moz-box-shadow: 0px 0px 10px 1px #888888; -webkit-box-shadow: 0px 0px 10px 1px #888888; box-shadow: 0px 0px 10px 1px #888888; border-radius: 10px; -moz-border-radius: 10px; }
.overlay { background: #000000; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 100; opacity:0.5; }
a.close { background: url("http://i.imgur.com/ZSlkx6J.png") repeat scroll left top transparent; cursor: pointer; float: right; height: 32px; left: 32px; position: relative; top: -33px; width: 32px; }
#backpop{background-color: rgba(51, 51, 51, 0.81);width: 100%;height: 100%;z-index: 999;position: fixed;}
Ahora Buscar </head> y antes añadir el siguiente código:
<script type="text/javascript">function openDialog() { $('#overlay').fadeIn('fast', function() { $('#popup').css('display','block'); $('#popup').animate({'left':'30%'},500); });}function closeDialog(id) {$('#'+id).css('position','absolute');$('#'+id).animate({'left':'-100%'}, 500, function() {$('#'+id).css('position','fixed');$('#'+id).css('left','100%');$('#overlay').fadeOut('fast');});}</script>
<script type="text/javascript">function openDialog() {$('#overlay').fadeIn('fast', function() {$('#backpop').css('display','block');$('#backpop').animate({'left':'30%'},500);});}
function closeDialog(id) {$('#'+id).css('position','absolute');$('#'+id).animate({'left':'-100%'}, 500, function() {$('#'+id).css('position','fixed');$('#'+id).css('left','100%');$('#backpop').fadeOut('fast');});}</script>
Por Ultimo Buscas la siguiente etiqueta <body> arriba de dicha etiqueta pegar lo siguiente:
<div id="backpop"><div id="popup" class="popup"> <a onclick="closeDialog('popup');" class="close"></a> <div> <div style="font-size: 14px;color: #333;line-height: 1.8em;text-transform: uppercase;text-align: center;font-weight: bold;">Apoyanos con un Like! es GRATIS! :D</div>AQUI CODIGO DE TU FANBOX </div></div> </div>
Para Generar el Código Fanbox de tu fanpage, debes de dirigirte al Plugins de Paginas en Facebook (Clic Aquí) en este ultimo paso solo debes pegar donde dice AQUI CODIGO DE TU FANBOX el segundo código que te Genera facebook, el segundo lo debes pegar en un Gadget - HTML/JavaScript.
para Generar los Códigos de tu Fanbox, dirígete desde el link que he dejado justo arriba y llenarlo de esta forma, solo cambiar la url por la de tu fanpage, y cuando lo llenes dar clic en Obtener código.
Espero les sea de gran ayuda.
0 Comentarios sobre "FanBox Facebook PopUp (2016)"