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

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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 @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

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. :-)

  • Pingback: How To Add Social Sharing For Your Ionic App - pointDeveloper.com()

  • Amr Ayoub

    instead of home.js , can i put the code as a service and inject anywhere i want , and put the function in any html file ?

    • sure you can. make sure that you are accessing the service correctly and passing proper values to it if you are passing any values at all

  • Pingback: Ionic2 – Social Sharing – alltechgyaan()

  • Lawrence Mugambi Mbaabu

    Thanks a lot for this helpful tutorial. How can one share an html to whatsapp? Am fetching an html from a db and what to be to share it via whatsapp. The problem is that the shared message has html tags. I want to maintain the html page. Thanks

    • By default if you share html it will not be parsed by whatsapp. WhatsApp will treat it as a string. So, as an alternative you can share the link to the html page. But, as you mentioned you are getting the html page from a db there might not be a proper way to share it in whatsApp.

      A thing you can try is to just extract the text from the db and format it to using WhatsApp formatting methods as mentioned here.

      http://www.androidauthority.com/whatsapp-text-formatting-680598/

      Hope it helps,

      Regards

      Prantik vaghela

      • Lawrence Mugambi Mbaabu

        Thanks a lot. This will help me much

  • Mauro Gabriel Tello

    Hello, I have an error when I try to install the ionic-native I think it tells me that it needs fsevents but it does not work for windows.
    When doing

    Npm install –save @ ionic-native / social-sharing

    I get the following error

    Npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents @ 1.0.0 (node_modules chokidar node_modules fsevents):
    Npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {“os”: “darwin”, “arch”: “any”}
    (Current: {“os”: “win32W,” arch “:” x64 “})

    Would you appreciate some help please

    • yes, I get those too. They come as WARN which is for warning and not as an error. You can go ahead without issues it will work fine.

  • Vivek Tak

    hi.. whenever i am trying this..it always going into the error part
    please help

  • Harinath

    How can i work on shareViaWhatsAppToReceiver ,its not working , can you please give me the code if you have already exist

%d bloggers like this: