Como usar la función Share (compartir) en Ionic con Capacitor
Compartir contenido desde una app móvil es una de las funciones más comunes, útiles e imprescindibles hoy en día. Ya sea un enlace, una imagen o un texto, con Capacitor puedes hacerlo fácilmente usando su plugin oficial Share.
En este artículo te enseño paso a paso cómo implementarlo en tu proyecto de Ionic.
1. ¿Qué es el plugin Share de Capacitor?
El plugin @capacitor/share
te permite abrir el menú nativo de compartir del sistema (Android, iOS, Web) para que el usuario elija con qué aplicación quiere compartir información (WhatsApp, Telegram, Email, etc.).
Es ideal para apps que necesitan difundir enlaces, invitaciones, promociones o cualquier contenido generado por el usuario.
2. Instalación del plugin
En tu proyecto Ionic, abre la terminal y ejecuta:
npm install @capacitor/share npx cap sync
3. Uso básico en tu componente
Abre el archivo del componente donde quieras usar la función (por ejemplo, home.page.ts
) y añade lo siguiente:
import { Component } from '@angular/core'; import { Share } from '@capacitor/share'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { async share() { await Share.share({ title: 'Mi App Ionic', text: '¡Descubre esta increíble app hecha con Ionic!', url: 'https://miapp.com', dialogTitle: 'Compartir con...' }); } }
4. Añadir el botón en la interfaz
En el archivo home.page.html
, puedes usar un botón con icono para llamar a la función:
<ion-content class="ion-padding"> <ion-button expand="full" color="primary" (click)="share()"> <ion-icon name="share-social-outline" slot="start"></ion-icon> Compartir </ion-button> </ion-content>
Cuando el usuario pulsa el botón, se abrirá el menú nativo de compartir del dispositivo.
Allí podrá elegir apps como:
-
WhatsApp
-
Telegram
-
Correo electrónico
-
Copiar al portapapeles
-
Notas, etc.
El plugin detecta automáticamente las opciones disponibles según el sistema operativo.
Deja una respuesta