Ionic 2: Sharing Things on Social Media

From your application sometimes you need to share your blog post url, message or website url on social sites like Facebook, Twitter or wants to share with your friends on Whats app, Gmail.

You can do this by using Apache Cordova plugin in your Ionic 2 Application. Follow the below steps to achieve this.

Step 1: Setup your Ionic 2 application using the below commands :

 ionic start social-media blank --v2 --ts  
 cd social-media  
 ionic platform add android  ///// for android  
 ionic platform add ios     ///// for ios  

Step 2: Install SocialSharing-PhoneGap plugin using the command:

 ionic plugin add cordova-plugin-x-socialsharing  

You are done with the project setup. Now you can start your coding.

Step 3: Open your application in any of the editor (Webstorm, Atom, Visual Code) . You will see a home folder inside the app folder. In home folder you will see three files home.html, home.scss and home.ts.

Step 4: In home.html , write the below code:

 <ion-header>  
  <ion-navbar>  
   <ion-title>  
    Home  
   </ion-title>  
  </ion-navbar>  
 </ion-header>  
 <ion-content class="home">  
   <button full (click)="share('Hello World', 'Attention', null, 'https://anjaligargsite.wordpress.com/2016/08/27/how-to-install-two-versions-on-system')">Share</button>  
   <button full (click)="shareViaEmail('Hello World', null, 'garg14anjali@gmail.com')">Share on Mail</button>  
   <button full (click)="shareViaFacebook('Hello World', null, 'https://anjaligargsite.wordpress.com/2016/08/27/how-to-install-two-versions-on-system')">Share on Facebook</button>  
   <button full (click)="shareViaWhatsApp('Hello World', null, 'https://anjaligargsite.wordpress.com/2016/08/27/how-to-install-two-versions-on-system')">Share on Whatsapp</button>  
 </ion-content>  

The output of this page will be:

Home Page

Step 5: In home.ts ,write the below code:

 import { Component } from '@angular/core';  
 import { NavController, Platform} from 'ionic-angular';  
 import { SocialSharing } from 'ionic-native';  
 @Component({  
   templateUrl: 'build/pages/home/home.html'  
 })  
 export class HomePage {  
   constructor(private platform: Platform) {  
     this.platform = platform;  
   }  
   share(message, subject, file, link) {  
     this.platform.ready().then(() => {  
       SocialSharing.share(message, subject, file, link);  
     });  
   }  
   shareViaEmail(message, image, link) {  
     this.platform.ready().then(() => {  
       SocialSharing.canShareViaEmail().then(() => {  
         SocialSharing.shareViaEmail(message, image, link);  
       }, (err) => {  
         console.error(err);  
       });  
     });  
   }  
   shareViaFacebook(message, image, url) {  
     this.platform.ready().then(() => {  
       SocialSharing.shareViaFacebook(message, image, url);  
     });  
   }  
   shareViaWhatsApp(message, image, url) {  
     this.platform.ready().then(() => {  
       SocialSharing.shareViaWhatsApp(message, image, url);  
     });  
   }  
 }  

Here the share function will allow you to share your message using any application installed in your mobile.The output will be as below:

Output using Share function

The shareviaEmail function will allow you to share your message using mailing application installed in your mobile.The output will be as below:

Output using shareviaEmail function

the shareviaFacebook function will allow you to share your blog url using facebook application installed in your mobile.The output will be as below:

Output using shareviaFacebook function

the shareviaWhatsApp function will allow you to share your blog url using whatsApp application installed in your mobile.The output will be as below:

Output using shareviaWhatsApp function

Similarly you can share your message or urls using Twitter , Instagram, Sms and etc.

Reference :Social Sharing

You can download the demo application using the git hub link : https://github.com/anjali14garg/social-sharing