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.

Avatar

Modesto

Desarrollador web

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta web usa cookies para mejorar y optimizar la experiencia del usuario. Más información