Caja "Me gusta" de Facebook, Pop Up (Emergente) - Actualización #3

Actualización 1: Se corrigió el procedimiento en la instalación

Actualización 2: Solucionado el conflicto de Jquery implementando: "jQuery.noConflict();"

Actualización 3: Ofrezco disculpas por el vital error, faltaba una linea de codigo, por eso a muchos no les ha funcionado. Ya esta corregido

He estado revisando algunos códigos de ColorBox y he querido poner el FanBox de Facebook a una de estas ventanas emergentes (PopUp).

 

Es un efecto muy agradable que ocupa todo la pantalla con cierta transparencia. Estas cajas emergentes permiten agregar muchas cosas, pero esta vez nos dispondremos a insertar los Seguidores de Facebook.

Mira el Pop Up en este blog de pruebas

El código original los puedes encontrar en Github.

Agregar PopUp a Blogger

El siguiente código contiene los estilos y scripts necesarios para hacer funcionar el Popup. Ademas de ello, es quien da la orden para que se ejecute el Popup. Ve a Plantilla - Editar HTML, da un clic dentro de la plantilla, presiona Ctrl + F y busca </head>. Y antes pega este código.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terrenoblogger.css" rel="stylesheet"></link>
<script src="https://sites.google.com/site/terrenoblogger/javascript/colorbox-terreblogger.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*0; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); 
jQuery.colorbox({width:"400px", inline:true, href:"#facebook-TB"}); } }); </script>

Lo resaltado en azul es Jquery, así que si ya lo tienes en tu blog, omitelo.

Este Popup solo funciona con las versiones de Jquery 1.8.3 e inferiores. Si utilizas una versión superior, no funcionará.

El numero 0 que esta resaltado, es el numero de días que tardará en reaparecer de nuevo la caja a un usuario; tu puedes modificarlo. Esto utiliza las cookies del navegador.

El código a continuación es la caja "Me gusta"de facebook. Dirigete a Diseño - Agregar gadget - HTML/Javascript y pega el siguiente codigo

<div style="display: none;"><div id="facebook-TB" style="background: #fff; padding: 10px;"><h3 class="box-title">Acompáñanos en Facebook</h3><center><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FUSUARIO-FACEBOOK&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center><div align="left"><span style="font-size: x-small;">terrenoblogger.co</span></div></div></div>

Cambia USUARIO-FACEBOOK por el nombre de tu pagina.

Ten en cuenta lo siguiente:

Hay dos tipos de url de paginas en facebook.

• 1. La que tiene la url personalizada, por ejemplo: http://www.facebook.com/nombredepagina
• 2. No tiene la url personalizada, por ejemplo: http://www.facebook.com/page/nombrepagina/164689464316

Si tu pagina en facebook aun no tiene una url personalizada, entonces copiaras el ID de usuario de la msima

Por ejemplo:
http://www.facebook.com/page/nombrepagina/164689464316

El numero resaltado en azul es el ID de tu página. Y ese es el que debes reemplazar por USUARIO-FACEBOOK.

Bien, con esto ya tienes una muy bonita caja de seguidores en tu blog.

Cualquier duda o inconveniente, coméntalos!