¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?


Si no sabes cómo instalar la caja de comentarios de Facebook en tu blog de Blogger, lo puede realizar de una forma fácil y sencilla siguiendo las instrucciones de este Tutorial de Blogger.

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

Pueden ver su demostración y funcionamiento en el siguiente blog

Te gusto verdad!

Video Tutorial


Vamos a Trabajar

Empezamos

Primer Paso:

1.- Diríjase a la siguiente dirección, para crear nuestra app ID


2.- Un clic en “Agregar una nueva aplicación

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

- Un clic en Crear identificador de la aplicación

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

- Puede aparecer un control de seguridad, ingrese lo que le solicite

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

- Ahora le mostrara la siguiente pantalla

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

- El Id de su App de Facebook es el que se esta señalando a continuación

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

- Al dar un clic en Panel, podemos ver con claridad nuestro ID


- Listo, ahora solo con ese número ID que Facebook nos proporcionó vamos a trabajar para insertarlo en nuestra nueva caja de comentarios de Facebook

Segundo Paso:

1 Ir a Blogger.com

2 Abrir el blog en el cual se va a insertar la caja de comentarios de Facebook

3 Un clic en “Plantilla

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

4 Un clic en “Editar HTML

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

Ahora se le abrirá el Editor HTML de su plantilla

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

5 Busca el siguiente código

<html

Este código se encuentra justo al principio del código HTML de nuestra plantilla, mire la siguiente imagen

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

6 Ingrese la siguiente línea de código adelante del código que encontró

xmlns:fb='http://www.facebook.com/2008/fbml'

Mire la siguiente imagen, como ejemplo

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

7 Busca el siguiente código

<body>

Si no encuentras dicho código puedes buscar el siguiente código, ya que en las nuevas plantillas puede venir un código similar al siguiente:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

8 Inserta las siguientes líneas de código justo abajo del código que encontró

<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'SU_APP_ID_AQUI',
      xfbml      : true,
      version    : 'v2.6'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>


Realice estos cambios:

Remplace su número ID de Facebook donde dice

SU_APP_ID_AQUI

Por ejemplo: así es como tiene que quedarle,  mire la siguiente imagen

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

9 Busca el siguiente código

</head>

10 Ingrese las siguientes líneas de código justo arriba del código que encontró

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='AQUÍ EL NOMBRE DE SU BLOG' property='og:site_name'/>
<meta content='SU_APP_ID_AQUI ' property='fb:app_id'/>
<meta content='http://www.facebook.com/ayudadeblogger' property='fb:admins'/>
<meta content='article' property='og:type'/>

Realice estos cambios:

- Cambie, donde dice AQUÍ EL NOMBRE DE SU BLOG por el nombre de su blog de Blogger

<meta content='AQUÍ EL NOMBRE DE SU BLOG' property='og:site_name'/>

- Inserte su número ID de Facebook donde dice SU_APP_ID_AQUI

<meta content='SU_APP_ID_AQUI ' property='fb:app_id'/>

También, debe cambiar la dirección de Facebook que dice http://www.facebook.com/ayudadeblogger  por la dirección de su Fan page de Facebook

<meta content='http://www.facebook.com/ayudadeblogger' property='fb:admins'/>

Mire la siguiente imagen, como ejemplo de la inserción del código

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

11 Busque el siguiente código

<b:includable id='comment-form' var='post'>

Mire la siguiente imagen como ejemplo de búsqueda

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

12 Ingrese las siguientes líneas de código justo abajo del código que encontró

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'></div></div>
</b:if>

Como ejemplo de inserción del código, les dejo la siguiente imagen

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

Si quiere modificar un poco más la caja de comentarios de Facebook, realice lo siguiente:

Cambie las dimensiones de la caja de comentarios de Facebook, en los números que están marcados color amarillo:

width='520'

width:510px

Eso es todo, es momento de dar un clic en “Guardar plantilla

¿Cómo agregar la caja de comentarios de Facebook en mi blog de Blogger?

Visite su blog de Blogger y habra cualquier entrada, mire cómo funciona la caja de comentarios de Facebook en su blog

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dudes en escribir

Enviar por correo
  1. Hola, gracias por el post, la verdad es que segui todos tus pasos, pero no lo he conseguido, no me aparecen las notificaciones de los comentarios en facebook, me podrias ayudar por favor?

    ResponderEliminar
    Respuestas
    1. Hola Litta, en una próxima publicación informare como realizar lo que usted indica. Mientras tanto puede leer la siguiente información que se encuentra en la pagina de ayuda de Facebook

      https://www.facebook.com/help/329858980428740/

      Saludos.

      Eliminar
  2. Que tal, buenos días, seguí en tutorial al pie de la letra y no marcó error al modificar el código más sin embargo no aparecen las cajas por ninguna parte.

    ResponderEliminar
    Respuestas
    1. Hola Eduardo, cual es la dirección URL de su blog de Blogger, tal vez usted ingreso un código donde no debía,

      Saludos.

      Eliminar
    2. Buenos días,
      Me pasa lo mismo. La URL de mi blog es patiodesociales.cei.org.pe

      Eliminar
  3. Hola, pues me da error
    "The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements." :(

    ResponderEliminar
    Respuestas
    1. Hola Películas, si aun no ha podido realizar este tutorial, me puede enviar un correo electrónico a la siguiente dirección ayudadeblogger@gmail.com y con gusto le ayudare directamente en la implementación

      - En el correo ingrese su incidencia.

      Saludos.

      Eliminar
    2. Gracias por tu pronta repuesta, pero ya lo pude solucionar xD
      Gracias!!
      Ahora bien una duda mas, la caja de comentarios aparecerá solo para los nuevos post? los antiguos no tendran?

      Eliminar
    3. Hola, la caja de comentarios aparecerá en todas sus entradas sean antiguas o nuevas.

      Saludos.

      Eliminar
    4. Como lo solucionaste, podrias decirme

      Eliminar
    5. Hola Locolol, dígame en le puedo ayudar

      Saludos

      Eliminar
  4. Hola, el paso 12 con el codigo no sale en mi plantilla de blogger... ¿Que hago?

    ResponderEliminar
    Respuestas
    1. Hola Sergio, no se entiende claramente su pregunta, usted ya ingreso el codigo del paso 12 o no..

      Ademas remita la dirección URL de su blog de Blogger

      Saludos.

      Eliminar
  5. Hola!! No me funciono... lo hice 2 veces tal cuál y no pude... tenes alguna sugerencia nueva?

    ResponderEliminar
    Respuestas
    1. Hola Majo, por favor remita este mensaje a mi cuenta de correo electrónico: ayudadeblogger@gmail.com y con gusto le ayudare personalmente

      Saludos.

      Eliminar
  6. Amigo, lo seguì todo bien pero, me saliò de esta forma, porque? http://prntscr.com/c90c57

    ResponderEliminar
  7. Hola Travis, he visitado su blog, al parecer usted ha ingresado dos veces la linea de código de la caja de comentarios de Facebook, por favor verifique que no este ingresado dos veces el código

    Saludos.

    ResponderEliminar
  8. Hola Luis, una consulta, esta caja es unica? o es para cada entrada del blog? A esto me refiero si los comentarios son los mismos siempre en todas las entradas del blog o cambian por entrada? Saludos

    ResponderEliminar
    Respuestas
    1. Hola Legiongamer, con respecto a su pregunta, la caja de comentarios de facebook se ubicara en cada entrada, y cuando un usuario comente en una entrada solo se mostrara en dicha entrada comentada y no en las ostras entradas que no haya comentado.

      Saludos.

      Eliminar
  9. TODO CORRECTO YA TENGO MI CAJA DE COMENTARIOS EN MI BLOG DE MANUALIDADES Y RECICLAJE PODÉIS VERLO AQUÍ WWW.TACHUELASDIY.COM

    ResponderEliminar
  10. no se aplico en mi blog , no aparece la caja de comentarios

    ResponderEliminar
    Respuestas
    1. Hola Ghostflow, sobre lo mencionado, por favor deje la dirección URL de su blog de Blogger y así podre ver lo que pudo pasar

      Saludos.

      Eliminar
  11. Hola, como puedo poner la aplicacion de caja de comentarios en español? gracias y saludos
    mi blog http://impetudeletras.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Sebastian, gracias por escribir, sobre su pregunta.

      He visitado su blog, y he visto que si tiene habilitado la caja de comentarios de Facebook en español

      Saludos

      Eliminar
  12. Respuestas
    1. Hola, sobre lo indicado, usted puede ver en el demo que funciona correctamente, puede ser que algún código no inserto correctamente

      Saludos.

      Eliminar
  13. Hola Luis, desafortunadamente, no lo logre, realice todos los pasos, pero no me aparecen los comentarios,de echo tampoco logro activar los comentarios de blogger. Algun Consejo.
    mi blog: BynoterTv.com

    ResponderEliminar
    Respuestas
    1. Hola Juan, he ingresado a su blog y pude observar que si se muestra la caja de comentarios de facebook en su Blog.

      Saludos.

      Eliminar
  14. Gracias Luis, si ya lo logre, pero ahora no se como poder recibir notificaciones al recibir un comentario.

    ResponderEliminar
  15. Hola, seguí todos los pasos y no me funcionó. Que puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, sobre su comentario, tal vez usted no realizo correctamente lo que se indica en este post, por favor, realicelo con paciencia

      Saludos.

      Eliminar
  16. Hola, seguí todos los pasos y me funcionó perfecto. Lo único que quisiera saber si es posible ver la caja de comentarios desde la plantilla movil, ya que muchos seguidores leen desde alli y también quiero que puedan comentar... es posible?

    ResponderEliminar
    Respuestas
    1. Hola María, gracias por escribir, con respeto a su pregunta, la caja de comentarios de Facebook se ve perfectamente en dispositivos móviles no necesitara realizar ningún cambio.

      Saludos.

      Eliminar
  17. Pues me temo que en mi caso no es así, algo habré hecho mal que no sé visualiza...
    www.tsukistylemakeup.com
    Entro en las entradas y no me aparece la caja de Facebook...

    ResponderEliminar
    Respuestas
    1. Hola María, he visitado su blog el cual tiene ingresado la caja de comentarios de Facebook correctamente, y al abrirlo en la versión móvil no se le va ha mostrar por que usted esta utilizando una plantilla simple de Blogger el cual solo le muestra los estilos proporcionados por Blogger, si cambiara de plantilla a una Responsive notara que le muestra la caja de comentarios de Facebook.

      Saludos.

      Eliminar
  18. Saludos, por favor ingresa a www.zancudodigital.com y dime si logras ver la caja de comentarios, hice todos los pasos que indicaste y no me aparece

    ResponderEliminar
    Respuestas
    1. Hola Luis, gracias por escribir, sobre su pregunta revise su blog y pude observar que no esta completo el tutorial, veo que no ha introducido el ID de su Facebook, donde dice : YOUR_APPLICATION_ID

      Por favor realice con tranquilidad del tutorial

      Saludos.

      Eliminar
  19. FUERA MUY BONITO SI ACTUALIZARAN LAS IMAGENES DE PASOS PARA INSERTAR CAJA DE COMENTARIO DE FACEBOOK YO NO ES IGUAL NO QUE HACER PS ME PIERDO

    ResponderEliminar
    Respuestas
    1. Hola Viviana, gracias por escribir he indicar lo sucedido, he actualizado las imágenes de este tutorial, espero que ahora si puede realizarlo con mas tranquilidad, saludos.

      Eliminar
  20. Hola Luis, podrías revisar de nuevo por favor, ahora si coloqué el ID en los lugares que faltaba pero nada que me aparece la caja de comentarios

    ResponderEliminar
    Respuestas
    1. Hola Luis, he actualizado las imágenes de este tutorial, por favor vuelva a realizar el tutorial, eliminando todo lo que haya hecho y volviéndolo a realizar.

      Quedo atento a su respuesta he informe si pudo realizarlo

      Saludos.

      Eliminar
  21. ERES GRANDE gracias por RESPONDER TENGO PROBLEMA ESO EL PRIMER CODIGO QUE VIENE SEGUIDO DE HTML ME DICE Error al analizar XML, línea 3, columna 51: Element type "html" must be followed by either attribute specifications, ">" or "/>". ME ENCANTA TU BLOGG LO VOY A PONER DE FAVORITO

    ResponderEliminar
    Respuestas
    1. Hola Viviana, con tranquilidad podrá realizar el tutorial, vaya paso por paso, primero, ingrese el primer código y luego de un clic en Guardar tema, y vera que no le saltara ningún error, si es el caso que aun no haya podido realizar el tutorial, no dude en escribir y con gusto le ayudare directamente

      Saludos

      Eliminar
  22. Si FUNCIONA por fin jajaj despues de hora voy a intentar con mi otro blogg a ver si resultar lo que me salia error era que no clikeaba en: >... LO PUSE ABAJO EL CODIGO Y (RESULTO)
    y funciona PERO NO QUEDE TAN FELIZ POR QUE NO APARECIO EN MIS PAGINA SOLO EN MI ENTRADAS
    SE PODRA PONER EN PAGINAS O SOLO ENTRADAS. MUCHAS GRACIAS

    ResponderEliminar
  23. MUCHAS GRACIAS LO HICE AL PIE DE LA LETRA Y SALIO TODO PERFECTO, ANTERIORMENTE LO HICE CON OTRO TUTORIAL PERO NO SALIA LA OPCION PARA MODERAR LOS COMENTARIOS AHORA YA ME SALEN ,LO UNICO MALO Q AUN ESTAN LOS COMENTARIOS ANTIGUOS Q HICE EN LAS ENTRADAS PARA PRUEBA Y ESOS NO LOS PUEDO MODERAR.... UNA PREGUNTITA POR AYA LEI SE PUEDE HACER QUE ME LLEGUE UNA NOTIFICACION A MI FACEBOOK PERFIL PERSONAL CUANDO ALGUIEN COMENTE EN ALGUNA ENTRADA??

    ResponderEliminar

Discusión:

Ayudadeblogger.com
Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Amp en Blogger (9) Amp Html Premium (1) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (19) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (4) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (8) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (43) Plantillas Landing page para Blogger (4) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (74) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Copyright © - Ayudadeblogger.com

 

Inspiración

Tecnología

Contactos

+593 994589032