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: [
    SplashScreen,
    StatusBar,
    SocialSharing
  ]
...

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>
</ion-content>

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 – http://ionicframework.com/docs/components/#fabs

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>
    </ion-fab-list>
  </ion-fab>

 

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

Summary

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.

4 thoughts on “Ionic 3 Beginner: How to add Social Sharing using ionic-native

  • May 9, 2017 at 8:53 PM
    Permalink

    When I tried to do it for the WhatApp and Facebook, there is an error regarding teURL,teImage

    Reply
    • May 16, 2017 at 12:16 PM
      Permalink

      Hi Nithin K. Moorthy,

      Can you share your code, may be on github so that I can have a look into it.
      As I am not getting any errors.

      ..Ajay

      Reply
  • September 15, 2017 at 7:53 PM
    Permalink

    Hi, thanks for the tutorial. I have a question, is it possible to share via Linkedin?
    this.socialSharing.shareViaLinkedin ???

    Thanks!

    Reply
  • October 27, 2017 at 9:48 PM
    Permalink

    Hi
    Thanks for your time and code.
    But I get “Class not found” error when try to use share function.
    Do you have any idea ?

    Reply

Leave a Reply

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

Bitnami