Cómo agregar botones de compartir en redes sociales a un email (sin JavaScript)

Una limitación al editar la newsletter de un sitio web, de hecho, al redactar cualquier mensaje de email, es que por razones de seguridad se bloquea la mayor cantidad de código ejecutable incluyendo el relacionado a JavaScript que es el que da vida a botones como el “Me gusta” de Facebook o el “Pinear” de Pinterest.

Pues bien, entre los muchos servicios que generan códigos de botones de compartir en redes sociales de forma automática, se destaca el servicio sencillo de AddThis que permite crear, a partir de una URL, una buena cantidad de botones totalmente personalizables, de fácil integración y que no requieren JavaScript. Para esto, luego de tener lista la URL a compartir, la de la newsletter o la del contenido que se quiera enlazar para que sea compartido en redes sociales, será suficiente con ir a AddThis/get/sharing y seguir 4 sencillos pasos:

botones sociales addthis no javascript

1. En el campo de Get sharing buttons elegir “Email Newsletter”
2. Más abajo, en URL to share, pegar la URL que se quiere compartir.
3. Un poco más abajo, elegir el estilo de los botones.
4. Pulsar el botón Grab it para copiar el código generado y pegarlo dentro del código HTML de la newsletter o cualquier otro email en redacción.

Para personalizar un poco más los botones resultantes, por ejemplo, para mostrar los botones únicamente de determinadas redes y no sólo de Facebook y Twitter, hay dos opciones: La primera es elegir el primer estilo de botones (el del Paso 3 de nuestra guía) que es un botón alargado especial que al darle clic llevará un espacio en el que el usuario podrá elegir cualquiera de las 300 redes compatibles con AddThis.

La otra opción es editar directamente el código generado que no es más que simples enlaces sobre imágenes, así que la clave es simplemente copiar botones y reemplazar nombres. Simple: Si se quiere crear el botón de Reddit a partir del de Facebook, se copia y se pega el de Facebook…

<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmisitioweb.com%2F2104%2Fnewsletter&pubid=xa-53551912096e7a72" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="facebook" />

…y en los tres lugares (enlace, imagen y alt) donde dice facebook, se pone la palabra reddit que dentro del listado de nombres dados por AddThis es el nombre correspondiente al botón de Reddit

<a href="http://api.addthis.com/oexchange/0.8/forward/reddit/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmisitioweb.com%2F2104%2Fnewsletter&pubid=xa-53551912096e7a72" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/reddit.png" border="0" alt="reddit" />

También se puede cambiar la URL de los iconos para poner imágenes propias. Para visualizar las estadísticas de los botones, hará falta registrarse en AddThis. [Vía: Blog de AddThis]

Juan David Quiñónez

Estadístico. Amante de las nuevas tecnologías, la ciencia, el mundo académico y las aplicaciones de las anteriores temáticas en la red. Escribe en wwwhatsnew.com desde finales del 2011.

3 comentarios

  1. Además de esto también es posible modificar el código para que no se comparta la web general, sino la newsletter enviada.

    Por ejemplo en el caso nuestro, se podría cambiar:

    http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmisitioweb.com%2F2104%2Fnewsletter&pubid=xa-53551912096e7a72

    Por:

    http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=web_version%2F2104%2Fnewsletter&pubid=xa-53551912096e7a72

    Y cada vez que se enviase la newsletter se sustituiria el código por la URL de la newsletter enviada :)