Ionic 3 Share Through Social Media

 Ionic 3 Share Through Social Media

Installation:

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




 Create Your Project:

ionic start socialSharingApp

Change Directory To Your Ionic Project:

cd socialSharingApp

Add Page To Your Application : 

ionic g page socialShare

Add the following in app.module.ts 

import { SocialSharePage } from '../pages/social-share/social-share';

declarations:[
.....
SocialSharePage
],
imports: [
   .....
  ],
entryComponents : [
....
SocialSharePage
]

Add the following code in social-share.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title>Social Share</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <h6 style="text-align:center">Share About this application in social-media</h6>
  <br />
  <button ion-button (click)="shareWhatsapp()" full>Share Via whatsapp</button>
  <br />
  <button ion-button (click)="shareFacebook()" full>Share Via Facebook</button>
  <br />
  <button ion-button (click)="shareFacebookHint()" full>Share Via Facebook Hint</button>
  <br />
  <button ion-button (click)="shareInsta()" full>Share Via Insta </button>
  <br />
  <button ion-button (click)="shareSms()" full>Share Via sms </button>
  <br />
  <button ion-button (click)="shareEmail()" full>Share Via email </button>
</ion-content>

Add The Following Code In social-share.ts:

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

@Component({
  selector: 'page-social-share',
  templateUrl: 'social-share.html',
  providers:[SocialSharing]
})
export class SocialSharePage {

  shareImageNi: string;
  siteName: string;


  constructor(public navCtrl: NavController, public navParams: NavParams,
    public socialShareCtrl: SocialSharing) {
    this.shareImageNi = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbRNkhHFTa3a5-xOWPMYGDroh3nyK31cH1rjR9fBsFand1FsarZPHGa8DiQ3kiuwlIVTdcRh0YLqiYai5OWKtUBdyKAbqKoJqVLZma-glkkTsZCZsykIMVZo8ELR58ufjDbO7mgrcWG3sb/w353-h588-no/";
    this.siteName = "http://ionicprogrammer.blogspot.in/";
  }
  shareWhatsapp() {
    let message = "Nithyam Tutorials";
    this.socialShareCtrl.shareViaWhatsApp(message, this.shareImageNi, this.siteName).then(res => {
      console.log("success : " + res);
    }).catch(error => {
      console.log("failed : " + error);
    })
  }

  shareFacebook() {
    let message = "Nithyam Tutorials";
    this.socialShareCtrl.shareViaFacebook(message, "" , this.siteName).then(res => {
      console.log("success facebook: " + res);
    }).catch(error => {
      console.log("failed facebook: " + error);
    })
  }

  shareFacebookHint() {
    let pasteData = "Pasting About Nithyam Tutorials";
    let message = "Nithyam Tutorials";

    this.socialShareCtrl.shareViaFacebookWithPasteMessageHint(message, "", this.siteName, pasteData ).then(res => {
      console.log("success facebook hint: " + res);
    }).catch(error => {
      console.log("failed facebook hint: " + error);
    })
  }
  shareInsta() {
    let nameAndSite = "Nithyam Tutorials " + this.siteName;

    this.socialShareCtrl.shareViaInstagram(nameAndSite, this.shareImageNi).then(res => {
      console.log("success insta : " + res);
    }).catch(error => {
      console.log("failed insta : " + error);
    })
  }
  shareSms() {
    let nameAndSite = "Nithyam Tutorials " + this.siteName;

    this.socialShareCtrl.shareViaSMS(nameAndSite, "").then(res => {
      console.log("success SMS : " + res);
    }).catch(error => {
      console.log("failed SMS: " + error);
    })
  }

  shareEmail() {
    let nameAndSite = "Nithyam Tutorials " + this.siteName;
    let subject = "Nithyam Tutorials Link";

    this.socialShareCtrl.canShareViaEmail().then(res => {
      console.log("success can email  : " + res);
      this.socialShareCtrl.shareViaEmail(nameAndSite, subject , ['korthivadasaikumar@gmail.com']).then(res => {
        console.log("success email : " + res);
      }).catch(error => {
        console.log("failed email: " + error);
      })
    }).catch(error => {
      console.log("failed can email: " + error);
    })
  }
}

Run The Application: 

ionic cordova run android

Input :

Click on buttons and share the data to any application mentioned.

Note : 

1. You can change message , image and URL if needed.