Comentarios de Facebook en Blogger

Facebook sigue innovando; y con esa evolución los bloggers (y otros sitios web) le siguen el camino y quieren que sus sitios sean mas sociales (como en el caso de ReCreando; que no me canso de leer sus post…)

Ya agregamos el botón de “Me Gusta” al sitio…
Agregamos también el botón de “Me gusta” o “Recomendar” a cada post…
Que nos falta? Pues vale, nos falta agregar los comentarios del facebook, pero dentro de nuestro blog bajo la plataforma de Blogger.com

Este Plug-in Social de Facebook no acepta los famosos iframes que sí estaban disponibles para agregar los otros (como el like button, like box, Live Stream, etc); en este caso los “comments” deben ir bajo XFBML y para eso tenemos que tener en claro que requiere Javascript SDK.

Qué son todas esas cosas? En castellano por favor…

Primero tenemos que “trabajar” en Facebook…

  1. Vamos a http://www.facebook.com/developers
  2. Clic en “Configurar una nueva aplicación”
  3. Escribimos el nombre de la aplicación; por ejemplo “MiBlogger Web” (sin las comillas), y la creamos.
  4. Opcional: inmediatamente después del paso anterior, vamos a ir a una pantalla donde salen los datos básicos de la aplicación; pero para lo que necesitamos esto ahora, no nos importa. Es opcional colocarle una descripción y completar toda esa información que nos solicita.
  5. Hacemos clic en la parte de “Web Site” (al costado izquierdo esta el enlace).
  6. En “Site URL” ponemos: “http://mi-sitio-blogger.blogspot.com/” y en “Site Domain” colocamos: “blogspot.com” (así tal cual!) … clic en “Guardar Cambios”.
  7. Vamos a ir a una pantalla que nos va a dar el “Id. de aplicación”, “Clave API” y otros datos que… para nosotros, lo único que nos importa es la “ID de App”.
    Así que si sois de los usuarios meticulosos, copia ese ID, porque te va a ser útil en los próximos pasos.
Algunas notas importantes para tener en cuenta:
  • Es probable (por la carga de facebook principalmente) que mientras guardan algún cambio el sitio les lance un error… y diga como que están trabajando en ello (o algo así). A mí me ha pasado, si llegase a ocurrir ésto, lo que deben hacer es ignorarlo y volver al sitio Facebook.com/developers porque aunque uds no lo crean, los cambios si se han guardado (si dudan, verifiquen).
  • Una vez creada la aplicación, esperar entre 2 y 20 minutos. Yo recomiendo esperar 10 minutos, nadie se va a morir por 10 minutos, en internet pasan volando! Se recomienda esperar… y sinceramente –aún- no tengo una razón de porque FB recomienda esperar para continuar con el proceso :-)

Ahora vamos a “trabajar” en Blogger…
ANTES de tocar el código, vamos a hacer un backup del mismo. Para eso, ejecutamos hasta el paso 2 (ver debajo), seleccionamos todo el código, y lo pegamos en un block de notas… guardamos el block en algún lugar del escritorio, como para tenerlo a mano en situaciones criticas.

  1. Ingresamos a nuestro blogger.com (a la zona administración).
  2. Vamos a “Diseño” –> “Editar HTML” y vamos a hacer clic en el botoncito (check box) que dice "Expand Widget Templates".
  3. Vamos a buscar el tag que dice <html… y antes de que cierre tenemos que pegar: xmlns:fb='http://www.facebook.com/2008/fbml'
    Les muestro:1
  4. Ahora vamos a buscar </head> y antes de ese tag vamos a agregar los meta tags de Open Graph Protocol, más info? Lean el Blogspot Social
    Esto debe quedar así:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta expr:content='data:blog.homepageUrl' property='og:url'/>
    </b:if>
    <meta content='Nombre-del-Sitio' property='og:site_name'/>
    <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
    <meta content='YOUR-APP-ID' property='fb:app_id'/>
    <meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
    <meta content='article' property='og:type'/>
    </head> do not copy me.

    Siendo “Nombre-del-Sitio” el nombre de tu sitio. No la dirección, ni la URL, acá va el nombre! =)
    Esa imagen, si quieren pueden quitarla, sino, la dejan, y sino, eligen cualquier imagen que represente su sitio.
    En “YOUR APP ID” van a pegar el código de la aplicación que les hice copiar en los primeros pasos (del “trabajo” en Facebook), recuerdan?
    En “YOUR FACEBOOK PROFILE ID” va el numero de usuario propio de cada uno en facebook.

  5. Ahora buscamos <body> e inmediatamente despues de dicho tag, agregamos:
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId  : 'YOUR APP ID',
          status : true, // check login status
          cookie : true, // enable cookies to allow the server to access the session
          xfbml  : true  // parse XFBML
        });
      };
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

    Lo único que tenemos que cambiar, es YOUR APP ID, por el numero que les hice anotar.

