Botón de Compartir: Facilita el Compartir Contenido con este Práctico Botón



Aprende sobre un botón de compartir simple y efectivo para facilitar la difusión de contenido en línea.

Este código HTML utiliza una combinación de estilos y funciones de JavaScript para crear un botón de compartir atractivo y funcional.

El botón está diseñado con SVG para un aspecto moderno y elegante, y cuando se hace clic, activa la función 'nativeShare' en JavaScript.

Esta función comprueba si el navegador admite la API 'navigator.share', que permite compartir contenido de manera nativa en dispositivos móviles y navegadores compatibles.

Si es así, se abre una ventana emergente con opciones para compartir el título del contenido, una descripción y el enlace del mismo.

Este botón de compartir es una herramienta valiosa para fomentar la difusión de contenido en redes sociales y aumentar la visibilidad en Google y otras plataformas en línea.

¡Intégralo en tu sitio web para promover una mayor interacción y participación de los usuarios!


 

<html> <head> <meta charset="utf-8"></meta> <meta content="width=device-width, initial-scale=1" name="viewport"></meta> <title>Boton de compartir</title> <style type="text/css"> body{ height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } button{ position: absolute; border: none; background-color: transparent; } svg{ background-color: rgb(50, 50, 50, .7); padding: 5px; border-radius: 10px; width: 60px; height: 60px; color: rgb(255, 255, 255); } </style> </head> <body> <button onclick="return nativeShare();"> <svg class="bi bi-share" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"> </path></svg> </button> <script type="text/javascript"> var nativeShare = function() { if (navigator.share) { navigator.share({ title: "Titulo aquí", text: "Descripción aquí", url: "Link aquí", }) } return false; } </script> </body> </html>

Comentarios

Publicar un comentario

Entradas populares

Noticias

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *