In this tutorial, you will learn, how to use the Social Sharing option in the Ionic 2 Framework. 

iOS App Preview Using Emulator

      

Android Preview using Ionic View Application

     

 

The Social Sharing plugin gives more option to share the information. You can simply call the share() function, which will show the list of available sharing medium installed on the device(iOS and Android). And also, the plugin offering many built-in functions to share information on specific social platforms. They are

1. shareViaTwitter
2. shareViaFacebook
3. shareViaInstagram
4. shareViaInstagram
5. shareViaWhatsApp
6. shareViaSMS
7. shareViaEmail

If you call the above functions, that will share the information on the specific platform.

Create the Ionic 2 project using

ionic start socialsharing blank --v2

Then add the Social Sharing plugin to the project using 

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

Now open the app.module.ts file, then import the Social Sharing class using

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

Then add the Social sharing class to the ngModule provider

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

Now go to the home.html and create a button with click event

<button ion-button color="danger" (click)="shareInfo()" > Share</button>

Then go to the home.ts file, import the Social Sharing plugin

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

Then create a function in the home.ts to call the share function of Social Sharing class.

constructor(private socialSharing: SocialSharing) { }
shareInfo()
{
this.socialSharing.share("demo message", "Demo subject", "", "https://ampersandacademy.com").
then(() => {
alert("Sharing success");
// Success!
}).catch(() => {
// Error!
alert("Share failed");
});
}

 

That's all. you were done. Now you can test this application using

1. Ionic View Application
2. Android Device or Emulator
2. iOS Emulator

Ionic View Application

Upload this project to the Ionic server using 

ionic upload

The above command will ask username and password for the Ionic server. After successful upload, now open the Ionic view mobile application and preview this application

Android Device/Emulator

Add android platform to the project using

ionic platform add android

To run this project on Andriod emulator

ionic run android

The above command generates the APK and loads the application in the default emulator. And also, you can install the APK on the Android device and test it.

iOS Emulator

Use the below command to preview the application in the iOS emulator.

ionic platform add ios
ionic run ios