Cómo crear botones y widgets de Facebook personalizados para tu web

Facebook, a pesar de los comentarios que vaticinan el comienzo del camino cuesta abajo de esta red social, con más de 1000 millones de usuarios sigue siendo la red social más grande del mundo, y con mucha diferencia.

Por tanto, una de las mejores maneras para difundir tus contenidos en Internet, especialmente en un proyecto nuevo, sigue siendo aprovechar al máximo la difusión que te pueden brindar los usuarios de Facebook.

Se lo tienes que poner fácil y para ello nada mejor que unos cuántos botones “me gusta” y sus variantes estratégicamente colocados a lo largo de tus contenidos, junto con widgets atractivos.

Se trata de los típicos botones o widgets que habrás visto cientos de veces en blogs como éste mismo. En los blogs, por ejemplo, normalmente se integran como widgets de la plantilla del tema de WordPress, como plugins o como gadgets de Blogger (un invento similar a los widgets de WordPress).

Está muy bien, pero esto sólo sirve para los blogs y además no te dan siempre lo que te necesitas, por ejemplo, poder colocarlos con total libertad donde quieras.

Puedes crearte botones y widgets de Facebook tú mismo y no es muy difícil

Mucha gente desconoce que las redes sociales como Facebook o Twitter suelen tener un apartado de “desarrolladores” en su web en el cual ofrecen a los usuarios, entre otras cosas, la posibilidad de crear botones y todo tipo de widgets. Es un poco más de trabajo, pero mucho más versátil porque puedes usarlos en cualquier página web, sea un blog o no.

Lo bueno de esto es que ya no dependes de tu tema WordPress o de que exista un gadget en Blogger (o plugin de WordPress) que encaje con lo que buscas. Facebook ofrece en este momento (marzo del 2013) un total de 11 “social plugins” diferentes, los cuales, además, no están disponibles todos como gadgets de Blogger y/o plugins/widgets de WordPress.

En el caso de Ciudadano 2.0, por ejemplo, la barra social flotante de la izquierda y la barra social horizontal al principio y al final de los posts están hechas a medida de esta forma.

Un inciso:

A estas alturas seguramente te hayas hecho un buen lío con los “plugins”, “widgets”, “gadgets” y “social plugins”.

Efectivamente, es un lío porque cada fabricante (Blogger, WordPress, Facebook, etc.) los llama como le da la gana. No te comas la cabeza, todos son básicamente lo mismo: pequeños componentes gráficos.

La excepción son los plugins de WordPress que pueden ser también componentes de este tipo, pero, además, pueden ser mucho más que eso. Pueden ser, por ejemplo, una extensión a WordPress que lo convierten en una tienda online completa con catálogo de productos y pasarela de pago. Aquí tienes varios ejemplos de plugins interesantes.

Creando tu propio botón “me gusta”

Para el ejemplo voy a crear una versión personalizada del famoso botón de “me gusta” de Facebook.

En nuestro caso, por ejemplo, esto me ha permitido cosas como crear botoneras sociales personalizadas con los botones que queríamos, colocarlas gracias a los hooks de WordPress exactamente donde quería y utilizarlas también en páginas que no forman parte de WordPress como, por ejemplo, esta página de aterrizaje de nuestro Taller de WordPress.org.

Esto es un buen ejemplo de la flexibilidad que te aporta aprender a ir un poco más allá en WordPress, no limitarte a lo que te ofrecen lo plugins y aprender a trabajar con un poco de código HTML, con shortcodes y con hooks.

Así que visto esto, empecemos con la creación del botón:

1. Acceder a la página de creación del botón

El botón de “me gusta” es uno de los 11 “social plugins” de Facebook. Cada uno de estos componentes se crea con un configurador desde la propia web de Facebook.

La lista completa de los social plugins la tienes aquí y dentro de ella tienes que hacer clic en “Like Button”, lo cual te llevará a la página de creación del botón “me gusta”.

2. Personalizar tu botón

captura configurador plugins sociales Facebook

El componente que vayas a crear lo puedes personalizar mediante diferentes parámetros.

En esta página te encontrarás un configurador con título de “Step 1 – Get Like Button Code”.

Con este configurador configuras los diferentes parámetros que se explican brevemente en la imagen que puedes ver en la derecha (haz “clic” para agrandarla). En los interrogantes de cada parámetro tienes una explicación algo más detallada (en inglés).

Juega un poco con los parámetros y verás cómo según qué parámetros va cambiando el botón de muestra que ves en la imagen.

3. Generar el código del botón

Una vez que has personalizado el botón, toca generar el código.

captura diálogo código Facebook

Ejemplo del código del componente que genera Facebook.

Es realmente muy simple porque Facebook lo hace todo, lo único que tienes que hacer por ti mismo es un clic en el botón de “Get Code”.

Una vez hecho esto, sale el diálogo que puedes ver en la captura izquierda.

