Introduce los comentarios de Facebook en Blogger – Colleges – Motor

Incrementar las prestaciones de nuestro Blog permitiendo nuevas formas de acceso a las redes sociales para nuestros usuarios siempre puede resultar provechoso.

La página de Referencia de Facebook Developers es un auténtico arsenal de gadgets que pueden servirnos para mejorar nuestras posibilidades sociales.

El problema es también saber incorporarlos sin afectar al rendimiento general de nuestro sitio web. Vamos a aprender a poner los comentarios del Blog con Facebook de manera que conectemos nuestro mundo Blogger con el mundo de una de las redes sociales más utilizadas en todo el planeta.

Vamos a incorporar en nuestro Blog la caja de comentarios de Facebook para que los usuarios puedan comentar en el muro las dudas, observaciones y recomendaciones que consideren. El resto de usuarios podrá "seguir" o pulsar en "Me gusta" con los comentarios que otras personas introduzcan en las entradas del Blog.

Conceptos Iniciales, ¿Qué vamos a hacer?:

Vamos a proceder a incorporar un "widget" o componente de aplicación externa de Facebook mediante el cual nuestros usuarios podrán comentar todo lo que sucede en las entradas de nuesto blog, además se podrán marcar los comentarios más relevantes. Los usuarios podrán pulsar "Publicar en Facebook" para mostrar su comentario en el perfil social. Otros usuarios que lo lean podrán así mismo contestar a esos comentarios y podrán verse directamente en tu Blog. Se trata de un "plugin social" que te permitirá llegar a nuevos usuarios a través de los comentarios de tus seguidores.

Ejemplo visual de cómo quedan los comentarios de Facebook en el Blog.

Recomendaciones:

Es importante hacer la reseña de rendimiento, la incorporación de "scripts" de aplicaciones externas a nuestro Blog pueden implicar un sobrecoste para el rendimiento del mismo. Es necesario que cada vez que incorporemos esta clase de elementos en él, midamos el rendimiento del sitio conPage Speedpara evaluar si estamos perdiendo velocidad de ejecución y más que suponer una ventaja, suponga un inconveniente.

Los comentarios de Facebook no se almacenan en tu cuenta de Google+ o Blogger, se almacenan en Facebook. Para utilizar los comentarios de Blogger te recomiendo la entrada:Aprende a configurar los comentarios en tu Blog

Paso a paso:

1)Nos conectamos a la URL de Facebook Developers, a la página para el "widget" de comentarios:http://developers.facebook.com/docs/reference/plugins/comments/

Página de configuración del "Widget" para comentarios de Face Book

Introduce los datos en la sección de configuración del widget de la página de Facebook:

Introduce en "URL to comment" la dirección de tu Blog.

En Width pon el ancho que desees establecer para el widget. Puedes cambiarlo después tranquilamente cuando lo insertes en tu Blog.

Selecciona en "Color Scheme" el esquema de color que deseas darle. Si tu Blog es claro puedes seleccionar "Light" si es oscuro te recomiendo "dark".

A continuación pulsa sobre el botón "Get code" para obtener el código fuente que debes poner en tu sitio web. Tendrás dos divisiones, una con el código que debes introducir en el body de tu blog y otra con el código que introducirás en el Gadget HTML/Javascript donde residirá finalmente el Widget de comentarios de Facebook.

2)Ahora sólo queda insertar el código extraído de Facebook en tu Blog.Dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.

En primer lugarrealiza una copia de seguridadde tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error.No dejes de realizar esta guía paso a paso parasalvaguardar tu blog.

En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "body" (no pongas la etiqueta de cierre de body) y justo debajo inserta el código que extraiste de Facebook correspondiente al apartado del "body".

Pantalla de edición de la plantilla HTML. pulsa CONTROL+ F y busca la etiqueta "body"

div id="fb-root"/divscript(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/es_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));/script

NOTA:Debido a la última actualización que Facebook ha introducido en sus scripts, si te da errores en la plantilla al tratar de salvar el código anterior, utiliza este que a continuación te muestro.

div id='fb-root'/script(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/es_ES/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));/script

Si este código ya lo tenías añadido con anterioridad por tener alguna funcionalidad de Facebook incorporada ya al Blog, no es necesario que vuelvas a meterlo y puedes pasar al siguiente punto.

