Los 5 componentes que mejor conectan tu sitio web o Blog a Facebook

El uso de las redes sociales tiene un valor incalculable para la correcta promoción de un sitio web o Blog.

La página de Referencia de Facebook Developers es un auténtico arsenal de "gadgets" o "plugins" que pueden servirnos para mejorar nuestras posibilidades sociales. El problema es también saber incorporarlos sin afectar al rendimiento de nuestras páginas.




Vamos a repasar una selección de los mejores complementos de Facebook que podemos utilizar en nuestro sitio web o Blog para mantener unidos el mundo de la red social con la información que proporcionamos en nuestros contenidos.

Vamos a aprender con unas guías explicativas que no requieren grandes conocimientos en programación a insertar en nuestro sitio web o Blog los principales "Widget" de n Facebook: como el "Me gusta", los comentarios de Facebook a nivel de entrada, el diario de actividad del Blog, la publicación automática de entradas o el "LikeBox" que tanto puede ayudar a conseguir más "me gusta" para tu página Facebook desde tu web o Blog. Sácale partido a Facebook.

Conceptos Iniciales, ¿Qué vamos a hacer?:

Vamos exponer los "Widgets" o componentes oficiales de Facebook para incorporarlos a nuestro sitio web o Blog. De esta manera nuestros usuarios podrán interactuar con la red social a través de nuestras publicaciones compartiendo de diversas formas la información que proporcionamos.

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 con Page Speed para evaluar si estamos perdiendo velocidad de ejecución y más que suponer una ventaja, suponga un inconveniente.

Los 5 componentes que mejor conectan tu sitio web o Blog a Facebook:

Pulsa en "Mostrar / Ocultar cómo se hace" de cada guía para poner el componente de facebook en tu sitio web o Blog.

1) El Clásico, el botón "Me gusta": incorpóralo a tu sitio web o Blog con unos sencillos pasos.

Mostrar / Ocultar cómo se hace▼▲

Configúralo en tres pasos

1) En la página de Facebook https://developers.facebook.com/docs/reference/plugins/like/ dispondrás de los botones que requieres para añadirlo a tu Blog.

Selección de botones de Facebook para incluir en tu navegador

2) Introduce la URL de tu Blog en "URL to like" y selecciona "Layout Style" "button_count" para que podamos tener espacio en el Blog y no ocupemos todo el espacio disponible en la botonera inferior con sólo  los botones de Facebook.

3) Pulsa el botón "Get Code" y cópiate el código en un editor de texto o en el porta-papeles para luego pegarlo en tu sitio web o blog.

Añádelo a tu sitio web:

Para un sitio web estándar, simplemente copia y pega el contenido extraído de "Get Code" en la zona de la página donde te interese que aparezca.

Añádelo a tu sitio Blog de Blogger:

1) Realiza una copia de seguridad antes de cualquier cambios para poder volver atrás en caso de error.

2) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.

Al editar el HTML de tu plantilla aparecerá todo el código de la misma.

3) Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id='shareButtons' var='post'> O <div class='goog-inline-block dummy-container'>

En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas. Justo después del goog-inline-block dummy-container y su etiqueta </b:if> puedes colocar el código que te proporcionó Facebook ("get code") para añadir su "Me gusta".

4) Al final del último botón que Blogger utiliza para colocar tus botones de compartir añade el código marcado en rojo:

 <b:includable id='shareButtons' var='post'>

[...]                                <b:if cond='data:top.showDummy'>                                  <div class='goog-inline-block dummy-container'>                                    <data:post.dummyTag/>                                  </div>                                </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><!--AQUI COMIENZA EL CÓDIGO DE FACEBOOK--><table cellspacing='0' width='100%'><tr><td align='left' halign='bottom' height='70' valign='bottom' width='100%'><div class='fb-like' data-href='NOMBRE_DE_TU_BLOG' data-layout='button_count' data-show-faces='false' data-width='450'/><div class='fb-send' data-href='NOMBRE_DE_TU_BLOG'/></b:if></b:includable>