Tienes diferentes opciones, pero no me voy a extender con cada una de ellas, tal como te genera el código por defecto, te vale perfectamente.

4. Insertar el botón en tu página web o blog

Lo importante es que sigas las instrucciones en inglés que vienen en el diálogo.

Como ves en la captura, el código se divide en dos partes: la parte superior que en la medida de lo posible debería aparecer solamente una vez en la página (no pasa nada por repetirla, aunque no es óptimo) y la parte inferior que debe insertarse en la parte de la página en la que se quieres que aparezca el botón.

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

Para usar este código se dan varios escenarios:

a) Lo quieres insertar en una página HTML: Muy fácil, como dicen las instrucciones, la parte superior del código debe ir justo después de la etiqueta <body> de la página, esta parte del código conviene que sea única en la página. La parte inferior, la insertas donde quieres que se vea el botón. Se puede insertar tantas veces como botones quieras que aparezcan en la página.

b) Lo quieres insertar en un blog WordPress.org (la versión más potente y que requiere un hosting): En este caso se complica un poco más porque para hacerlo bien deberías insertarlo con un shortcode (permite insertarlo en cualquier parte de un post o página, o dentro de un widget de texto de WordPress) o un hook (para una posición fija). Este post sobre shortcodes te ayudará en ello y sobre los hooks hablaremos en su momento más detenidamente.

c) Lo quieres insertar en un blog WordPress.com: Malas noticias, no se puede… WordPress.com no permite la ejecución de JavaScript y este código lo usa. Otra razón más para plantearse el salto a WordPress.org

d) Lo quieres insertar en un blog de Blogger: Otro punto donde, comparando blogs alojados, Blogger le saca ventaja a WordPress.com porque Blogger sí permite la ejecución de JavaScript. En este caso, debes modificar el código HTML de las plantillas de Blogger y por tanto se da una situación muy similar a la del primer caso de esta lista. Si no sabes HTML, pero quieres aprender (es bastante asequible), te recomiendo estos libros online, muy buenos y completamente gratuitos.

e) Lo quieres usar en un CMS tipo Joomla, Drupal, etc.: En este caso, cada maestrillo tiene su librillo, no se puede generalizar. Tienes que documentarte con cada producto para ver cómo hacerlo y si es posible (que soporte usar JavaScript, etc.).

Y lo mismo para una “Like Box”

¿Y qué pasa con el resto de los 11 social plugins de Facebook?

captura código like box de Facebook

Ejemplo de cómo crear una “Like Box” a medida insertando el código de Facebook en el widget de texto estandar de WordPress.org

Pues muy fácil: funcionan igual, así que visto el caso del botón “me gusta”, visto todo.

Naturalmente van a variar los detalles de la personalización porque obviamente, a diferente tipo de componente gráfico, diferentes parámetros, pero la mecánica es la misma.

De hecho, en el caso de nuestro blog, la Like Box de Facebook que se ve en la barra lateral derecha se ha implementado así: es el código de Facebook insertado dentro de un widget de texto (un tipo de widget que viene con defecto con WordPress.org). Así de simple.

Concluyendo

Es muy fácil crear botones y otros componentes de Facebook completamente personalizados para usarlos como te plazca en tu web porque Facebook nos da todo prácticamente todo el trabajo hecho.

Sin embargo, sí que es bastante necesario tener, al menos, unas nociones básicas de HTML. De lo contrario te resultará complicado entender cómo utilizar el código generado por Facebook y no meter la pata al usarlo.

Además, estos conocimientos los necesitarás no solamente para saber manipular el código, sino también, por ejemplo, para saber dónde exactamente colocar el código para que el componente aparezca realmente donde quieres que aparezca.

En cualquier caso, esto tampoco debería ser un drama porque si trabajas con Internet y te encargas tú directamente de tu web, adquirir conocimientos básicos de HTML y CSS es algo que tienes que hacer sí o sí.

Acerca del autor: Berto López

Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho.

Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicos en sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.


Comentarios

  1. ¿Esto mismo puede aplicarse para newsletters hechos en HTML? ¿O hay algo que debe hacerse de forma diferente?

    • Hola Sergio,

      No he probado para este caso en concreto, pero la “virguería” suelen dar problemas en las newsletters puesto que estas cosas usan el lenguaje de programación JavaScript que no suele funcionar en los lectores de correo.

      ¡Un saludo!
      Berto

  2. Hola, estaba intentando hacer unos botones como los que tienes para compartir en las redes sociales, los he visto no solo en tu blog, sino también en elpais, elmundo y varios sitios más. La cosa es que no encuentro la manera de hacerlo y he leído que lo has hecho tú a mano. Podrías darme alguna pauta a seguir o pista para saber cómo puedo personalizar el botón? porque el código de Facebook me sustituye el div que tiene la clase fb-share-button por un iframe y todo lo que esté dentro del iframe ya se pierde a mi control.

    Gracias!

    • Berto López dice:

      Hola Fabián,

      Yo no he metido mano al código, lo uso tal lo proporciona Facebook. En ese sentido, no te puedo aportar mucho más 🙁

      ¡Un saludo!
      Berto

      • ahh! pensé que los iconos redondos que tienes para las redes sociales eran hechos por tí. Entonces los estilos son del theme que has usado para el blog, no?.

        Sea como sea, muchas gracias por contestar.

        Un saludo!

        • Berto López dice:

          Exacto, en mi caso estoy usando el plugin de pago Simple Share Buttons Plus (del cual existe la versión gratuita Simple Share Buttons Adder), tuneado un poco por mi a nivel de estilos CSS.

          ¡Un saludo!
          Berto

  3. Buenas, tengo un problemilla a la hora de poner un widget de facebook. Uso el programa Wysiwyg web builder 10, he probado ya mil formas, he puesto el primer código antes de la etiqueta y el segundo código lo pongo en el HTML donde quiero que esté posicionado. Sin embargo no aparece nada cuando le doy a mostrar la prueba… Con twitter me va bien, sólo es un código y funciona a la perfección pero facebook me está volviendo loca, no se qué estoy haciendo mal 🙁
    Tal vez no lo esté poniendo en los sitios correctos, espero que puedan decirme alguna solución. Gracias de antemano! 🙂

    • Berto López dice:

      Hola Elia,

      Lo siento, pero ni te sé ayudar en este problema técnico con esta herramienta concreta, ni este post es el lugar adecuado para ello. Es un post, no un foro.

      Un saludo
      Berto

  4. Hola quisiera saber como puedo agregar botones para concursos, de seleccion o inluso interactivos en un FAN PAGE de facebook de una institucion publica? Gracias!

  5. Hola buenas.

    Por favor, ¿sabes si el código de Facebook no funciona en muros de organizaciones, sólo en muros de páginas personales?

    Gracias.

  6. Oscar Gil Font dice:

    Hola,
    yo quería rizar el rizo. Quiero colocar un botón “me gusta” de face en un tw para que los seguidores de tw me sumen en mi face.
    Es posible?
    Gracias

  7. Hola amigo, que tal, quisiera saber como insertar el box de los post de mi pagina de Facebook en mi blog. Saludos desde Perú

  8. Estimado, busco algun pluggin para mostrar los datos del autor (bio, twitter, facebook, etc.) como lo haces tú en tus post, y no encuentro, lo has hecho tu mismo? Tal vez estoy buscando en vano. Gracias por tu respuesta.

  9. Muy buen pos sin duda poner practica amigo

  10. Berto,
    me podrías decir como se hace para insertar en una publicación de facebook una ULR acortada, y que funcione, claro 🙂
    gracias!

  11. Hola Berto, muy buen post. Me ha ayudado muchísimo a implementarlo en mi blog. Segui tus pasos y lo realice perfectamente. Nuevamente Gracias.
    Te cuento que sigo adelante con el blog de mi nuevo emprendimiento y me gustaría saber como hago para armar el rectángulo verde con la flecha roja y los 2 campos de suscribite tal cual tenes en esta web? Algo conozco de mailchimp pero desde ahí se hace este recuadro? se que completas los datos y eso va a una base de mailchimp pero me podras explicar algo de como armarlo en mi blog areadevinos.com? Desde ya nuevamente muchísimas gracias.

    • Berto López dice:

      Hola Diego,

      Pues me has dado una idea para una serie de posts para explicarlo porque eres la n-ésima persona que me lo pregunta 🙂

      La cuestión es que está hecho a medida, no está hecho con MailChimp aunque efectivamente inserta los datos en Mailchimp.

      A ver qué enfoque lo doy al tema, pero creo que una pequeña serie que explique cómo hacer este tipo de widgets de manera genérica puede estar muy bien.

      Un saludo,
      Berto

  12. Excelente post Berto, tengo unas inquietudes que espero me puedas resolver:
    1. Cómo se llama el plugin que empleas para los botones sociales debajo del título en cada post?
    2. Que plugin empleas para que se vean los botones sociales en el feed?
    3. El theme que empleas en ciudadano2.0 es el mismo pagelines?

    Gracias

    • Berto López dice:

      Hola Carlos,

      En mi caso tengo muchas cosas hechas a medida por mi mismo, al estilo de lo que cuenta precisamente este post.

      Te respondo por puntos:

      1. Es a medida, es el mismo componente que genera la barra vertical. No encontré un plugin que quedará justo como quería con mi tema, así que me lo hice yo.
      2. No es un plugin, uso Feedblitz como un servicio RSS alternativo por estas razones: https://www.ciudadano2cero.com/feed-rss-feedburner-blog/
      Los botones sociales son uno de los valores añadidos que aporta este servicio (es de pago, aunque muy baratito 1,5€/mes)
      3. Es casi el mismo, es su antecesor, el tema “Platform Pro” de Pagelines. Pero es muy similar, casi idéntico.

      Un saludo,
      Berto

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)