Ionic 2 Beginner : Add Social Sharing To Your Ionic 2 App

In this tutorial, I will show you how you can add social sharing to you Ionic 2 Apps. We will add social sharing for Twitter, Facebook, WhatsApp and a general Sharing Option as well. In this post, we will start from scratch and we will be using the blank template in Ionic 2.

I already have a Tutorial on How To Add Social Sharing For Your Ionic App which is for Ionic 1.x apps. But as Ionic has now evolved to a new version namely Ionic 2, we need to do things differently which we will see in here.

Step 1)

We will start off by creating out project with the blank template, so open up your command prompt and run the following commands

Now let’s add Android and iOS platforms to our project.

You will need a MAC to add and build for iOS as a platform.

Step 2)

Now we will add the Cordova Social Share Plugin we do that by running the following command in our command prompt

Also, we need to add the Ionic native module provider for it as well, we do that as follows

Step 3)

Now that out app has been created and the plugin has been added let’s add some buttons to our view, we will do that by adding the following code to src\app\pages\home\home.html file

Notice that we are creating four buttons and wiring them up with four functions namely whatsappShare(), twitterShare(), facebookShare() and otherShare()


Step 4)

Now it’s the time to code the functions for the buttons into our src\app\pages\home\home.ts file we do that like so

Here we are importing SocialSharing formionic-native on Line 4. You can read more about ionic-native here. The SocialSharing module has shareViaWhatsApp(), shareViaTwitter(),shareViaFacebook() and a general share() function. Which we can pass values, these values will get shared to the respective app. To read more about what values can be shared you can read the documentation here. The share functions returns a promise, which we are using with the .then() method.

A thing to note here is that the share functions have a .catch() method as well which you can use to catch any errors.

Step 5)

We will need to add the SocialSharing module to either our component or the entire app module. Here, I will add it to the entire app module. So, open up src\app\app.module.ts


Step 6)

The final step is to test our app in an emulator or on a device but first, we need to build out app we do that be running the following command

For Android

This will build  and run our app, to install in on a connected device or an Emulator which is running

For iOS


Download Code:

Code Will Be Sent Via Email


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)