Despues de  <b:includable id='shareButtons'   acompaña bastante código que he suprimido para no hacer ilegible el código. Dentro de los sharebuttons busca el <b:if cond='data:top.showDummy'> y justo después puedes añadir el código de Facebook que extraíste de la página de Facebook Developers. No olvides que después del código de facebook debe ir el </b:if> Y </b:includable> para que todo esté correcto.

2) Los comentarios de Facebook para tu sitio web o Blog.

Mostrar / Ocultar cómo se hace▼▲

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 FaceBook

• 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.

Añádelo a tu sitio web:

Para un sitio web estándar, simplemente copia y pega el contenido extraído de "Get Code" en la zona de la página donde te interese que aparezca.

Recuerda introducir primera parte del código (el javascript) en el Body y el resto (los comentarios) en la zona donde deseas que aparezcan de tu página web.

Añádelo a tu Blog de Blogger:

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 lugar realiza una copia de seguridad de 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 para salvaguardar 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"></div><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/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.

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, de nuevo pulsando CONTROL+F busca la siguiente línea de código:

shareButtons

• 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>

• Justo debajo del doble cierre de div: </div> </div> introduce 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 de data:post.canonicalUrl que permitirá que el comentario quede exclusivamente vinculado a la entrada donde se ha realizado.
• Pulsa "Guardar Plantilla" y ya lo tienes.

3) Publica tus entradas automáticamente en facebook.

Mostrar / Ocultar cómo se hace▼▲

1) Conéctate a https://apps.facebook.com/rssgraffiti/ para utilizar el gestor de RSS o la aplicación que se suscribirá a las actualizaciones que vamos a realizar en nuestro Blog.

Si no hay permiso para que Graffiti se ejecute en tu Facebook se te mostrará esta pantalla. Simplemente dale acceso para que puedas utilizar el RSS y publicar tus entradas en Facebook sin necesidad de hacerlo manualmente cada vez que publiques una.

2) Necesitarás darle permiso a rssgraffiti para acceder a tu perfil de Facebook. Lee la política de privacidad y todos los términos. Aparecen en forma de enlaces azules sobre el botón "Aceptar".

Pulsa Aceptar para conceder el persmiso a RSS Graffiti

Pulsa el botón Add new Publishing plan

3) Para añadir nuestro Feed y concretamente el de nuestras entradas, bastará con rellenar los datos que indica la pantalla con el formulario para indicar nuestro Feed.

Selecciona SOURCE (lado izquierdo) e introduce el Feed de tu Blog

Al seleccionar SOURCE se te solicitará el Feed de Origen que vas a utilizar. En él introduce el Feed de tu Blog tal como te explico en la guía.

Feed URL: es la dirección de nuestro Feed. Es tan sencillo como poner http://feeds.feedburner.com/NOMBRE_DE_TU_BLOG. En mi caso, como mi blog se llama diariosdelanube, tendré que poner http://feeds.feedburner.com/diariosdelanube.

Si quieres publicar los últimos comentarios podrás escribir como nuevo Feed http://NOMBRE_DE_TU_BLOG.blogspot.com/feeds/comments/full

Rellena los datos básicos del Feed de tu Blog. La mayor parte estarán seleccionados por defecto.

Source Name: utiliza el nombre de tu Blog.

Source URL: la dirección normal de tu Blog. Es decir http://NOMBRE_DE_TU_BLOG.blogspot.com.es/. En mi caso será http://diariosdelanube.blogspot.com.es/.

Después seleccionaremos el estilo con el cual queremos que se vean las entradas de nuestro Blog en el muro. La elección depende de cada uno pero la standard parece la más adecuada mostrando una imagen en miniatura y el resumen de la entrada a su lado.

4) Pulsa sobre el botón "Save" para dejar almacenados tus cambios en Facebook.

Ya está creado el Feed de noticias fuente que alimentará Facebook o el destenido que elijamos en "Target" a la derecha.

5) Selecciona el "Target" o destino donde vas a meter el RSS que has introducido de origen, "Source".

Rellena los datos finales para terminar de configurar el destino.

Rellena el combo "Choose Target" y el combo "Publish on behalf of" para publicar "en nombre de". En Post Style escoge como vas a presentar las entradas, en estilo Standard (el recomendado) o Compact (compacto) o Status Updates (actualizará tu estado de Facebook con la entrada).

