Ionic 5 Social Sharing plug-in Sample App

Ionic 5 sample app using Cordova SocialSharing plug-in

Introduction

In this sample app tutorial, we will show how to build an Ionic 5 app, where you can use Cordova SocialSharing plug-in to share links, images, and text messages out of the app on social platforms or by email.

Downloads and Resources

You can also try it yourself by creating from the backup:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create:
922922

Creating app from backup

But if you are interested in the detailed tutorial, please follow the steps below.

Creating App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 5 Blank as the application type, enter Ionic5 Social Sharing App as the app name, and click Create:
922922

Creating new app

  1. The app with two default pages, app and Screen1, will be created. Let's rename Screen1 to Share.
  2. Then, inside the app, navigate to Project > App Settings > Cordova plugins. Go to the Core Plugins tab, scroll down the list of plug-ins and enable the SocialSharing plug-in:
12441244

Enabling imported plugin

  1. Click the SAVE button in the App Builder Toolbar.

Adding Dependencies

Adding NPM Module

  1. Now, switch to Project > App settings > Npm modules and add a new Dependency: @ionic-native/social-sharing of version ^5.20.0:
12981298

Adding dependency

  1. Save the app changes by clicking the SAVE button in the App Builder Toolbar.

Importing Ionic Native Plug-in

  1. In the Project view, under the Pages folder, select the app page.
  2. Open the MODULE panel of the app page.
  3. In the Imports section, type in import { SocialSharing } from '@ionic-native/social-sharing/ngx';:
11271127

Iimports

  1. Then, scroll down to the NgModule Settings > Providers section and type SocialSharing into the text field:
10391039

Providers

  1. Save the changes.

Building UI

  1. Navigate to Pages > Share and select the DESIGN panel.
  2. Now, under the PROPERTIES panel, set the page Footer property to False.
  3. Then, select the Toolbar title component and change its Common > Text property to Sharing App:
16011601

Toolbar Title text

  1. Add the Text component to the screen, and under the Common tab, set its Text property to {{textToShare}} and the container property to p:
15951595

Text component

  1. Create a new Image element and under the Common tab, set its src property to {{imageToShare}}. Alt. Text is set to Image error:
16001600

Image component

  1. Then, add the Button component to the page. Under the Common tab, change its Text property to Share. To modify button appearance, unfold the Icon section, click the button next to the Style property and select share-social icon in the popup menu. Also, set the icon's Slot property to Start.
  2. Clicking on the Share button will open an action sheet with sharing options. So, we need to add a button click event handler. Change the Button component's (click) property to share(), as in the screenshot below:
15961596

Button component

📘

What is an Action Sheet?

An action sheet is a specific kind of alert that appears in response to a control or action and presents a set of two or more choices related to the current context. In our app, we'll use an action sheet to let users choose what app to use for sharing the content.

The app UI is ready, here's what you should get:

510510

App UI

App Logic

Now we can move on to defining the app logic.

  1. Navigate to the Share page CODE panel.
  2. Under the Custom includes section, add a new dependency with the { SocialSharing } for its Name and @ionic-native/social-sharing/ngx for its Path:
940940

Custom include

  1. Then, let's scroll down and define some necessary variables:
  • variable socialSharing of SocialSharing type. The Add DI check box should be checked.
  • variables urlToShare, imageToShare and textToShare of String type.
  1. Also, add the next values to the following variables added before (you can add your own values):
947947

Variables

  1. Then, in the Functions section, create a new Method with share for its name. In the code editor, type the following code:
const options = {
  message: this.textToShare,
  subject: 'Share',
  url: this.urlToShare,
  files: [this.imageToShare]
};
this.socialSharing.shareWithOptions(options);

This is how the function should look like:

15711571

share function

Save all the app changes.

Testing App

Congratulations! You are ready to test the app.
Note that to use the Sharing plug-in, you will need to run the app on the device.
Note as well that you will also need the apps (Twitter, Facebook, Instagram, email app, etc) to be installed on your mobile phone.

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

469469

Tester QR Code

Click the Share button and choose one of the available options:

32133213

App in action

After selecting one of the available options, you will be redirected to the corresponding application (for example sending an email with Gmail).
Here is how the delivered sample email can look like in the Gmail inbox:

991991

Delivered sample email message

Troubleshooting

If you can only see the Cancel button in the action sheet, check if the necessary apps (email app, Facebook app, Instagram app, etc) are installed on your phone.

Plug-in Limitations

Facebook: sharing a text message is not possible (on both iOS and Android). You can share either a link or an image (not both), but a description cannot be prefilled.

Instagram does not allow you to prefill the message either. But you can offer users to paste the message that you passed to the plug-in because it will be added to the clipboard.

Further information on limitations can be found in this section of the plug-in documentation.