Cómo poner un facebook comment box en las entradas de tu Blog

Hola a todos. Hoy, a pedido del público y de Max (lector), les traemos un fácil tutorial de cómo poner un comment box de Facebook en tus blogs de Blogger. De esta forma logran que sus seguidores puedan comentar desde sus cuentas de Facebook.


Bueno, aquí vamos... ¡¡¡OJO!!! 

Para comenzar, deben ir a la configuración de su blogger y entrar en la parte de la "Plantilla" en diseño de HTML del blog, como se puede ver en la siguiente imagen:



Estando ahí tendrán que buscar el siguiente código (o parecido), pueden utilizar las teclas Ctrl + F para encontrarlo fácilmente:

<div class='post-footer-line post-footer-line-3'/>


Debajo de esto pegan inmediatamente el siguiente código:

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:href='data:post.url'/></div></b:if>


Y listo, tendrán algo como esto:

Recuerden copiarlo bien, de ser así ya tendrán sus comentarios de Facebook en cada entrada de su blog sin que se repitan los comentarios. Si tienen una página estática y desean poner el comment box en la página principal, en algún slider o barra lateral de forma permanente, les recomiendo elaborar personalmente el plug-in de Facebook en el siguiente link, ahí podrán darle el tamaño que quieran y luego solamente tendrán que copiar y pegar el código en algún gadget de HTML de blogger y ponerlo donde deseen (o donde les mencioné arriba).

La gracia que tiene el presente tutorial es que es estándar, no necesitan tener una cuenta verificada en Facebook y está hecho para páginas dinámicas, sin tener el famoso problema de que se repitan los comentarios en todas las entradas o que aparezcan en la página principal. Ahora, si por el contrario, quieren hacer algo mejor y tienen su cuenta verificada en Face, les recomiendo este tutorial de otra web que sirve bastante Bagabundia Blog.

Espero que les haya servido. Recuerden que agradecer no cuesta nada, recomienda este tutorial y nos vemos la próxima vez con más ayudas para sus blogs.



CONVERSATION

