▷ Social Sharing【 Ionic 】 De 0 a 100 ¡Úsalo como un pro!

¿Interesado en que tus usuarios puedas compartir tu contenido en sus redes y que tu recibas más descargas desde esos enlaces? O, quizás ya sabes cómo hacer eso, y lo que tienes es alguna pregunta referente al paquete Social Sharing de Ionic ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a integrar el paquete Social Sharing de Ionic para que tu app reciba más descargas a través del contenido que tus usuarios han compartido desde dentro de tu aplicación.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Instalación del componente Social Sharing

Como en todos los tutos que vas siguiendo hasta ahora, vamos a ver cómo podemos realizar la instalación del módulo.

En primer lugar, tenemos que ejecutar los siguientes dos comandos:

ionic cordova plugin add cordova-plugin-x-socialsharing
npm install --save @ionic-native/social-sharing

El primero instalará el plugin de Cordova en la aplicación para poder interactuar con la parte nativa y el segundo instala el código TS para que podamos interactuar con el plugin.

Ahora tenemos que incluir en nuestros providers el componente de la siguiente manera:

providers: [
    ....,
    SocialSharing,
    ....,
]

Y listo, ya tenemos la posibilidad de inyectarlo dentro de nuestros componentes. Pasemos al siguiente paso.

Configuración el módulo Ionic Social Sharing

Me estoy cansando de incluir esta sección solo porque algunos de los componentes la necesiten. En este caso no, no es necesaria ninguna configuración adicional. A menos, claro, que tengamos nosotros una clase extendida de Social Sharing que lo necesite. Pero eso os lo explicaré más adelante en el curso. Es más, esta técnica es muy, pero que muy, potente cuando ya sabemos desarrollar como es debido.

La chicha, como podemos usar Social Sharing

Bien, primero vamos a ver un poquito de código donde ejemplarizamos, por ejemplo, el envío de un mail mediante el sistema:

import { SocialSharing } from '@ionic-native/social-sharing/ngx';

constructor(private socialSharing: SocialSharing) { }

...

// Check if sharing via email is supported
this.socialSharing.canShareViaEmail().then(() => {
  // Sharing via email is possible
}).catch(() => {
  // Sharing via email is not possible
});

// Share via email
this.socialSharing.shareViaEmail('Body', 'Subject', ['recipient@example.org']).then(() => {
  // Success!
}).catch(() => {
  // Error!
});

Como ves, es muy sencillito de usar.

Primero, como es costumbre, a menos que uses PhpStorm, o WebStorm, que por cierto lo aconsejo encarecidamente, tendremos que importar la clase SocialSharign. Esto lo vemos en la primera línea.

El segundo paso será inyectarlo en nuestro constructor y listo, ya está disponible para usarse.

En el ejemplo, primero preguntamos si podemos usar la posibilidad de enviar un email con la función “canShareViaEmail” que tendremos que controlarlo con un “then” y un “catch” al tratarse de una promesa.

En caso de que la respuesta sea afirmativa, que podemos usar el envío de email, usaremos la segunda función llamada “shareViaEmail”. La que nos permite mostrar el dialogo de sistema con la opción de compartir por email pasando los parámetros que queremos enviar dentro de la misma función.

El primer parámetro es el cuerpo del mensaje, el segundo es el asunto del mismo y el tercero contiene un array en el que podemos meter todos los mails a donde lo queremos mandar. Curioso ¿verdad?

Para terminar, tendremos que controlar la promesa que devuelve como siempre con un “then” y un “catch” y listo. El usuario ya podrá enviar todos los mails que nosotros queramos y a los destinatarios que el usuario quiera.

Campos y funciones de Social Sharing

Ahora vamos a ver con un poco más de profundidad lo que podemos hacer con todo este tinglado que hemos montado:

share(mensaje, asunto, archivo, url)

Nos permite abrir un cuadro de dialogo para que el usuario seleccione el método para compartir el contenido.

Mensaje -> string -> El mensaje que queremos enviar.
Asunto -> string -> En caso de que sea email, el asunto que queremos poner.
File -> string -> Si queremos enviar un adjunto, la ruta de este.
Url -> string -> Si queremos enviar un enlace, este es el sitio donde ponerlo.
Retorno -> Promesa -> Lleva adjunto si se ha producido todo correctamente.

shareWithOptions(options) en Social Sharing

Solo disponible en Android e Ios y nos permite crear un choser, como la función anterior, pero con más configuración.

Options -> object -> Un objeto creado a partir de pares de clave valor con las siguientes claves:
- Message -> El mensaje que queremos enviar.
- Subject -> El asunto que queremos enviar.
- Files -> En caso de archivos.
- Url -> En caso de contener enlaces.
- chooserTitle -> El título que aparecerá en la parte de arriba de nuestro modal de compartir. Algo como “Comparte vía….”.
- Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

Es muy posible que hasta que no pruebes este método, si no lo has hecho ya, que no entiendas lo del chooser. Así que pruébalo y después nos cuentas si te ha molado o no.

canShareVia(nombreApp, mensaje, asunto. imagen, url)

El similar a los demás, pero solicita un permiso antes para ver si se puede compartir mediante una aplicación específica.

En este caso, el parámetro “nombreApp” consulta al usuario si “podemos” compartir X contenido mediante una aplicación específica.

La variable nombreApp puede ser tanto el nombre de la aplicación, por ejemplo “Instagram” o el nombre del paquete de dicha aplicación, por ejemplo “com.apple.social.facebook”. ¿Entiendes por dónde voy? Para que te hagas una idea, para whatsapp sería similar. En nombreApp podríamos pasarle “WhatsApp” y pediría permiso para publicarlos a través de la aplicación de WhatsApp.

