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:
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! 😉