Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 Social Sharing plugin Sample App

Ionic 4 sample app using Cordova SocialSharing plugin

Introduction

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

👍

Important notice

Be informed that when creating an app with Cordova plugins it is important that the needed plugin be imported before you proceed with the app UI or create it from a backup.

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:

Creating app from backup

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

Importing Plugin

Before the plugin can be used in your app, you need to import it to Appery.io.

You can choose one of the two ways to do it:

1. Importing Plugin from ZIP bundle

Downloading ZIP archive with plugin source files

Cordova plugins tab

  • Click Import Cordova plugin button.
  • Under the ZIP bundle tab, click Choose file.
  • Select the ZIP archive you have just downloaded and click Import Plugin:

Importing plugin source files from ZIP bundle

  • Now, you should see the SocialSharing plugin on the Cordova plugins list:

Imported plugin

2. Importing Plugin from Git

Copying plugin Github link

  • From the Appery.io dashboard, navigate to Resources > Cordova plugins.
  • Click Import Cordova plugin button.
  • Go to the From Git tab.
  • Paste the copied URL into the Repository URL field and enter master as the Repository branch name, as shown on the screenshot below:

Importing plugin from Git

  • Click Import plugin. You will see that the SocialSharing plugin has been successfully imported.

Creating App

  1. From the Apps tab, click Create new app.
  2. Select Ionic 4 as the application type, enter sharingApp as the app name, and click Create.
  3. Then, inside the app, navigate to Project > App Settings > Cordova plugins. Go to the Imported Plugins tab and enable the SocialSharing plugin:

Enabling imported plugin

  1. Click SAVE.

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

Adding dependency

  1. Save the app changes by clicking the SAVE button at the top.

Importing Ionic Native Plugin

  1. Unfold the Pages folder and choose the app page.
  2. Click the MODULE tab of the app page.
  3. In the Imports section, type in import { SocialSharing } from '@ionic-native/social-sharing/ngx';
  1. Then, scroll down to the NgModule Settings > Providers section and type SocialSharing into the text field:
  1. Save the changes.

Building UI

  1. Navigate to Pages > Screen1 and select the DESIGN tab.
  2. Now, under the PROPERTIES tab, set the Page Footer property to False.
  3. Then, select the ToolbarTitle1 component and change its Text property to Sharing App
  1. Create a new Text component, set its Text property to {{textToShare}} and the container property to p

Add Text component

  1. Create a new Image element and set its src property to {{imageToShare}}

Add Image component

  1. Then, add a Button component to Screen1. 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-alt icon in the popup menu. 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 Button1 component's (click) property to showActionSheet(), as in the screenshot below:

Add 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:

App UI

App Logic

Now we can move on to defining the app logic.

  1. Navigate to the Screen1 CODE tab.
  2. Under the Internal includes section, click Edit internal includes. In the popup window mark, { ActionSheetController } from "@ionic/angular" dependency as checked. Click Save:

Add dependency

  1. Under the Custom includes section, add a new dependency with the { SocialSharing } for Name and @ionic-native/social-sharing/ngx for its Path:
  1. Then, let's scroll down and define some necessary variables:
  • variable actionSheetCtrl of ActionSheetController type. The Add DI checkbox should be checked.
  • variable socialSharing of SocialSharing type. with the Add DI checkbox checked.
  • variables urlToShare, imageToShare and textToShare of String type.
  • variables canShareTwitter, canShareFacebook, canShareEmail and canShareInstagram of Boolean type:

Variables

  1. Then, in the Functions section, create a new Method with constructor name. In the code editor, type the following code:
this.textToShare = 'Hello Appery! (optional message, may be ignored by Facebook app)';
this.urlToShare = 'https://appery.io/';
this.imageToShare = 'https://appery.io/wp-content/uploads/nature-bg.jpg';

// Check if sharing via Twitter, Facebook and email is supported:
this.socialSharing.canShareVia('twitter', this.textToShare, null, this.urlToShare).then(() => {
    // Sharing via twitter is possible
    this.canShareTwitter = true;
}).catch(() => {
    // Sharing via twitter is not possible
    this.canShareTwitter = false;
});

this.socialSharing.canShareVia('facebook', this.textToShare, this.imageToShare, this.urlToShare).then(() => {
    this.canShareFacebook = true;
}).catch(() => {
    this.canShareFacebook = false;
});

this.socialSharing.canShareVia('instagram', this.textToShare, this.imageToShare).then(() => {
    this.canShareInstagram = true;
}).catch(() => {
    this.canShareInstagram = false;
});

this.socialSharing.canShareViaEmail().then(() => {
  this.canShareEmail = true;
}).catch(() => {
  this.canShareEmail = false;
});
  1. Finally, add a new Async method and name it showActionSheet. This method will show the action sheet with the buttons list depending on the apps available. In the code editor, type in the following code:
const buttons = [];

// Creating a list of buttons depending on the apps available
if (this.canShareTwitter) {
    buttons.push({
        text: 'Twitter',
        handler: () => this.socialSharing.shareViaTwitter(this.textToShare, null, this.urlToShare)
    });
}

if (this.canShareFacebook) {
    buttons.push({
        text: 'Facebook',
        handler: () => this.socialSharing.shareViaFacebook(this.textToShare, this.imageToShare, this.urlToShare)
    });
}

if (this.canShareInstagram) {
    buttons.push({
        text: 'Instagram',
        handler: () => this.socialSharing.shareViaInstagram(this.textToShare, this.imageToShare)
    });
}

if (this.canShareEmail) {
    buttons.push({
        text: 'Email',
        handler: () => this.socialSharing.shareViaEmail(this.textToShare, 'Hello', ['[email protected]'], null, null, [this.imageToShare])
    });
}

buttons.push({
    text: 'Cancel',
    role: 'cancel',
    handler: () => {}
});

const actionSheet = await this.actionSheetCtrl.create({
    header: 'Share',
    buttons: buttons
});

await actionSheet.present();

Save all the app changes.

App Testing

Congratulations! You are ready to test the app.

To use the Sharing plugin, you need to run the app on the device. So, first of all, export the app and install it on your device. Note that you will also need the apps (Twitter, Facebook, Instagram, email app, etc) to be installed on your mobile phone.

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

App on action

After selecting one of the available options, you will be redirected to the corresponding application.

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.

Notes

This plugin also allows you to use the native sharing window of your mobile phone instead of the action sheet. In this case you should use the shareWithOptions method to call the share window. You can find more information on this in this section of the plugin documentation.

Plugin 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 plugin because it will be added to the clipboard.

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

📘

Want to know more?

You might also like this Appery.io Community video that shows how to create an Ionic 4 application using the Appery.io Social Sharing plugin:

Updated 4 days ago

Ionic 4 Social Sharing plugin Sample App


Ionic 4 sample app using Cordova SocialSharing plugin

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.