Search
  • abhinav185

Ionic 5 Social sharing (Instagram, Whatsapp, Facebook, Email, Twitter)

Updated: Apr 6, 2020

STEP 1: Start a new ionic 5 project using ionic start myApp blank and select angular framework.




Open visual studio code and open the created project. Your project directory will be something like this


Step 2: Go to project directory by cd /projectpath and install following plugins. link: Social Sharing and Screenshot.


Step 3: Import installed dependencies into you app.module.ts and add into @NgModule providers array.


Step 4: Open home.page.ts and import the installed dependencies and ActionSheetController from @ionic/angular.


Step 5: Add above html code in home.page.html


takeScreenshot(){ this.screenshot.URI(80).then((res=> {

this.sharableURI=res.URI;

this.share();      

 });    

 }

async share() {

var msg="Event Title:"+'Social Sharing'"\n""Description:"+'Any Description'; const actionSheet = await this.actionSheetController.create({ header: "Select Image source", cssClass:"social-sharing", buttons: [{ text: 'Instagram', icon: 'logo-instagram', handler: () => { this.socialSharing.shareViaInstagram(msg,this.sharableURI).then((res=> { // Success                 }).catch((e=> { // Error!               

  });              

 }          

 },           { text: 'Facebook', icon: 'logo-facebook', handler: () => { this.socialSharing.shareViaFacebook(msg,this.sharableURI).then((res=> 

{ // Success   }).catch((e=> { // Error!   });           

  }          

 },            { text: 'Whatsapp', icon: 'logo-whatsapp', handler: () => { this.socialSharing.shareViaWhatsApp(msg,this.sharableURI).then(() => 

{ // Success! var msg="Information Shared Successfullty!"    

 }).catch(() => { // Error!     });          

 }       

},       { text: 'Email', icon: 'mail', handler: () => { this.socialSharing.canShareViaEmail().then(() => 

{ // Sharing via email is possible           }).catch((err=> {

// Sharing via email is not possible alert(err);           }); // Share via email this.socialSharing.shareViaEmail(msg'Email Subject', ['abhinav@applore.in']).then(() => { // Success!           }).catch((err=> {

// Error! alert(err);          

 });        

 }     

},           { text: 'Cancel', icon:'close', role: 'cancel'           }       ]   });

await actionSheet.present();   }


Step 6: Add above two functions in your home.page.ts takeScreenshot() and share() . Step 7: Open command and ionic cordova build android/ios.

You're done.


182 views0 comments

Recent Posts

See All