nombreApp -> string -> El nombre de la aplicación mediante la cual quieres compartir el contenido.
Mensaje -> string -> El mensaje que queremos adjuntar.
Asunto -> string -> Pues el asunto del mensaje.
Url -> string -> En el caso de que queramos incluir un enlace.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaTwitter(mensaje, imagen, url)

Vamos, más de lo mismo. En este caso, sería para compartirlo directamente en Twitter.

Mensaje -> string -> El mensaje que queremos enviar.
Image - > string -> La ruta de la imagen interna que queremos compartir.
Url -> string -> En caso de que queramos compartir un enlace.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaFacebook(mensaje, imagen, url)

Más de lo mismo…

Mensaje -> string -> El mensaje que queremos enviar.
Imagen -> string -> La ruta de la imagen.
Url -> string -> En caso de que queramos compartir un enlace.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaFacebookWithPasteMessageHint(message, image, url, pasteMessageHint)

Bueno, aquí tenemos uno que difiere un poco del resto. Pero para el caso, y como ejercicio, te voy a dejar que lo pruebes y que luego vengas a la caja de comentarios y me expliques tu a mí para qué sirve el cuarto parámetro. Lógicamente yo ya lo sé, pero quiero que me lo expliques tú. A ver qué tal se te ha dado.

shareViaInstagram(mensaje, imagen)

Pues este para Instagram. Como sabrás, en esta red social no se pueden publicar enlaces ni archivos, solo imágenes y texto, así que por esa razón solo tiene esos dos parámetros.

Mensaje -> String -> El mensaje que queremos que se muestre en la publicación
Imagen -> String -> La ruta interna de la imagen que queremos compartir.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaWhatsApp(mensaje, imagen, url)

Más de lo mismo, pero esta vez comparte directamente en WhatsApp. Se te abrirá una ventana en la que te permitirá elegir a la persona a la que se lo quieres enviar.

Mensaje -> String -> El mensaje que queremos que se muestre.
Imagen -> String -> La ruta interna de la imagen que queremos compartir.
Url -> String -> En caso de enlace, ponerlo aquí.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaWhatsAppToReceiver(receptor, mensaje, imagen, url)

Con esta función, le podemos decir, mediante el nombre de la persona, al contacto que se lo queremos enviar. Siempre y cuando el nombre de la persona esté especificado igual que está en WhatsApp.

Ah, que se me olvidaba, el nombre lo tenemos que poner en el parámetro receiver.

Receptor -> String -> El nombre, igual que el de WhatsApp, de la persona a la que se lo queremos enviar.
Mensaje -> String -> El mensaje que queremos enviar.
Imagen -> String -> La ruta de la imagen que queremos enviar.
Url -> String -> En caso de que exista un enlace, colocarlo aquí.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaSms(mensaje, numeroDeTelefono)

Este ya es un poco diferente, menos mal J. Con esta función tenemos la posibilidad de enviar por SMS la información que necesitemos.

Mensaje -> String -> El mensaje que queremos mandar.
NumeroDeTelefono -> String -> El número de teléfono de la persona a la que queremos enviar el mensaje.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

Esta función solicitará los permisos en tiempo de ejecución para poder enviar dicho mensaje. El usuario tendrá que elegir si quiere darle los permisos o no.

canShareViaEmal() en Social Sharing

Comprueba si la aplicación reúne los permisos necesarios para poder compartir vía email

Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareViaEmail(mensaje, asunto, para, enCopia, enCopiaOculta, archivos)

Comparte contenido mediante un email.

Mensaje -> String -> El mensaje que queremos adjuntar al email.
Asunto -> String -> El asunto del mensaje que vamos a enviar.
Para -> String[] -> Un array de Strings que contiene los destinatarios del mensaje. Tiene que ser un array indexada.
EnCopia -> String[] -> Un array de Strings que contiene los email de los usuarios que quieres que estén en copia del mensaje.
EnCopiaOculta -> String[] -> Un array de String que contiene los email de los usuarios que quieres que estén en copia oculta del mensaje.
Archivos -> String / String[] -> Un String para uno, un array de Strings para varios, con las rutas locales de los archivos que quieres compartir.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

shareVia(nombreApp, mensaje, asunto, imagen, url)

Otro método de compartir genérico. Aquí le puedes decir, en el parámetro nombreApp, la aplicación con la que lo quieres sharear.

NombreApp -> String -> El nombre, o paquete, de la aplicación con la que vas a intentar compartir el contenido.
Mensaje -> String -> El mensaje que quieres compartir.
Asunto -> String -> El asunto del mensaje que quieres compartir.
Imagen -> String -> La ruta interna de la imagen que quieres compartir.
Url -> String -> En caso de que quieras compartir un enlace, este es el sitio donde lo tienes que poner.
Retorno -> promesa -> Lleva consigo el resultado de si se ha enviado correctamente o no.

setIPadPopupCoordinates(dimensionesCaja)

Esta función nos permite definir lo grande que queremos mostrar la caja que se mostrará en los dispositivos Ipad.

dimensionesCaja -> String -> en este orden y separados por comas tienes que ajustar los valores: izquierda, arriba, ancho, alto. Siendo izquierda el eje X y arriba el eje Y.

Tutorial en video por si no te gusta leer

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Sin nada más que agregar, me despido ya. Nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!

Social Sharing Ionic | Consigue que tus usuarios compartan tu contenido