El verano pasado escribí The Essential Meta Tags for Social Media sobre cómo los desarrolladores pueden preparar las páginas web para optimizar su apariencia cuando se comparten en las redes sociales. Pero, ¿qué pasa con la creación de los enlaces que permiten a los usuarios compartir estas páginas web? Facebook, Twitter y LinkedIn ofrecen numerosas formas de hacerlo, algunas con generadores de botones y otras que requieren JavaScript externo. Sin embargo, para evitar todo eso, puedes crear tus propios enlaces para compartir páginas web. Y lo mejor es que es sencillo hacerlo tú mismo. Aquí está cómo.
Concepto básico: Sólo un enlace
Cuando se comparten páginas web utilizando enlaces, esencialmente estás enviando una solicitud GET (es decir, haciendo clic en un enlace) a una URL proporcionada por cada servicio de medios sociales. A continuación, añadiendo una serie de pares nombre/valor (parámetros de consulta como ?title=Title) al final de esta URL, puede especificar la URL de la página web que desea compartir y, a veces, información adicional.
Ahora bien, ciertos símbolos en las solicitudes GET, conocidos como «caracteres reservados», deben codificarse adecuadamente para no interferir con las funciones normales del navegador. Estos caracteres están sujetos a una «codificación porcentual», es decir, se representan en los parámetros de consulta con un «%» seguido de un código hexadecimal de dos dígitos. ¡Estos son los caracteres reservados y sus equivalentes codificados en porcentaje.
| ! | # | $ | & | ‘ | ( | ) | * | + |
|---|---|---|---|---|---|---|---|---|
| %21 | %23 | %24 | %26 | %27 | %28 | %29 | %2A | %2B |
| , | / | : | ; | = | ? | @ | ||
|---|---|---|---|---|---|---|---|---|
| %2C | %2F | %3A | %3B | %3D | %3F | %40 | %5B | %5D |
Nota: Un espacio puede ser representado por «%20» o «+».
Por supuesto, no es necesario memorizar estos códigos hexadecimales. Hay muchos recursos que proporcionan conversiones (Bing tiene una incorporada en el motor de búsqueda) y, como pronto verás, JavaScript también puede hacer el trabajo pesado en este sentido. Veamos algunos de los servicios de redes sociales más populares y aprendamos cómo podemos compartir páginas web a través de ellos.
Por su Guía del Desarrollador, Facebook especifica la siguiente URL para enviar solicitudes GET al compartir una página web:
https://www.facebook.com/dialog/shareAunque hay cuatro parámetros de consulta disponibles, sólo se requieren dos: la URL de la página web que se quiere compartir y un ID de la aplicación, que los desarrolladores pueden obtener registrándose en Facebook. Si no tienes un App ID, el proceso de registro no es oneroso, pero no hay necesidad de molestarse cuando existe una solución aún más sencilla.
El método original de Facebook para compartir páginas web, sin el App ID requerido, ya no se menciona en ninguna de sus documentaciones, pero sigue siendo compatible. De hecho, con innumerables sitios web que utilizan este método, no puedo imaginar que sea obsoleto pronto. Esta URL es:
https://www.facebook.com/sharer.phpEl único parámetro disponible es «u», que se utiliza para especificar la URL de la página web que quieres compartir. Aquí tienes un ejemplo que comparte la página principal de CSS-Tricks en Facebook – adelante, corta y pega en un navegador para ver el resultado.
https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F
Como se ha explicado anteriormente, la URL compartida está necesariamente codificada en porcentaje. Además, observe cómo «?» designa el inicio del primer parámetro de consulta. Los parámetros de consulta posteriores se separan con «&», como se verá en breve.
Twitter se refiere a la compartición de una página web a través de la URL como un Tweet Web Intent – la URL a utilizar es:
https://twitter.com/intent/tweetA diferencia de Facebook, donde sólo se puede especificar la página web que se comparte, Twitter permite añadir algo de texto y cualquier número de hashtags. Los usuarios tendrán la oportunidad de editar todo esto antes de tuitear, pero les da una ventaja en caso de que no puedan molestarse. Por ejemplo, digamos que quieres tuitear la siguiente información:
| parámetro | valor |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| texto | Consejos, trucos y técnicas de uso de las hojas de estilo en cascada. |
| hashtags | css html |
La URL para eso, con los parámetros de consulta codificados en porcentaje y los saltos de línea añadidos para mayor claridad, es:
https://twitter.com/intent/tweet?url=http%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,htmlY eso te da:
Notarás que Twitter preselecciona el texto, lo que permite una fácil edición por parte del usuario. Y, recuerda, el tuit tiene que tener menos de 140 caracteres, así que mejor no suministrar una copia demasiado larga. En aras de la simplicidad, he omitido hablar de tres parámetros menos utilizados, que se pueden encontrar descritos en detalle en la documentación para desarrolladores de Twitter. Estos parámetros adicionales permiten especificar el nombre de usuario asociado al tuit, los nombres de usuario relacionados sugeridos y un ID de un tuit relacionado.
La URL a utilizar cuando se comparte en LinkedIn es:
https://www.linkedin.com/shareArticleEn total, hay cinco parámetros disponibles como se detalla en este cuadro tomado de la documentación para desarrolladores de LinkedIn:
| Parámetro | Descripción | Longitud máxima | Requerida |
|---|---|---|---|
| url | La URL codificada en url de la página que se desea compartir. | 1024 | Sí |
| mini | Un argumento obligatorio cuyo valor debe ser siempre: true | 4 | Sí |
| title | El valor del título codificado en url que se desea utilizar. | 200 | No |
| summary | La descripción codificada en url que desea utilizar. | 256 | No |
| fuente | La fuente codificada en url del contenido (por ejemplo. su sitio web o el nombre de la aplicación) | 200 | No |
Además de la URL de la página web que se quiere compartir, se requiere otro parámetro de consulta llamado «mini». Pero, como puedes ver, su valor nunca cambia, así que podemos codificarlo en la URL. Para demostrarlo, vamos a compartir lo siguiente en LinkedIn:
| parámetro | valor |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| title | CSS-Tricks |
| summary | Tips, Trucos y técnicas sobre el uso de las hojas de estilo en cascada. |
| Fuente | CSS-Tricks |
Esto da la siguiente URL – de nuevo, saltos de línea añadidos para mayor claridad:
https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.css-tricks.com%2F&title=CSS-Tricks&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&source=CSS-Tricks
Aunque no se menciona explícitamente en su documentación, si se omite el parámetro «título», LinkedIn tomará este contenido de la etiqueta Open Graph <meta property="og:title"> de la página compartida. Del mismo modo, si se omite el parámetro «summary», se utilizará la etiqueta Open Graph <meta property="og:description">. En cuanto al parámetro «fuente», no hay nada en la documentación que especifique cómo se utiliza o se muestra este valor cuando se comparte una página web – parece que se puede ignorar con seguridad.
Sabiendo todo esto, si la página web que se comparte tiene el complemento adecuado de etiquetas Open Graph, bastará con especificar la URL, ya que los parámetros «título» y «resumen» se rellenarán adecuadamente.
Poniendo todo en orden
Ahora que conocemos la sintaxis que hay que utilizar al compartir páginas web en las redes sociales, ¿cómo podemos implementar exactamente este código? Tal vez la forma más común es simplemente enumerar un grupo de enlaces para compartir con el estilo adecuado con CSS:
<ul> <li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li> <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li> <li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>La adición de target="_blank" en la etiqueta de anclaje permite que el diálogo para compartir aparezca en una nueva ventana o pestaña, que funciona bien en todos los dispositivos, desde el escritorio hasta el móvil.
Pero la codificación dura de estos enlaces, con la codificación porcentual de los parámetros de consulta, puede ser tediosa y propensa a errores. Para cualquier página web servido dinámicamente por un CMS, esta sería la oportunidad perfecta para tener este crujido de datos realizado en el lado del servidor y se inserta donde sea necesario en el HTML.
Otra opción es utilizar el Social Media Sharing: Generador de Enlaces HTML que he creado en CodePen. Esto le permite introducir cualquiera o todos los parámetros necesarios que acabamos de revisar, y se emitirá el HTML apropiado para que usted pueda insertar en su propio código.
Ver el Pen Social Media Sharing: HTML Links Generator por Adam Coti (@adamcoti) en CodePen.
Como desarrollador web independiente que trabaja casi exclusivamente en el front-end, he optado por utilizar la funcionalidad de JavaScript/jQuery que, sin personalización, funciona como una solución llave en mano para mis proyectos. De esta manera, puedo estar seguro de que todos los enlaces para compartir serán manejados correctamente, ya sea que esté trabajando en un sitio web estático, personalizando temas de WordPress, o entregando plantillas para ser integradas en un CMS.
Este es el HTML que utilizo, con las clases que designan el servicio de intercambio en particular. En el JavaScript, la función setShareLinks(), que adjunta eventos click a los botones de compartir, se llama cuando el Modelo de Objetos del Documento (DOM) está listo:
<ul> <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li> <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li> <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li></ul>function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params);}function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent(jQuery("meta").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); jQuery(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }); jQuery(".social-share.linkedin").on("click", function() { url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl; socialWindow(url); })}La URL de la página web actual se adquiere fácilmente leyendo una propiedad del objeto document. Y, para Twitter, la etiqueta Open Graph <meta property="og:description"> proporciona convenientemente el contenido apropiado para un tweet por defecto.
Ahora, a petición de algunos de mis clientes, lanzo la URL recién formada en una ventana secundaria (emergente) de tamaño especial utilizando window.open(). En la mayoría de los navegadores de escritorio, esta ventana se sitúa horizontal y verticalmente centrada en la pantalla. Curiosamente, si un usuario está conectado a su cuenta de redes sociales, Facebook y LinkedIn cambiarán el tamaño de esta ventana secundaria a las dimensiones necesarias. Twitter no lo hace, por lo que utilizo una anchura y altura por defecto que le proporciona suficiente espacio. En cuanto a la capacidad de respuesta, las tabletas y los dispositivos móviles interpretan la ventana secundaria como una nueva pestaña. Una demostración de esta funcionalidad se puede encontrar en CodePen.
Ver el Pen Social Media Sharing: Automated Link Creator por Adam Coti (@adamcoti) en CodePen.
Pero el uso de una ventana emergente, aunque antes era común, ahora está mal visto por razones de accesibilidad. Una solución sencilla es establecer la variable params a una cadena vacía en el JavaScript anterior. Haciendo esto se lanza la URL en una nueva ventana o pestaña dependiendo de la configuración del navegador del usuario.
Conclusión
Como dice el truculento refrán, hay muchas maneras de despellejar a un gato. La técnica anterior es simplemente mi método preferido. Puede que tengas una forma mejor y más optimizada. Tal vez usando atributos de datos en el HTML (para especificar hashtags, por ejemplo) que pueden ser leídos por JavaScript y añadidos como un parámetro de consulta cuando sea necesario. Espero que esto pueda al menos servir de inspiración para su propia implementación.
Deja una respuesta