sábado, 30 de marzo de 2013

Tutorial: Como poner el Fanbox de Facebook, flotante y con efecto deslizante

¡Comparte el tutorial!
Facebook se ha convertido en un medio importante para los que tienen un blog.
Y este gadget seguro que te gustará.


Te mostramos como agregar el Fanbox de Facebook flotante y con efecto deslizante a tu blog.
Puedes ver el resultado en este blog de pruebas.

Dificultad:

Fácil

Paso 1:

Lo primero será ir a:
Escritorio de Blogger > Plantilla > Editar HTML

Ahora, antes de:
</head>

pega el siguiente código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Paso 2:

Ahora antes de:
]]></b:skin>

agrega lo siguiente:
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Paso 3:

Ahora en un Gadget HTML/JavaScript pega lo siguiente:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Faqui-username-o-ulr-de-tu-pagina&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Sustituye lo de color rojo por el Username de tu página. Ejemplo:
TuTutorial.TutorialesParaTodo

Y si aún no tienen URL entonces colócalo así:
pages/Tu-tutorial-Tutoriales-para-todo/319278958191308

Guárdalo y listo. Ya puedes ver tu caja de seguidores en tu blog.

Fin del tutorial
Ayúdanos compartiendo esto
WhatsApp

En este momento hay comentario(s) sobre Tutorial: Como poner el Fanbox de Facebook, flotante y con efecto deslizante.


En este momento hay 18 comentarios sobre Tutorial: Como poner el Fanbox de Facebook, flotante y con efecto deslizante.
  1. Muchas gracias amigo me funciono de diez, se agredece :D

    ResponderEliminar
  2. oye y si quiero mas pestañas y no solo la de facebook?

    ResponderEliminar
  3. Soy famoso:D salgo ahy!!! haha aunqe ya lo soy estando en el blog del nerd:B toy chibeado:)

    ResponderEliminar
  4. ola en ves de un fan page quiero poner una porgramacion de futbol se puede?

    ResponderEliminar
    Respuestas
    1. Claro, solo tendrías que sustituir el código de fb por el que quieres colocar ahí.

      Eliminar
  5. hola! gracias ante todo... pero como soy nuevo, mi caja aparece en blanco... qué hago mal??? gracias por tu paciencia...

    ResponderEliminar
    Respuestas
    1. Necesito ver cual es tu blog, así te puedo decir donde está tu problema

      Eliminar
    2. Bueno, mi Blog es http://artesantanawerner.blogspot.com.es, ... yo sigo intentándolo... las dos primeras partes creo que están bien, ... gracias!

      Eliminar
    3. ¿Creaste el Gadget HTML/JavaScript?
      ¿Pusiste bien lo de la url de tu página?

      Eliminar
  6. Gracias, estaba todo correcto, y no salía... así que he dedicado la tarde a entender que ocurría... era algo tonto... muy tonto.... pego aquí la solución por cortesía de oloblogger, para que si le pasa a otro lo mismo sepa el porqué...."Ojo que esto es para páginas, no para perfiles personales. Las páginas son una modalidad especial de perfiles Facebook que en un principio estaban destinadas para sitios comerciales, pero que bien pueden ser usadas para otro tipo de sitios más amateur como los nuestros. Con la creación de una página podemos independizar nuestra actividad personal de la de nuestro sitio web."... para más información, dejo el link http://www.oloblogger.com/
    Gracias Victor Ivaan por leerme y por tu tiempo.

    ResponderEliminar
  7. Hola Victor, cómo estas?

    Te escribo para consultarte por un ENORMNE problema que tengo con la fanbox de mi página de facebook y mi blog de blogger.

    He seguido tus indicaciones al pie de la letra, todo 10 puntos, la fanbox deslizable (y la fija tradicional) puedo configurarlas e instalarlas sin ningun problema, hasta aquí todo bien.

    Ahora el problemón: si estoy logueado en mi cuenta personal o de la pagina de facebook puedo ver sin problemas la fanbox de cualquier tipo (o el boton simple de "me gusta"). Ahora, cuando me "deslogeo" de mi facebook, auntomaticamente en blogger desaparece el contenido de la fanbox deslizable o directamente desaparece la fanbox tradicional.

    Tú tienes el mínimo de idea por que me puede estar ocurriendo esto?

    He buscado y rebuscado en la web pero no encuentro nada al respecto, por lo que agradecería enormemente tu ayuda.

    Por el momento voy a dejar la fanbox deslizable en el blog por si llegas a ingresar para que puedas ver lo que ocurre (aparece y cuando se despliega esta en blanco si no estoy logeado en face).

    Te agradezco de antemano por cualquier ayuda que puedas brindarme.

    Mi blog es "stockargentina.blogspot.com".


    Muchas gracias.

    ResponderEliminar
  8. a mi no me funciono esta forma ni ninguna de las q he intentado, no se que ma probar! =(

    ResponderEliminar
  9. Amigo no m aparece este codigo: ]]> que debo hacer?

    ResponderEliminar
  10. una pregunta como haces el efecto de la seccion "lo mas nuevo en tutoriales" te agradeceria.

    ResponderEliminar
  11. Gracias Amigo, Ya lo había intentado con el mismo html pero con tu tutorial fue perfecto.

    ResponderEliminar
  12. Hola creo que voy a hacer un gran aporte con este comentario. Nose si habran notado que cuando ustedes ingresan un codigo HTML/JAVASCRIPT queda un espacio "en blanco" porque? simple porque siguiendo los pasos que aca indican al final tienen que abrir un nuevo espacio de gadget sin titulo pero eso obviamente va a dejar en la pagina un cuadrito blanco o negro segun el color de fondo de su plantilla si no les gusta como queda o no quieren ocupar espacio al pedo busquen despues de hacer todo lo que aca se indica osea hagan todos los pasos menos el ultimo ese codigo no lo metan como gadget sino que quedense ahi en la edicion de la plantilla y busquen (va todo junto sin espacio entre la barra y la b solo que no se porque la pagina me bloquea la etiqueta pero ustedes eso ponganlo todo junto) y antes de eso ponen el codigo despues lo guardan y LISTO!! PUEDEN EDITAR TODO DESDE LA PLANTILLA NO NECESITAN AGREGAR GADGETS , si quieren ver de lo que les hablo ingresen a mi blog ---> http://internetcompartida.blogspot.com espero haber ayudado a alguna persona ñ.ñ eso ya seria mi satisfaccion

    ResponderEliminar
  13. Estoy emocionado al compartir a Fanbox en mi pàgina de facebook, es extraordinario.

    ResponderEliminar

 
Este sitio utiliza cookies propias y de terceros, éstas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar diversos análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. ACEPTO Más información.