77 ya son Blogger@s:

  1. Jajajaja muchismas gracias, nunca creí que fuera a ser tan sencillo, solo copie el código, le cambie el en_US por es_LA para que saliera en español y todo bien.

    Muchas gracias y por aquí no estamos leyendo.

    Saludos a todos.

    ResponderEliminar
  2. Gracias por este gran tutorial; me ha sido super util y hacía tiempo que buscaba esto; así ya mis seguidores no tendran excusa para no comentar ;_)

    ResponderEliminar
  3. En este código no, pero en el link para ver otro tutorial creo que se puede desarrollar eso , saludos

    ResponderEliminar
  4. jejeje lo he intentado y no me funciona buuu

    ResponderEliminar
  5. que raro, igual facebook ha andado con problemas inténtalo de nuevo pronto

    ResponderEliminar
  6. Te adoro! Cásate conmigo, por favor!!!! Descubrir este blog y particularmente este posteo después de sacarme la cresta toda la tarde probando con otras instrucciones mal elaboradas o directamente falsas, ha sido una revelación... Muchas gracias Bloggera.

    ResponderEliminar
    Respuestas
    1. Hola. lo hiciste con el nuevo Editor de blogger?.. como?.. intenté y no me salió u.U!!

      Eliminar
    2. Intenta de nuevo, seguir todos los pasos y que no te falte ninguna parte del código. Si no te resulta ve las opciones, el link de opcional que coloco en el post. Lo otro es ir donde potro que también es muy buena onda y tiene otro tutorial para hacerlo http://ciudadblogger.com/2011/12/agregar-la-caja-de-comentarios-de.html

      Eliminar
  7. jajajaj Criss de nada xD, que bien que llegaras a nuestro blog, esperamos que lo sigas leyendo besotesss

    ResponderEliminar
  8. Pero como para reducir el ancho de la caja de comnentarios de facebook ????

    ResponderEliminar
  9. lamentablemente Andrés es standar, para poder cambiar dimensiones y otro tipo de configuración puedes ver el lik que adjuntamos como tutorial anexo o tener un comment box personalizado que lo hace facebook pero solo es para paginas estáticas.

    Mira esto https://developers.facebook.com/docs/reference/plugins/comments/

    ResponderEliminar
  10. Mil gracias por tus tutoriales, te pondré en mi lista de blogs, son muy utiles!! ^_^

    ResponderEliminar
  11. este codigo me funciono a la perfeccion, pero ahora tengo una duda, se podra hacer que cada comentario se muestre en la pagina facebook de mi blogger?

    gracias.

    ResponderEliminar
  12. Tomas: No, este código no hace eso, pero creo que el link alternativo, que damos puede hacer eso, no estoy segura. :D

    Nina: muchas gracias :D

    ResponderEliminar
  13. Puxia... no me resulta... Lo había puesto el otro día y resultó que los comentarios se repetían en todas las entradas. Pensé que lo había hecho mal y lo hice de nuevo, pero ahora no me sale... =(
    No se cómo hacer para tener el comment box de facebook sin que los comentarios se me repitan en todas las entradas... Bu!
    Alguien me ayuda? Soy completamente nueva en esto así que es probable que esté metiendo la pata..... XD

    ResponderEliminar
  14. Chuta, patta, que raro, la verdad es que funcionaba bien y no repetía los post tampoco en todas las entradas, seguiste el tutorial nuestro o las alternativas que dimos en el post???, igual mañana lo probare en un blog de prueba para ver que pasa y aviso :S

    ResponderEliminar
  15. Ta muy bueno el tema, sobre todo las tutoriales, en especial el fan box movil de facebook. A pesar de que pudiese ser un blog con temas para mujeres, eso no quita que los hombres leamos algo y de esa forma comprenderlas mejor, e inclusive reforzar ese lado sensible que muchas veces olvidamos. Me encanto el material. Por cierto y tengo una duda, quisiera saber de que forma modificar la caja de comentarios, porque tal como la veo, aqui cualquiera puede comentar, sin necesariamente tener una cuanta de blooger o de Google. Pueden hacer un tutorial sobre aquello o bien indicar como lo debo hacer???, de antemano gracias

    ResponderEliminar
  16. Una preguntota!!
    He puesto el comment box en mi blog, pero tengo el problema de que si me comentan una entrada antigua, es decir que no se encuentre en la pag. principal, ni me entero... como puedo hacer que me informen cada vez que alguien comento en el box de facebook?? ¿Se puede?
    un saludo y gracias por la atención!! ^_^

    ResponderEliminar
  17. Hola Mauro, gracias por el comentario, te cuento que si te refieres a el comment box que tenemos nosotras en el blog, no es el de facebook del presente tutorial es un box de disqus, una aplicación externa, que pronto haremos el tutorial para que lo puedas colocar si quieres  El del tutorial funciona para la gente solamente registrada en facebook

    saludos

    ResponderEliminar
  18. Holaaaa, ese es el problema de este comment box estandar, para hacer eso que tu quieres como comenta la entrada, tienes que estar registrado y activado en facebook y seguir el tutorial del link que recomendamos. Si es que tienes la cuanta de facebook verificada sigue ese tutorial y podrás hacer lo que queires de tener notificación de los comentarios, si no pronto tendremos un tutorial de como aplicar disqus que es la aplicacion que usamos nosotras, que esta vinculado con twitter y facebook y otros, xoxo

    ResponderEliminar
  19. Oki, muchísimas gracias por responder. Veré si puedo hacerlo, ^^  Besos!!

    ResponderEliminar
  20. mira este te puede servir también, es muy bueno http://ciudadblogger.com/2011/12/agregar-la-caja-de-comentarios-de.html

    ResponderEliminar
  21. Magnifico, me ayudó mucho.

    ResponderEliminar
  22. No puedo creer que hayan personas tan desprendidas y tan buenas para ayudar. El tutorial esta genial y como dices en la intro, busque muchas veces la forma y no encontré ningún tutorial que me pudiera ayudar, estoy muy feliz! gracias de verdad! y todo en esta vida regresa, mucha buena vibra para ti, gracias!!! 
    Carla

    ResponderEliminar
  23. Gracias Carla, no sabes lo contenta que me pone leer tus comentarios, se lo que es aprender haciendo así que mi fin es compartir todo lo que he aprendido en estos años como blogger :) besos

    ResponderEliminar
  24. Magnifico, sencillo y sin mucho apuro!!! Pulgar arriba por eso!! pero aja!!! jejeje ahora decime como eliminar la caja de comentarios que trae predeterminada blogger para sus entradas! Pleaseeeee

    ResponderEliminar
  25. no me sale nada , que he hecho mal no entiendo , ayudnme please

    ResponderEliminar
  26. Amiga chuta, que crees que hiciste mal??? es para una fans page??? cierto???

    ResponderEliminar
  27. dos preguntas, estas en blogger??? es para un blog de blogger?? y asegurate bien de que el codigo quede enterito talve no lo copiaste todo, que no falte ni el principio ni el final

    ResponderEliminar
  28. Hola, quiero empezar por agradeceros este fantástico blog, es una maravilla, y nos ayuda un montón.. He intentado poner el código, pero cuando abro el html, y pongo buscar la línea que ponéis no me la encuentro. Mi blog está en blogger y tengo cuenta en FB... qué puedo hacer??????? Gracias de antemano!!!!

    ResponderEliminar
  29. amiga, seguramente no seleccionas el expandir artilugios, tienes que dale en expandir artilugios para poder ver todos los codigos de tu blogger, avisanos si ahora lo encuentras...

    ResponderEliminar
  30. Si DISQUS se llegara a cerrar perderias todo los comentarios xD por eso no lo uso

    ResponderEliminar
  31.  Por eso hemos sincronizado disqus con blogger, podemos cambiar o quitarlo y no perderiamos nada ....... para que lo consideres :) saludos

    ResponderEliminar
  32. Como se hace eso me pasas una guila porfa xD

    ResponderEliminar
  33. Ok, elaborare un tutorial el fin de semana para nuestros seguidores :)

    ResponderEliminar
  34. Hola chicas. Siempre me han gustado sus tutoriales y quise intentar esto, pero no hay caso con encontrar el código debajo del cual hay que insertar el que compartieron uds. No sé que onda, pero por lo menos en mi plantilla de blogger no aparece esa línea de código :S

    Igual muchas gracias ;)

    ResponderEliminar
    Respuestas
    1. Recuerda expandir plantilla de artilugios

      Eliminar
  35. muchisimas gracias!!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar
  36. puchis, a mí no me resulta pq no tengo ese código que se busca con el Ctrl+F. Hay otra opción que me sirva?

    ResponderEliminar
  37. Le diste clic en expandir artilugios???? y tienes blogger?

    ResponderEliminar
  38. Hola bebloggera.com muchísimas gracias por este post, después de intentarlo muchas veces pude poner mi comment box en mi blog "The Ultimate Fashion Statement" 
    http://the-ufs.blogspot.com me encanta esta página, es muy útil y los tutoriales muy fáciles de seguir.
    Éxitos!!! 

    ResponderEliminar
  39. me salioooo!!!!!!!!!!!!!!!!!!!!!!!!!!!! Lo intente mil veces y gracias a tu post me salio!!!!!!!!!!!!

    ResponderEliminar
  40. no encuentro el codigo para pegarlo debajo.... :-(

    ResponderEliminar
    Respuestas
    1. Recuerda expandir plantillas de artilugios como sale en la imagen

      Eliminar
  41. Es bueno recordar, como se hacen las cosas, Gracias por este articulo.....

    ResponderEliminar
  42. como haces para que no te aparesca este gran cuadro grande del comentario via blogger.. eh visto uno que solo dice una linea algo asi.. dejar comentario en este blog !! osea ahorra mucho espacio y aparte se ve elegante y abre en una pestañita aparte.. sabes como se hace? te lo agradeceria infinitamente

    ResponderEliminar
    Respuestas
    1. Creo que tienes que ir a las opciones de los comentarios y hay una parte donde dice, si deseas que el cuadro de comentario sea incrustado o no, el que tu quieres es el que se abre en una ventana nueva

      Eliminar
    2. sexo con matias niqolaz si desnuda yo si aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

      Eliminar
  43. sexo con un hombre si esroy desnuda gracias aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    ResponderEliminar
  44. GRACIAS me ayudaste en mi blog saludos....

    melomano-peru.blogspot.com/2013/05/radio-programa-beatles-en-espanol.html

    ResponderEliminar
  45. Mil Millones de Gracias Por Fin Encontre Lo Que Estaba Buscando Hace Mucho Tiempo Gracias!!!!

    ResponderEliminar
  46. hola y si no hay line-3 solo tengo la misma pero en line-2 y line-1 en cual la pego gracias

    ResponderEliminar
    Respuestas
    1. Prueba con line 2 y ve dÓnde te quedo la caja :) Éxito.

      Eliminar
  47. Holi lo coloque y anda al parecer pero es enorme!!! quisiera achicarlo un poco, pero si lo edito desde ese link me arroja 2 codigos, como puedo achicar el box?

    ( http://jhessinet.blogspot.com.ar/ )

    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Lamentablemente éste no puede editarse, si necesitas generar uno a tu medida y color, debes seguir este otro tutorial. Espero te sirva, Besos http://vagabundia.blogspot.com/2010/05/agregar-el-comment-box-de-facebook.html

      Eliminar
  48. No me resulta, no encuentro el código que antecede a lo que debo pegar. No sé si se debe a la nueva plantilla o qué, pero pongo en buscar y no me sale :(

    ResponderEliminar
    Respuestas
    1. Amiga, lee el comentario de Go Technology!24 de septiembre de 2014, 17:19
      más abajo, si no encuentras el código prueba con un fragmento de él

      Eliminar
  49. muchas gracias BeBloggera, aunque hubo al principio un poquito de complicaciones al momento de buscar el código, lo hice poco a poco & buala ! <3

    besitos
    http:/mydayandtomorrow.blogspot.com

    ResponderEliminar
  50. Hola para los que esten teniendo problemas al no encontrar el código. yo lo busque asi: puse ctrl+F y ubique solo este pedaso de codigo <div class='post-footer , primero aparece el post footer line 1, le sigues dando enter hasta que aparezca el post footer line 3, y justo debajo de él pegan el codigoque aqui han posteado. Puede q necesites abrir los artilugios, Las actualizaciones de blogger no incluyen el "expandir plantillas de artilugios", asi que tendran que hacerlo manualmente.

    ResponderEliminar
  51. Hola =), tu post me sirvió de mucho!! es muy bueno y sobre todo sencillo, Muchas graciaaas! antes se repetian los mismos comentarios en todas las entradas, y ahora ya no, cada entrada tiene sus comentarios independientes. Pero mi duda es como hacer para que la cajita de comentarios salga en cada entrada sin tener que darle click a la entrada para que se abra.

    ResponderEliminar
  52. ooooh gracias por pasarlo me ha servido de mucho <3

    ResponderEliminar
  53. Muchas gracias! Ha salido a la primera :D

    ResponderEliminar
  54. Gracias a todas, que bueno que les sirvió el post :)

    ResponderEliminar
  55. Muchas gracias por el post, pero lamentablemente no me resultó :(
    No pude encontrar la línea de código que correspondiente y cuando traté con la más parecida, primero no me resultó y luego me tiró error. Probaré destrozando la plantilla del blog de experimentos a ver que pasa :P

    Siempre se agradecen sus tutoriales y lo fáciles de seguir que son ^_^

    ResponderEliminar
    Respuestas
    1. Que lastima, intenta colocandolo en alguna parte cercana del código de comentarios :)

      Eliminar
  56. ¡Muchas gracias por el tuto!

    Quería preguntar también a las be bloggeras ¿qué opinan de Disqus y de Bloglovin'? Me hice cuentas porque me parecieron útiles pero no sé bien cómo usarlas en pro de mi blog

    ResponderEliminar
    Respuestas
    1. Mmm pues la verdad, disqus sirve más para comentarios, si quieres colocar eso en vez de los comentarios de blogger, personalmente no lo recomiendo porque cuando lo puse en este blog habian comentarios que se perdían.
      En cuanto a bloglovin, la verdad lo use bastante tiempo sirve mucho para seguir a tus blogs favoritos, es casi como otra red social de blogs, puede servir para llevar trafico a tu sitio si gente que está en bloglovin te sigue. Pero ya sabes que como todo, tienes que invertir tiempo en ello.

      Eliminar
  57. muchas gracias me a sido de mucha utilidad :D n_n

    ResponderEliminar
  58. dpm! que fácil me lo has puesto, la verdad es que creía que ya me iba a ser imposible ponerla, gracias!

    ResponderEliminar
  59. no tengo esa linea de codigo en mi blogger

    ResponderEliminar
  60. Waoouh muchas gracias por este tuto me sirvio de mucho y fue muy fácil no como otros complicados, gracias ^^ espero que puedas darte una vuelta por mi blog ^^
    es http://mundoasiaticodoramas.blogspot.mx/
    Disculpa no sabras como personalizar el plugin de me gusta de face para las entradas?

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top