Ahora continúa con las dos formas de añadirlo a tu Blog.

DOS OPCIONES PARA AÑADIR LOS COMENTARIOS DE FACEBOOK EN BLOGGER:

Comentarios de Facebook en un Gadget HTML:

1) Dentro de Blogger ve a la opción de menú diseño (está seleccionada en el pantallazo inferior, te aparecerá una pantalla como la que se muestra a continuación).

2)En la zona donde desees que aparezcan los comentarios (por ejemplo debajo del bloque llamado "Entradas del Blog") pulsa "Añadir gadget" y selecciona el de tipo HTML/Javascript

3)Copia el código que extraíste de Facebook para la caja de comentarios configurada para tu Blog:

div class="fb-comments" data-href="http://NOMBRE_DE_TU_BLOG" data-numposts="5" data-colorscheme="light"/div

¡Ya tienes los comentarios de Facebook a nivel de Blog como un gadget másen tu página principal!.

Comentarios de Facebook en tu plantilla para que aparezca sólo a nivel de entrada

1) Ahora, de nuevo pulsando CONTROL+F busca la siguiente línea de código:

shareButtons

2) Encontrarás esa palabra clave con el siguiente código:

b:include data='post' name='postQuickEdit'/
/span div class='post-share-buttons goog-inline-block'
b:if cond='data:post.sharePostUrl'
b:include data='post' name='shareButtons'/
/b:if
/div /div

3) Justo debajo del doble cierre de div:/div /divintroduce el código que recuperaste de la página de Facebook Developers para añadir los comentarios de Facebook junto con una línea condicional que hará que sólo salgan cuando el usuario acceda al detalle de una entrada:

b:include data='post' name='postQuickEdit'/
/span div class='post-share-buttons goog-inline-block'
b:if cond='data:post.sharePostUrl'
b:include data='post' name='shareButtons'/
/b:if
/div /div

b:if cond='data:blog.url != data:blog.homepageUrl'
div id='comentariosFacebook'div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'//div
/b:if

b:if cond='data:blog.url != data:blog.homepageUrl'/b:if:El "if cond" y su cierre al final en rojo expresan que sólo se mostrará lo que entre sus etiquetas se encuentre, cuando el usuario acceda al detalle de una entrada (cuando pulse "Más información").
div id='comentariosFacebook'div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='500' expr:href='data:post.canonicalUrl'//div:Es el código que extraiste de Facebook Developers para colocar la edición de comentarios de la citada red social. Podrás modificar el "widht" (ancho) con respecto al ancho en píxeles de tus entradas.data-num-posts='10':indica el número máximo de comentarios por página. Presta especial atención al uso dedata:post.canonicalUrl que permitirá que el comentario quede exclusivamente vinculado a la entrada donde se ha realizado.
Pulsa "Guardar Plantilla" y ¡eso es todo!, ya tienes por fin comunicados ambos mundos: la parte Blogger con la parte Facebook.

3)Opcionalmente, Si deseas administrar los comentarios que se introduzcan, para eliminar o impedir que los usuarios escriban contenido irrelevante o abusivo, de nuevo edita la plantilla HTML y escribe en el head:

meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/

EnYOUR_FACEBOOK_USER_IDdebes meter tu número identificativo de Aplicación Facebook. Para encontrarlo es tan sencillo como ponerte encima de la foto de tu perfil en tu página de facebook y copiar la URL que contiene (NO la imagen sino el perfil):

https://www.facebook.com/photo.php?fbid=xxxxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxx.xxxxxxxx.xxxxxxx&type=1&source=11

El número de 17 posiciones a la derecha de "fbid=" es el que debes poner en APP ID.

Solución de problemas con ejemplo código descargable de plantilla básica en Blogger con los comentarios de Facebook incrustados a nivel de entrada:

Esto es un ejemplo descargable de una plantilla básica de Blogger con el código fuente que utilizamos en la guía para que pueda servirte para entender cómo y dónde tienes que colocar el código:

Descarga plantilla de ejemplo

También puedes guardarlo directamente en tu cuenta Drive para luego verlo desde donde quieras:

NOTA:NOutilices este código directamente en tu plantilla o machacará tu presentación, es sólo un ejemplo descargable para que entiendas cómo queda y puedas solucionar problemas.

Localizarás las dos partes del código que informa la guía: