Cómo configurar botones sociales para aumentar las visitas a tu web [Tutorial]

enero 16, 2014

Instalar botones sociales en una web para que el lector comparta el contenido en redes sociales facilita su viralización, incrementa el tráfico social, aumenta las visitas y contribuye potencialmente a mejorar el posicionamiento en buscadores. Conclusión: cuanto más fácil le resulte al internauta compartir contenido, más social será la web o blog, mayor popularidad y visibilidad obtendrá y más se leerá.

Las principales plataformas de blogging ofrecen ya widgets o gadgets para incluir en una única barra, de forma automática, botones sociales.

Entre el catálogo de plugins de WordPress figuran, por ejemplo, Digg Digg, que incorpora una barra flotante lateral o fija en la parte superior e inferior de la página, con contadores en cada botón, y Shareaholic, con botones de diseño personalizable y disponibles en más de 15 idiomas.

Para Blogger, el directorio de Google Gadgets ofrece Share, aunque añadiendo el gadget <HTML/JavaScript> se puede añadir al blog el código de cualquier plugin, por ejemplo, Add This.

Y está, también, la opción de configurar botones personalizados para cualquier blog o web: tú seleccionas la red social, el formato del botón, la URL que deseas que se comparta e incluso el texto que debe figurar. Basta con añadir el código resultante al HTML de la página, allá donde quieras que aparezca… ¡y a compartir!

Los artículos de este blog incluyen los dos tipos de botones: personalizados al inicio de cada post (después de la imagen y antes del comienzo de texto), y automatizados y predeterminados en la plantilla al final de cada uno.

Aquí tienes, paso a paso, cómo personalizar los botones sociales para aumentar las visitas a tu web o blog:

Twitter

El directorio Twitter Buttons proporciona botones para compartir contenido en Twitter, seguir a una cuenta, promover un hashtag y mencionar a un usuario de Twitter.

Botones de Twitter

Al seleccionar la opción “Share a link”, se despliega un menú en el que se puede elegir:

  • Qué URL compartir: la de la página en el que se vaya a instalar el botón, u otra.
  • El texto del tuit: el título de la página, u otro diferente que puede, por ejemplo, incluir también hashtags (ojo con la configuración de la etiqueta <title> de la página).
  • Mostar (o no) contador de tuits (los de este blog incluyen contador).
  • El usuario de Twitter fuente de la información (los de este blog incluyen como “via” a @marialazaro).
  • Qué usuario de Twitter recomendar, después de lanzar el tuit.
  • Un hashtag.
  • El tamaño del botón (los de este blog son tamaño estándar, no grande).
  • El lenguaje del botón (mejor seleccionar “español”, si el blog está escrito en español).

Share a Link Twitter Button

Una vez completados los parámetros, se puede obtener una vista previa del tuit y el código HTML a insertar en la página web, allá donde se prefiera.

Facebook

La página de “Social Plugins” de Desarrolladores de Facebook incluye apartados de “Like Button” y “Share Button”. En este blog están incluidos los botones del apartado de “Like Button, porque incluyen también los de compartir opcionalmente. El “Like Button” de Facebook permite seleccionar:

  • La URL que se desea compartir.
  • El ancho en pixels del botón (los de este blog tienen un ancho de 200).
  • El diseño del botón: la opción estándar incorpora el mensaje “A X personas le gusta esto. Sé el primero de tus amigos”; el “box-count” incluye el contador en la parte superior de los botones; el “button-count” despliega un contador horizontal (los de este blog están configurados con la opción “button-count”).
  • El tipo de acción: “Me gusta + Compartir” o “Recomendar + Compartir”.
  • La opción de mostrar el perfil de los amigos que le han dado al “Me gusta”.
  • La posibilidad de incluir o eliminar el botón de “Compartir” (los botones de este blog incluyen siempre la opción de “Me gusta + Compartir”).

Botón Me gusta y Compartir de Facebook

A continuación, se obtiene el código para insertar en formato HTML5, XFBLM, IFRAME o URL. En este blog se aplica la opción iFrame.

LinkedIn

El botón “Share Button” de la página de Desarrolladores es muy sencillo y ofrece pocas opciones:

  • La URL para compartir (si no se especifica, por defecto recoge el título de la página).
  • El idioma.
  • El diseño del contador: superior, horizontal o sin contador (los botones de LinkedIn de este blog son horizontales).

No se puede predeterminar tamaño ni tipo de acción, aunque sí se previsualizar el diseño de botón. Al pulsar “Get Code”, ¡voilà!

LinkedIn Share Button

Google+

Lo reconozco: a mí la configuración personalizada del botón de Google+ es la que más tediosa me resulta. Aunque en realidad, se pueden obviar varias opciones e ir directamente a lo importante:

  • El tamaño: pequeño, mediano, estándar o grande (yo uso el tamaño mediano).
  • El tipo de anotación: de texto, con contador, o nada (los botones de este blog son de tipo “con contador”, que además evitan tener que marcar el ancho en pixels).
  • El idioma de la anotación: para los blogs en español, se da la opción de “Español de España” o “Español de Latinoamérica”… aunque elijas la opción que elijas, el resultado es el mismo.
  • Opciones avanzadas: basta con no seleccionar “Asíncrono” e incluir la URL seleccionada.

Google+ Share Button

Pinterest

El widget de Pinterest está especialmente recomendado para las webs con una fuerte carga de imagen. En este blog este botón está incluido sólo en las páginas con infografías, como este post de 10 Datos de redes sociales en España que quizás no conoces[Infografía]. Permite configurar:

  • El tipo de widget: Pin-it Button, Follow Button, Pin Widget, Profile Widget o Board Widget. Para compartir una página, hay que seleccionar Pin-it Button.
  • El tipo de botón.
  • El diseño: el tamaño (pequeño o grande), la forma (rectangular o circular), el color (gris, rojo o blanco) y el idioma (los botones de Pinterest de este blog son pequeños, rectangulares y grises).
  • El tipo de contador: encima del botón, en horizontal o sin contador.
  • La URL de la página.
  • La URL de la imagen que se quiere pinear.
  • La descripción de la imagen.

Botón para compartir de Pinterest

Y tú, ¿qué tipo de botones para compartir utilizas en tu web o blog?

Foto: FreeDigitalPhotos

Si te ha gustado este post, quizás te interese leer:

Cómo personalizar el dominio de tu blog en Blogger [Tutorial]

3 Herramientas para diseñar infografías para tu blog, paso a paso.

5 Webs de imágenes gratis para tu blog (y algunos consejos)

También te podría interesar

8 Comentarios

  • Reply Toni enero 29, 2014 at 11:14 am

    Hola María,

    A nivel de velocidad de carga de una página web, ¿es mejor usar estos scripts o sharethis/addthis?

    Saludos!

    • Reply María Lázaro enero 29, 2014 at 10:40 pm

      Hola Toni, si te soy sincera, no tengo datos de comparación sobre cómo varía, para una misma página, la velocidad de carga si se utilizan scripts o pluggings tipo addthis. En cualquier caso, para salir de dudas sobre si el tiempo de carga de la página está optimizado o no, te recomiendo que utilices Woorank: es una herramienta gratuita que realiza un chequeo muy completo en apenas unos segundos. Saludos

  • Reply Fran Barrero mayo 29, 2014 at 1:27 pm

    Hola María, con el botón share a link de twitter se consigue que la gente tenga acceso a la principal del blog. Pero y quiero que se tenga acceso al artículo desde donde el que se ha compartido.

    Es decir, como tenéis vosotros justo debajo de la foto, en el boton twitear.

    Como se crea ese boton?

    Gracias

    • Reply María Lázaro mayo 29, 2014 at 8:08 pm

      Hola Fran, en este blog, yo personalizado cada uno de los botones de compartir específicamente para cada artículo. Utilizo el botón share a link de Twitter, pero lo personalizo en cada artículo con la URL específica de la página concreta. Saludos,

  • Reply jk st junio 15, 2014 at 7:16 pm

    hola muy buenas tengo una duda, como hacer para que cuando compartan mis publicaciones de facebook , me aumenten el me gusta de mi pagina de facebook sabes que plugin se necesita???

  • Reply Cristian Almeciga noviembre 4, 2014 at 3:02 am

    Hola, estoy escribiendo un blog de anecdotas y comentarios, perosnalemten no se como hacer para que aumente la audiencia, que me aconsejas para aumentarla?

    este es el link: http://pedd2014.blogspot.com/

  • Reply maria jose san martin noviembre 27, 2014 at 9:22 pm

    Buenas noches quiero eliminar de mi blog de blogger los gadgets de sharealohic. ¿Qué tengo que hacer? Gracias

  • Reply Sentin agosto 8, 2015 at 7:01 am

    El problema es que así cada uno sale de su padre y de su madre (osea todos con distintos tamaños y formas) y no hay manera de ponerlos juntos y que queden bien. Yo esto probando desde hace ya varios días distintas opciones aquí.

  • Deja tu comentario