Social Sharing Example Using Ionic 3 - Develop Mobile Applications

Share the post

Today, We will see How to implement a Social sharing example using ionic 3? We will use cordova-plugin-x-socialsharing Cordova plugin to implement the same. Using this plugin we can able to share files, media on social platforms like Facebook, what’s app, email.

In this topic we will cover all the necessary steps required to implement Social sharing example using Ionic 3 application.

Table of Contents

Steps to follow How to implement Social sharing example In the Ionic application

1. Genereate a new page by using command :

ionic g page social-sharing

you can see here what are the different types of command use to Generate ionic pages, component & pipes.

2. Install plugin & dependency :

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

3. Import the module in app.module.ts :

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

providers: [
    StatusBar,
    SplashScreen,
    SocialSharing,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
  ]

Also, Import page to app.module.ts

import { SocialSharingPage } from '../pages/social-sharing/social-sharing';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    SocialSharingPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SocialSharingPage
  ],

The full app.module.ts will look like this

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SocialSharingPage } from '../pages/social-sharing/social-sharing';

import { LoginPage } from '../pages/login/login';


import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LocalNotifications } from '@ionic-native/local-notifications';
import { Geolocation } from '@ionic-native/geolocation';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { SocialSharing } from '@ionic-native/social-sharing';


import { RestProvider } from '../providers/rest/rest';
import { HttpClientModule } from "@angular/common/http";
import { CommonProvider } from '../providers/common/common';

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';
import { ActionSheet } from '@ionic-native/action-sheet';

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    SocialSharingPage,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SocialSharingPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    LocalNotifications,
    Geolocation,
    InAppBrowser,
    SocialSharing,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    RestProvider,
    CommonProvider,
    QRScanner,
    ActionSheet
  ]
})
export class AppModule { }

4. Copy below code to social-sharing.html

<!--
  Generated template for the SocialSharingPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Social Sharing Example</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div padding>
    <button ion-button color="primary" block (click)="shareViaMail()">Share Via Email</button>
  </div>
</ion-content>

Copy below code to social-sharing.ts page

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


/**
 * Generated class for the SocialSharingPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-social-sharing',
  templateUrl: 'social-sharing.html',
})
export class SocialSharingPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private socialSharing: SocialSharing) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SocialSharingPage');
  }

  shareViaMail() {
      this.socialSharing.shareViaEmail('Body', 'Subject', ['contact@developmobileapplications.com']).then((success) => {
        console.log(success);
      }).catch((e) => {
        console.log(e);
      });

  }


}

In the above example, We call shareViaMain() method on click the Share Via Email button. In this method, We call shareViaEmail() method which will further open the default application which will open the mailing application with the provided body, subject & email id.

5. Output