Add social sharing to Ionic 3 apps

Add social sharing to ionic 3 apps : is most important thing which allow you to share content, images, links and embedded videos from your app. You can  allow users to share your app link to their friends. It will increase your user base for sure.  Today we are going to learn how to add social sharing to ionic 3 or ionic 2 apps.

Adding social sharing to ionic 3 apps is very easy. We will add social sharing for Twitter, Facebook, Whats App and other common sharing as well. So let’s follow following steps:

 

#Step 1: Create new Ionic 3 app

You can skip this step if you are going to add this in existing application. But as I am going to do it from scratch so you can follow this step.  You can run following command to create blank app in ionic 3:

$ionic start sociashare blank
cd sociashare

Add social sharing to Ionic 3 apps

#Step 2 :  Installing SocialSharing-PhoneGap-Plugin

Once you created new  ionic 3 app the next step is installing Social Sharing PhoneGap Plugin.This is excellent plugin,you can found documentation about this plugin here.

Supported platforms

  • Android
  • Browser
  • iOS
  • Windows
  • Windows Phone

So, with that level of support, there are no problems using this in our Ionic apps.

This plugin allows us to share an image and, across supporting social media platforms, text and a URL through the following:

  • Facebook
  • Instagram
  • Twitter
  • E-mail
  • System modal options

You can run following command to install this plugin:

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

#Step 3: import the plugin in app.module.ts

Then next step is import the plugin in app.module.ts so it’s available to be used throughout the app:


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

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
SocialSharing,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})

#Step 4:  Add social sharing buttons in ionic app

Now it’s time to add social sharing buttons to our ionic 3 app. Let’s open /src/pages/home/home.html file and add share buttons.  So html markup will be:


<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item-group class="group">
<ion-item-divider color="light">Share using Ionic 3 apps</ion-item-divider>
<ion-item>
<button class="button" ion-button icon-right block padding-vertical color="primary" (click)="facebookShare()">
Facebook Share
<ion-icon ios="logo-facebook" md="logo-facebook"></ion-icon>
</button>
</ion-item>
<ion-item>
<button class="button" ion-button icon-right block padding-vertical color="primary" (click)="twitterShare()">
Twitter Share
<ion-icon ios="logo-twitter" md="logo-twitter"></ion-icon>
</button>
</ion-item>
<ion-item>
<button class="button" ion-button icon-right block padding-vertical color="primary" (click)="sharePicker()">
Share Picker
<ion-icon ios="ios-share" md="md-share"></ion-icon>
</button>
</ion-item>
</ion-item-group>
</ion-list>
</ion-content>

#Step 5: Add functions for social share in home.ts

This step is very important, here we will create separate function for each platform to share our content. The first thing we’ll do, and this will work for all the functions is to import the Sharing plugin from ionic-native.


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

And then we need to inject it into the constructor:


constructor(public navCtrl: NavController, public socialSharing: SocialSharing) {

}

And next is create all required functions :


facebookShare() {

//shareViaFacebook(message, image, url)
this.socialSharing.shareViaFacebook("Share By Facebook", null, 'http://www.codingscripts.com').then(() => {
console.log("Share By Facebook=> Success");
}).catch(() => {
console.error("Share By Facebook => failed");
});

}
twitterShare() {
this.socialSharing.shareViaTwitter("Share By Twitter", null, 'http://www.codingscripts.com').then(() => {
console.log("Share By Twitter=> Success");
}).catch(() => {
console.error("Share By Twitter=> failed");
});
}

sharePicker() {
this.socialSharing.share("Share By Picker", null, null, 'http://www.codingscripts.com');
}

Add social sharing to Ionic 3 apps

#Step 6: Run and test app

Final step is run your ionic app using following command and test the app.

$ ionic cordova run android 

Add social sharing to Ionic 3 apps

Download the code

Make sure to run npm install command to run the project.

2 Comments

  1. Programming Lover November 1, 2017 Reply
  2. Pablo November 12, 2017 Reply

Add a Comment

Your email address will not be published. Required fields are marked *