Skip to main content

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

  • Daniel van Heerden

    Step 5 should be step 3. But very useful thanks!

    • True. But I always forget to add components to app.module, now I have gotten used to adding it at the end. Moreover, I wanted to get to the topic as soon as possible without the user having to scroll through most of the stuff they know so it is at the end.

      Will keep your opinion in mind for future post.

      Thanks
      Prantik

  • akash

    How can I share twitter card(summary card) instead of just text?

    • As of now, there is no way of doing that.
      The Cordova social plugin does not allow this.

      • akash

        I found one way to share Twitter card.
        I added url instead of title in ionic native social sharing twitter method and it works
        But you should have webpage containing metatag

        • did you use this.socialSharing.shareViaTwitter?

          • akash

            Yes in this method pass first parameter as url and it will fetch meta from that url and will generate card

          • From what I can tell, Twitter does this automatically on the first URI it finds. I do not think there is much we can do about this.

  • Tinashe | the R

    Hey guys,
    I’m trying to reference a local image in my assets folder: assets/img/myImage.jpg and not reference a web url for the image. I’m not winning with this. 1st of all, is it possible? The web url’s work fine in my app, but I want to store the image locally.

    • Tinashe | the R

      Found a solution by reading the documentation:
      ‘www/assets/img/myImage.jpg’ – this will pull the image you have in your src/assets/img folder…

  • du_nj al_ka

    thanks sir alot but copy code not work , i think found problem in copy operation

  • Pablo

    Is it possible to share just in Linkedin?

    • You can use the shareVia() function to do so.
      See this https://ionicframework.com/docs/native/social-sharing/

      Let me know if you still need any help.

      • Pablo

        Thanks for the response!, I made it work for Android using: SocialSharing.shareVia(‘com.linkedin.android’, …
        Is it possible to make it work in iOS? the documentation says:
        “iOS: You are limited to ‘com.apple.social.[facebook | twitter | sinaweibo | tencentweibo]‘. If an app does not exist, the errorcallback is invoked and iOS shows a popup message asking the user to configure the app.”
        Thank you very much for your help!

        • I have no idea about iOS as I don’t use a MAC

          • Pablo

            no problem, thanks!

%d bloggers like this: