add

¿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?

Un clic en “Sitio web

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

Un clic en “Create New Facebook App ID

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

Ingrese la dirección de su correo electrónico para recibir notificaciones, mire la imagen

¿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?

Ahora nos mostrara una página similar a la siguiente, mire la imagen

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

El código que está marcado de color azul, será nuestro ID de Facebook, tenga en cuenta ese número.

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

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

emailEnviar por correo

24 comentarios:

  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

Discusión

person_pin 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) 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 (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) 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 (2) 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 (42) Plantillas Landing page para Blogger (3) 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 (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios