:::: MENU ::::
  • Customizable fonts.

  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

  • Desarrollo Web - Responsive Design

  1. 1
  2. 2
  3. 3

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.

0 comentarios:

Publicar un comentario

¿Necesitas una pagina web? Contáctanos