Recién ahora estaríamos en condiciones de agregar el plug-in de los comentarios.
Ahora bien, recomendación, hace un “Preview” desde blogger, para verificar que tu blog sigue cargando bien, y no hay errores. Si tenes algún error, lamentablemente ALGO hiciste mal, y tendrás que repasar tus pasos…

Agregando el box de comentarios…
  1. Buscamos <data:post.body/> e inmediatamente pegamos lo siguiente:
    <div><br/><br/><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div>
    Agregando éste código, el box de comentarios se va a ver en nuestra pagina principal, debajo de cada post.
  2. Opcional: Si no queres que aparezca en cada post (en la pagina principal), y queres que aparezca cuando el usuario lee el post, es decir dentro de cada post, el codigo que tenes que pegar debajo de <data:post.body/> es el siguiente:
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>
  3. Vamos a hacer otro “Preview” de los cambios… como lo ves? Sale todo correcto? En la pre-visualización de blogger se debe abrir una ventana nueva con tu blog, mostrando el box de los comentarios (solo si los colocaste en la pagina principal).
  4. Si todo sale bien, guardamos los cambios en el template! =)

Bueno, salió todo bien? Ahora vamos al tema de los comentarios… y esta parte es importante… NO TE OLVIDES DE LEER ESTO!

Agregar comentarios de Facebook en tu blog, va a permitir que la gente que comente, automáticamente comente en el propio Facebook, ampliando tus posibilidades de “difusión”… (obviamente si esta persona tiene cuenta en facebook). Ahora bien, si no desactivamos los comentarios de Blogger, vamos a tener dos sistemas de comentarios en paralelo, en el mismo blog… seria un caos para nosotros, y para el lector… no te parece?

Vamos a tener que desactivar los comentarios…

  1. Vamos a blogger.com
  2. Configuración –> Comentarios –> Buscamos comentarios, y los ocultamos:
  3. Y guardamos los cambios. Y listo! Ahora si terminamos!!!!

Voy a tener que hacer un segundo post para más consideraciones de este tema, porque sino me van a odiar. El tuto original (en ingles) es de Gil Goldshlager, y yo le agregué mis condimentos propios. Con este post he roto el record, creo que es el post más largo del blog ;) [si recién empezamos]

Siéntete libre de expresarte y comentarnos (en facebook) todo lo que piensas de este post! ;-)

"Más Facebook", o MasFB es un equipo conformado por usuarios de varios países.
La misión de MasFB es ayudar a otros brindando información sobre el correcto uso de las redes sociales.

7 comentarios

avatar
Rta

Desde el 27 agosto 2010, hasta el 28 de Noviembre del 2010 este blog tuvo los comentarios de Facebook. Pero los quitamos porque no funcionaban correctamente (problemas de visualización en Firefox, y otros navegadores).

Por el momento dejamos los comentarios que trae blogger por defecto.

Saludos.

avatar
Rta

Tengo un sitio, http://www.playsplash.com/ y lo hice en blogger, no sé si poner el site domain como blogspot.com o playsplash.com, saludos

avatar
Rta

Amigo Reedme18, abre un mensaje en nuestro foro de ayuda y te guiarémos mejor. Aquí en los comentarios se complica bastante hacer un análisis profundo de tu pregunta.

Saludos y gracias por participar.

avatar
Rta

No me sirvió ni coño eso xD y seguí todos los pasos no me aparece : s

avatar
Rta

Muchas gracias, me solucionaste el problema.
Sólo quisiera preguntar qué es necesario cambiar para que la caja se vea en su versión "dark". Gracias nuevamente.

avatar
Rta

les cuento que no me funciono.. yo creo que esta mal escrito mira lo que me sale No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "cond" must be followed by either attribute specifications, ">" or "/>".
Error 500

aparte cuando voy <.b.o.d.y.> no lo encuentro asi sino que lo encuentro de esta manera

/* Content
----------------------------------------------- */
b- o -d -y{
font: $(b. ody.font);

segui los pasos pero no me funciona ayuda brothers..

avatar
Rta

Hola Javier, este tema es del 2010!
Facebook ha evolucionado considerablemente desde que este artículo fue escrito hasta la actualidad.

Si quieres, busco como poner los comentarios en Facebook ahora y re-editaré el artículo actualizandolo.

Gracias por mostrar tu interes.

Nota Importante: Si necesitas ayuda rápida de forma más detallada, estamos respondiendo en nuestros Foros de Ayuda Facebook.
EmoticonEmoticon