El verano pasado, escribí The Essential Meta Tags for Social Media sobre cómo los desarrolladores pueden preparar páginas web para optimizar su apariencia cuando se comparten en las redes sociales. Pero, ¿qué pasa con la creación de enlaces para permitir que los usuarios compartan estas páginas web? Facebook, Twitter y LinkedIn ofrecen numerosas formas de hacer esto, algunas con generadores de botones y otras que requieren JavaScript externo. Sin embargo, para evitar todo eso, puede crear sus propios enlaces para compartir páginas web. Y la mejor parte es que es fácil de hacer usted mismo. Así es cómo.
Concepto básico: solo un enlace
Cuando comparte páginas web mediante enlaces, básicamente envía una solicitud GET (es decir, hace clic en un enlace) a una URL proporcionada por cada servicio de redes sociales. Luego, al agregar una serie de pares de nombre / valor (parámetros de consulta como? Título = Título) al final de esta URL, puede especificar la URL de la página web que desea compartir y, a veces, información adicional.
Ahora, ciertos símbolos en las solicitudes GET, conocidos como “caracteres reservados”, deben codificarse correctamente 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.
| ! | # | PS | Y | ‘ | ( | ) | * | + |
|---|---|---|---|---|---|---|---|---|
| % 21 | % 23 | % 24 | % 26 | % 27 | % 28 | % 29 | % 2A | % 2B |
| , | / | : | ; | = | ? | @ | [ | ] |
|---|---|---|---|---|---|---|---|---|
| % 2C | % 2F | % 3A | % 3B | % 3D | % 3F | % 40 | % 5B | % 5D |
Nota: Un espacio se puede representar por “% 20” o “+”.
Por supuesto, no es necesario memorizar estos códigos hexadecimales. Hay muchos recursos que brindan conversiones (Bing tiene uno integrado en el motor de búsqueda) y, como verá pronto, JavaScript también puede manejar 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.
Según 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/shareSi bien hay cuatro parámetros de consulta disponibles, solo se requieren dos: la URL de la página web que desea compartir y una ID de aplicación, que los desarrolladores pueden obtener registrándose en Facebook. Si no tiene un ID de aplicación, el proceso de registro no es oneroso, pero no hay necesidad de preocuparse cuando existe una solución aún más simple.
El método original de Facebook para compartir páginas web, sin el ID de aplicación requerido, ya no se menciona en ninguna de sus documentación, pero aún es compatible. De hecho, con innumerables sitios web que utilizan este método, no puedo imaginar que se desaproveche 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 desea compartir. Aquí hay un ejemplo que comparte la página de inicio de Programar Plusen Facebook: adelante, corte y pegue en un navegador para ver el resultado.
https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F
Como se explicó 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 están separados por “&” como se verá en breve.
Gorjeo
Twitter se refiere a compartir una página web a través de una URL como un Tweet Web Intent; la URL que se debe usar es:
https://twitter.com/intent/tweetA diferencia de Facebook, donde solo se puede especificar la página web que se comparte, Twitter le permite agregar texto y cualquier número de hashtags. Los usuarios tendrán la oportunidad de editar todo esto antes de twittear, pero les da una ventaja en caso de que no puedan ser molestados. Por ejemplo, supongamos que desea twittear la siguiente información:
| parámetro | valor |
|---|---|
| url | https://openvpn-client.megasupersecretplace.com:5757/ |
| texto | Consejos, trucos y técnicas sobre el uso de hojas de estilo en cascada. |
| etiquetas | css html |
La URL para eso, con los parámetros de consulta codificados porcentualmente y los saltos de línea agregados 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 que el usuario pueda editarlo fácilmente. Y recuerde, el tweet debe tener menos de 140 caracteres, por lo que es mejor no proporcionar ninguna copia que sea demasiado larga. En aras de la simplicidad, omití discutir tres parámetros menos utilizados, que se pueden encontrar descritos en detalle en Documentación para desarrolladores de Twitter. Estos parámetros adicionales le permiten especificar el nombre de usuario asociado con el tweet, nombres de usuario relacionados sugeridos y una identificación de un tweet relacionado.
La URL para usar al compartir en LinkedIn es:
https://www.linkedin.com/sharing/share-offsite/?url=https://css-tricks.comEn total, hay cinco parámetros disponibles como se detalla en este cuadro tomado de la documentación de desarrolladores de LinkedIn:
| Parámetro | Descripción | Longitud máxima | Requerido |
|---|---|---|---|
| url | La URL codificada en URL de la página que desea compartir. | 1024 | sí |
| mini | Un argumento obligatorio cuyo valor siempre debe ser: verdadero | 4 | sí |
| título | El valor del título codificado en URL que desea utilizar. | 200 | No |
| resumen | 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 desea compartir, se requiere otro parámetro de consulta llamado “mini”. Pero, como puede ver, su valor nunca cambia, por lo que podemos codificarlo en la URL. Para demostrarlo, compartamos lo siguiente en LinkedIn:
| parámetro | valor |
|---|---|
| url | https://css-tricks.com/ |
| título | Programar Plus |
| resumen | Consejos, trucos y técnicas sobre el uso de hojas de estilo en cascada. |
| fuente | Programar Plus |
Esto da la siguiente URL; nuevamente, se agregaron saltos de línea para mayor claridad:
https://www.linkedin.com/shareArticle
?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
Si bien 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"> desde la página compartida. Del mismo modo, si se omite el parámetro “resumen”, la etiqueta Open Graph <meta property="og:description"> se utiliza. En cuanto al parámetro “fuente”, nada en la documentación especifica cómo se usa 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, basta con especificar la URL, ya que los parámetros de “título” y “resumen” se completarán adecuadamente.
Poniendolo todo junto
Ahora que conocemos la sintaxis que debemos utilizar al compartir páginas web en las redes sociales, ¿cómo podemos implementar este código exactamente? Quizás la forma más común es simplemente enumerar un grupo de enlaces para compartir con el estilo apropiado con CSS:
<ul>
<li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="https://css-tricks.com/simple-social-sharing-links/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="https://css-tricks.com/simple-social-sharing-links/twitter-icon.png" alt="Share Page on Twitter" /></a></li>
<li><a href="https://www.linkedin.com/sharing/share-offsite/?..." target="blank" rel="noopener noreferrer"><img src="https://css-tricks.com/simple-social-sharing-links/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 cuadro de diálogo para compartir aparezca en una nueva ventana o pestaña, lo que funciona bien en todos los dispositivos, desde el escritorio hasta el móvil.
Pero codificar estos enlaces, con la codificación porcentual de los parámetros de consulta, puede ser tedioso y propenso a errores. Para cualquier página web servida dinámicamente por un CMS, esta sería la oportunidad perfecta para que este procesamiento de datos se realice en el lado del servidor y se inserte donde sea necesario en el HTML.
Otra opción es usar Social Media Sharing: HTML Links Generator que creé en CodePen. Esto le permite ingresar cualquiera o todos los parámetros necesarios que acabamos de revisar, y generará el HTML apropiado para que lo inserte en su propio código.
Como desarrollador web autónomo que trabaja casi exclusivamente en el front-end, he optado por utilizar la funcionalidad 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 se manejarán correctamente, ya sea que esté trabajando en un sitio web estático, personalizando temas de WordPress o entregando plantillas para que se integren en un CMS.
Este es el HTML que uso, con clases que designan el servicio de uso compartido en particular. En JavaScript, la función setShareLinks(), que adjunta click eventos a los botones de compartir, se llama cuando el Modelo de objetos de documento (DOM) está listo:
<ul>
<li class="social-share facebook"><img src="https://css-tricks.com/simple-social-sharing-links/facebook-icon.png" alt="Share Page on Facebook" /></li>
<li class="social-share twitter"><img src="https://css-tricks.com/simple-social-sharing-links/twitter-icon.png" alt="Share Page on Twitter" /></li>
<li class="social-share linkedin"><img src="https://css-tricks.com/simple-social-sharing-links/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[property='og:description']").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 document objeto. Y, para Twitter, la etiqueta Open Graph <meta property="og:description"> proporciona convenientemente el contenido apropiado para un tweet predeterminado.
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 coloca horizontal y verticalmente centrada en la pantalla. Curiosamente, si un usuario inicia sesión en 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, así que utilizo un ancho y un alto predeterminados que le proporcionan 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. Puede encontrar una demostración de esta funcionalidad en CodePen.
Pero el uso de una ventana emergente, aunque alguna vez fue común, ahora está mal visto por razones de accesibilidad. Una solución simple es establecer la variable params a una cadena vacía en el JavaScript anterior. Al hacerlo, se abre la URL en una nueva ventana o pestaña, según la configuración del navegador del usuario.
Conclusión
Como dice el espantoso refrán, hay muchas formas de despellejar a un gato. La técnica anterior es simplemente mi método preferido. Es posible que tenga una forma mejor y más optimizada. Quizás usando atributos de datos en el HTML (para especificar hashtags, por ejemplo) que puedan leerse con JavaScript y agregarse como un parámetro de consulta cuando sea necesario. Con suerte, esto puede servir al menos como inspiración para su propia implementación.