6) Cuando finalices aparecerá a la izquierda el RSS de tu blog y a la derecha tu dirección Facebook. Pulsa el botón "ON" para dejar activada la actualización.

Tienes opciones desde la pantalla final de configurar con los pequeños iconos de Graffiti más opciones de publicación de tu rss.

Desde ese instante ya tenemos publicados en nuestro muero de Facebook las entradas de nuestro Blog automáticamente. La publicación no será inmediata, ten en cuenta que el Feed no es algo que se actualice con una frecuencia elevada, tardará un tiempo en salir la entrada que publiques.

4)  Muestra la actividad de tu sitio web o Blog en Facebook

Mostrar / Ocultar cómo se hace▼▲

1) Nos conectamos a la URL de Facebook Developers, a la página para el "widget" de "Activity Feed": https://developers.facebook.com/docs/reference/plugins/activity/

Página para añadir Widget "Activity Feed" de Facebook en nuestro Blog.

• 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 APP ID debes 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.

• En Action, si no pones nada, por defecto significará que saldrán por el activity Feed todas las acciones.

• Rellena el ancho ("Width") y alto ("Height"), con el tamaño en píxeles deseado. Luego lo podrás cambiar al meter el "Widget" en el Blog.

•  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 "Activity Feed" 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 lugar realiza una copia de seguridad de 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 para salvaguardar 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"></div><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/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.

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.

• En Blogger accede a la edición del HTML de la plantilla pues Blogger

Opción de diseño en Blogger.

•  En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el "Widget" de comentarios de Facebook y selecciona el Gadget "HTML/Javascript".

Pulsa sobre "Añadir Gadget" en la zona donde deseas insertar los botones AddThis

• Añade el código fuente que recuperaste de Facebook:

<div class="fb-activity" data-site="http://diariosdelanube.blogspot.com" data-app-id="xxxxxxxxxxxxxxxxx" data-width="300" data-height="300" data-header="true" data-recommendations="true"></div>

Añade el código fuente del AddThis

• Pulsa "Guardar Disposición" y ¡ya lo tienes!

5) El "Me gusta" que conecta tu página web en Facebook con tu Blog y viceversa:

Mostrar / Ocultar cómo se hace▼▲

1) Nos conectamos a la URL de Facebook Developers, a la página para el "widget" de "Activity Feed": https://developers.facebook.com/docs/reference/plugins/like-box/

Configurando el "Like-Box"

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

• Introduce en "Facebook Page URL" la dirección en Facebook de tu Blog.

• En Width establece el ancho que deseas para el componente, pon un valor teniendo en mente la colocación que le vas a dar. Luego en el propio código, cuando lo pegues en tu Blog, podrás cambiarlo sin problemas.

• Rellena "Color Scheme" para indicar el tipo de combinación de colores que más "pegue" con tu sitio web o blog. "Light" para sitios claros y "Dark" para oscuros.

• "Stream" por si deseas mostrar toda la cadena de "Me gusta" más recientes.

• "Show Header" sirve para mostrar el nombre con el icono del sitio en Facebook. Es imprescindible para que el usuario sepa sobre qué hace "Me gusta".

• Por último pulsa "Get Code" para obtener el código fuente que después añadiremos en Facebook.

Pantalla para copiar el código que introducirá el "Like Box" en nuestro Blog.

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 lugar realiza una copia de seguridad de 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 para salvaguardar 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"></div><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/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.

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.

• En Blogger accede a la edición del HTML de la plantilla pues Blogger

Opción de diseño en Blogger.

•  En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el "Widget" de comentarios de Facebook y selecciona el Gadget "HTML/Javascript".

Pulsa sobre "Añadir Gadget" en la zona donde deseas insertar el Like-Box

• Añade el código fuente que recuperaste de Facebook:

<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>

Añade el código fuente del Like-Box

• Pulsa "Guardar Disposición" y ¡ya lo tienes!

Sin lugar a dudas, cualquiera de estos componentes acercarán más tus contenidos a los usuarios de la red social.