Como usar la función Share (compartir) en Ionic con Capacitor

4/10/2025

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.

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:

   Compartir

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.

Publicado originalmente en modestocabraldev.com.

Compartir artículo

Si te ha resultado útil, compártelo con alguien que esté construyendo su portfolio.