:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

lunes, 12 de agosto de 2013

Revisando comentarios de mi canal en youtube (tutoriales2010) observe que muchos de ustedes tenían la duda de como agregar la caja de "me gusta" de facebook y que aparezca en una ventana emergente al inicio del blog, que seria algo como esto:
Da clic en la imagen para ver un ejemplo.
Si duda alguna es un efecto muy agradable que ocupa toda la pantalla y nos ayudará a conseguir mas likes a nuestra pagina.

AGREGAR EL POP UP


  • Empezamos, para eso nos iremos a nuestra parte de Plantilla y Editar HTML... Damos un clic dentro del código y presionamos ctrl + f para que se nos abra el cuadro de búsqueda y sea mas fácil encontrar la etiqueta de cierre del head  así que copiamos y pegamos esto:  </head>  y antes  del cierre pega este código: 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<link href="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.css" rel="stylesheet"></link> <script src="https://dl.dropboxusercontent.com/u/168482905/Archivos%20%20facebook%20pop%20up/colorbox-tutoriales2010.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>

DOS COSAS IMPORTANTES

  • El texto o código resaltado en color azul  es jquery si ya lo tienes en tu plantilla omite esa parte del código.
  • El cero en color rojo es el numero de días que tardara en reaparecer la caja,  yo lo puse en cero pero les recomiendo que lo cambien por el numero 1 por que es algo molesto que el lector este a cada rato cerrando dicha ventana, por que cada ves que cambien de pagina o actualicen el blog la caja estará apareciendo una y otra ves.
Entonces una vez hechos estos cambiamos nos iremos a Diseño y agregamos un nuevo gadget de tipo Html/JavaScript y copiamos y pegamos este código.


<div style="display: none;"><div id="facebook-TB" style="background: #fff; padding: 10px;"><h3 class="box-title">Sigueme 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%2FTodoParaTuPcTutoriales2010&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center><div align="left"><span style="font-size: x-small;">tutoriales2010.blogspot.mx</span></div></div></div>

Antes de guardar solo debes cambiar la parte subrayada por el nombre de usuario correspondiente. Y listo!

Ten encuenta que:

si tu pagina no tiene url personalizada entonces debes agregar el ID 

http://www.facebook.com/pages/nombrepagina/1243535343

Cualquier duda solo déjame un comentario.

1 comentarios:

Publicar un comentario

¿Necesitas una pagina web? Contáctanos