Ionic 3 Beginner: How to add Social Sharing using ionic-native


Social Sharing allows you to share content ranging from text, images, links and video to embedding data feeds and even creating full blown applications based exclusively on social media content. Today we will learn about How to add Social Sharing using ionic-native in your Ionic 2 or ionic 3 application.

I will show you how you can add social sharing to you Ionic 2 Apps using ionic-native. We will add social sharing for Twitter, Facebook, WhatsApp and a general Sharing Option as well. In this post, we will start from scratch and we will be using the blank template in Ionic 2.

We will be able to achive

  • A button that opens your phone’s share sheet and let’s you pick the app you’ll use to share.
  • A fab collection that opens up sharing via sms, whatsapp or facebook.

Lets code the application for – Ionic 3 Beginner: How to add Social Sharing using ionic-native

We will start off by creating out project with the blank template. –v2 option in ionic start is now optional.

$ ionic start ionic3Share blank
$ cd ionic3Share

Now we’re going to install Social Sharing native plugin. You can find the entire docs to the plugin in the ionic-native docs.

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

Since Ionic released Ionic Native 3, It is now important to import the plugin in app.module.ts so it’s available to be used throughout the app.

File: app.module.ts
$ import { SocialSharing } from '@ionic-native/social-sharing';
  providers: [

Now we can go to home.ts file and import SocialSharing module from ionic-native.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';

Inject SocialSharing into the Home Class.

export class HomePage {
  constructor(public navCtrl: NavController,
    private socialSharing: SocialSharing) {

Now we can have multiple ways of using social sharing, the first one is Shares using the share sheet. When Shares using the share sheet is used, your application opens the native sharing options on your android device.

So to use Shares using the share sheet, lets create a button in home.html file and corresponding handler in the home.ts file

File: home.html
<ion-content padding>
  <button ion-button block (click)="shareSheetShare()"> shareSheetShare </button>
File: home.ts
  shareSheetShare() {
    this.socialSharing.share("Share message", "Share subject", "URL to file or image", "A URL to share").then(() => {
      console.log("shareSheetShare: Success");
    }).catch(() => {
      console.error("shareSheetShare: failed");

Other options are you directly share via SMS, Whattsapp, Facebook and email. To demonstrate that lets create a collection of FAB buttons, which when clicked, swipes out to provide sharing options. Documentation for fab collection can be found here –

File: home.html
  <ion-fab right bottom>
    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
    <ion-fab-list side="left">
      <button ion-fab (click)="smsShare()"><ion-icon name="send"></ion-icon></button>
      <button ion-fab (click)="whatsappShare()"><ion-icon name="logo-whatsapp"></ion-icon></button>
      <button ion-fab (click)="facebookShare()"><ion-icon name="logo-facebook"></ion-icon></button>
File: home.ts
  smsShare() {
    this.socialSharing.shareViaSMS("shareViaSMS", "mobile-no").then(() => {
      console.log("shareViaSMS: Success");
    }).catch(() => {
      console.error("shareViaSMS: failed");
  whatsappShare() {
    this.socialSharing.shareViaWhatsApp("shareViaWhatsApp", teimage, teUrl).then(() => {
      console.log("shareViaWhatsApp: Success");
    }).catch(() => {
      console.error("shareViaWhatsApp: failed");
  facebookShare() {
    this.socialSharing.shareViaFacebook("shareViaFacebook", teimage, teUrl).then(() => {
      console.log("shareViaFacebook: Success");
    }).catch(() => {
      console.error("shareViaFacebook: failed");

Running the app

Now save all of your code and, using the Ionic CLI, build the application for your selected platform (iOS, Android or Windows Phone), for example:

$ ionic platform add android
$ ionic build android
$ ionic run android

If you wish to run with livereload, use command –

$ ionic run android -lc


This concludes our post – Ionic 3 Beginner: How to add Social Sharing using ionic-native.

Thanks to Ionic Native (and the awesome developers who contribute their time and effort to create such fantastic plugins) adding the ability to share content across different social media platforms is incredibly simple.

Leave a Reply

Your email address will not be published. Required fields are marked *