Compartir tu web por redes sociales con la Web Share API • Hablemos de Frontend

Revisemos cómo facilitar que un usuario comparta una página web por diferentes redes sociales utilizando el componente nativo del sistema operativo de su celular.

Para este caso de uso la API permitirá compartir la URL solo cuando el usuario esté en la versión mobile de su web. Por ello, vamos a agregar una alternativa para la versión desktop que solo permitirá copiar la URL.

Ventajas

El usuario ya está familiarizado con el flujo nativo para compartir contenido entre sus apps. Esto ayuda a mantener una experiencia de usuario más simple y estándar para la versión mobile.

No necesitamos dependencias extras en nuestro proyecto o crear un componente personalizado. Es una API del navegador sencilla de usar.

Consideraciones

Para aprovechar correctamente la API tenemos los siguiente puntos:

Usar un contexto seguro con HTTPS para nuestra web.
Invocar la API con una acción del usuario, como un click a un botón.
Validar que el navegador que esté usando el usuario soporte esta API.
Validar una opción alternativa si no hay soporte de la API o el usuario está usando la versión desktop de la web.

Flujo del caso de uso:

El usuario hace clic en el botón de compartir.
Si el dispositivo es móvil/tableta y soporta la Web Share API, se abre la interfaz nativa de compartir del dispositivo.
Si no, la URL se copia al portapapeles.
Si ocurre un error en cualquier paso, se imprime en la consola.

Ejemplo

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Compartir tu web por redes sociales con la Web Share API</title>
		<style>
			.share_btn {
				outline: none;
				border: none;
				background: none;
				cursor: pointer;
			}

			.share_btn:active {
				transform: scale(1.1);
			}
		</style>
	</head>
	<body>
		<button class="share_btn">
			<svg
				stroke="currentColor"
				fill="currentColor"
				stroke-width="0"
				viewBox="0 0 24 24"
				height="1em"
				width="1em"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M20 5.5a3.498 3.498 0 0 1-6.062 2.385l-5.112 3.021a3.498 3.498 0 0 1 0 2.188l5.112 3.021a3.5 3.5 0 1 1-.764 1.29l-5.112-3.02a3.499 3.499 0 1 1-3.843-5.642 3.499 3.499 0 0 1 3.843.872l5.112-3.021A3.5 3.5 0 1 1 20 5.5Zm-1.5 13a2 2 0 1 0-3.999-.001 2 2 0 0 0 3.999.001Zm0-13a2 2 0 1 0-3.999-.001A2 2 0 0 0 18.5 5.5ZM5.5 14a2 2 0 1 0 .001-3.999A2 2 0 0 0 5.5 14Z"
				></path>
			</svg>
		</button>
		<script>
			const isMobileOrTablet = () => {
				const userAgent = navigator.userAgent
				return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet|Silk|Kindle|PlayBook|BB10/i.test(
					userAgent
				)
			}

			const writeClipboardText = (text) => {
				navigator.clipboard.writeText(text).catch(console.error)
			}

			const onShare = (text = 'Compartir', url = location.href) => {
				if (!navigator.share || !isMobileOrTablet()) return writeClipboardText(url)
				navigator.share({ text, url }).catch(console.error)
			}

			const shareButtons = document.querySelectorAll('.share_btn')
			shareButtons.forEach((btn) => btn?.addEventListener('click', () => onShare()))
		</script>
	</body>
</html>

isMobileOrTablet: Esta función detecta si el dispositivo es un móvil o una tableta, evaluando el userAgent del navegador. Utiliza una expresión regular que verifica cadenas comunes en dispositivos móviles.
writeClipboardText: Si el dispositivo no soporta la Web Share API o no es móvil, se copia la URL actual al portapapeles utilizando la API de portapapeles.
onShare: Esta es la función principal para compartir. Recibe un objeto con el texto y la URL a compartir (por defecto, utiliza el título “Compartir” y la URL actual).
- Verifica si el dispositivo es móvil o tableta y si el navegador soporta la Web Share API.
- Si la condición se cumple, invoca la API, que abre la interfaz de compartir del dispositivo.
- Si la condición no se cumple, se copia la URL al portapapeles como fallback.
Evento de clic en los botones de compartir: Se seleccionan todos los elementos con la clase share_btn y se agrega un listener de clic a cada uno para que, al presionar el botón, se ejecute la función onShare.

¡Gracias por leer!

Si deseas profundizar más sobre esta API, puedes revisar el siguiente artículo del blog de Chrome: Integrate with the OS sharing UI with the Web Share API