How To Add Social Sharing For Your Ionic 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 post I will show you how to add social sharing for your Ionic Framework version 1.x apps. It is pretty easy and we will be using the Cordova Social Sharing plugin for this. If you are looking to add Social Sharing for Ionic 2 Apps check out my newer post.

 See the Video Tutorial here:

 

Step 1)

We will first start by creating a new project in Ionic by running the following commands

The sidemenu template provides us an easy way to add the social sharing inside the side menu but you can use any other template and add social sharing any other way you want.

 

Step 2)

Now we will add the socical sharing pugin. You can read more about it on the git repo here. We will add the plugin by running the following command

 

Step 3)

Then we will need to modify the side menu according to our need, so we will add the following to our side menu

This will add a list item for us which when clicked will take us to the share template.

 

Step 4)

Now let us modify the app.js file so we can add a route and controller for the share template

Here we added a file share.html to the state and a shareController associated with it. We will create share.html file next.

 

Step 5)

So in the templates folder add a new file named share.html and put the following code in it.

Now that we have our template ready its time to take care of the controller which is shareCtrl

 

 

Got A Question?

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

  • Paulo Gomes

    Hi,
    Thanks for your great arcticle. It works! 🙂

    Any way, can you tell me if is there a way of this work on browser too?

    Regards,
    Paulo

  • MuSTa1ne

    Not working in ionic to me.

    • are you getting any error..let me know what are you getting so i can help you out

  • Jamie

    Hi mate, thanks for the tutorial. I have followed your instructions accurately on an existing app and a new build, both are not showing share windows within ionic view. On desktop i am getting the error
    “TypeError: Cannot read property ‘socialsharing’ of undefined”.
    I dont know wether this is just because its not on a native device as i cant debut through ionic view. Any guidance on this would be great.

    Cheers,
    Jamie

    • this means that angular can’t figure out what property “socialsharing” is a few possible reasons.

      You haven’t added the plugin or the controller
      or
      the socialcharing property is being called before the plugin is initialized.

      i just created an app with the same code and it works fine. I have this code as a template and i just add the controller and it is added to a new app.

      i plan to do a detailed video on it. No ETA though.

      do share some code post a question on stackoverflow and send me the link so i can look into it

  • Syed Raza Imam Naqvi

    Hi

    I have followed your tutorial and everything is fine except when I click on share button nothing happen on iPhone 6, where is problem?

    Can you please resolve my problem?

    Thanks

  • Syed Raza Imam Naqvi

    Oh

    I figured it out.

    SocailSharing is not supported on ionic view, when I build on Mac and preview app in simulator, it seems all is working. Thanks

    Nice Tutorial

  • Marcel Perez

    Prantik, thanks for sharing your knowledge 🙂

    • Ersa Restiani

      Hi Marcel,,,
      Did you solve case?
      I you did, would you share the solution here?
      Thanks

  • Marcel Perez

    Prantik I included your function on my controller, it worked successfully.

    I have Master-detail app, where I want to share the link recorded on my remote database. The question, how could I pass the link value on my database to this function? (my data is on singleRecord.recordLinkToFirebase, the origin is “dataService” which is a factory)

    // THE CONTROLLER
    thisApp.controller(‘DetailsCtrl’, function($scope,dataService,$stateParams,$state) {
    $scope.singleRecord = dataService.get($stateParams.id);
    $scope.OtherShare=function(){
    window.plugins.socialsharing.share(‘Message’, null, null, ‘HERE IS WHERE I WANT TO INCLUDE MY LINK’);
    }
    });

    {{singleRecord.recordLinkToFirebase}}
    con ng-click

    • what you could do is get the link and store it in a variable then pass the variable to the share function..if you are showing the link in the view then you will need $scope otherwise just store the link form the remote database and pass it to the function.

  • kushal power

    Great tutorial its help me a lot thanks for sharing its working cool keep coding and sharing ..:)

  • Germain Tanon

    Hello all, I developed with an application using social sharing SMS,
    but I want to share by customizing the message to send. Here is my code:

    Excuse ” {{detailService.itemName}} ”

    message and subject

    I try to add the concatenation of characters but it does not pass ,
    i.e.
    onclick=”window.plugins.socialsharing.share(‘”+{{detailService.itemName}}+”‘, ‘The subject’)
    or

    onclick=”window.plugins.socialsharing.share({{detailService.itemName}}, ‘The subject’)
    but it does not pass , please help me

  • Sabin Hiworth

    will this work on ios?

    • yes it should..i do not have an ios device..can try it and let me know

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

  • venis

    I am getting this message while sharing in facebook: “Gmail is email that’s intutive, efficient, and useful. 15 GB of storage, less spam and mobile access”
    Its not showing my message. Please help me with an solution

    • check on another device or another emulator the code works and there is no issues with it i re-checked.

  • Rameswarapu Subrahmanyam.

    I would like to make calls through socialsharing apps(like whats app,hangouts,)….please suggest me how to do it…

    • the social-sharing -plugin does not offer such a feature. I did not find anything in this regard. Will give it a try again..I am also interested in learning how this can be done. If you find anything in this regard kindly keep me posted 🙂

  • Nitish Sharma

    This code is not work on my app ……
    thanku in advance

    • Are you getting and errors? Have you tied debugging it? What version of Android and Ionic are you using?

      • Nitish Sharma

        I’m using in lateral version of ionic and lateral version of android, when I’m clicking on share button nothing to show error and twitter page is not loading.

  • valmy roi

    Hello, I’ve tried but it is not working. This is my code:
    $scope.whatsappShare = function() {
    window.plugins.socialsharing.shareViaWhatsApp(“Message”, “Text”, IMAGE_URL, function() { console.log(‘share ok’) }, function(errormsg) { alert(errormsg) });
    }
    $scope.otherShare = function() {
    window.plugins.socialsharing.share(“Message”, “Text”, IMAGE_URL, null);
    }

    On whatsapp it starts the sharing process but says file type not supported. I noticed that it is because it is not getting the image

    • As you asked on twitter, the issue was with the URL. You could urlencode the url to be on the safe side.

  • Adsaglobal Adsaglobalfour

    Hello, I’ve tried with this shares. Its working perfect. But, I need google plus social share. How can i do that ?
    Any help.

    Thank you.

    • You can use this.socialsharing.shareVia(‘com.google.android.apps.plus ‘,message).

      You can use shareVia and enter any apps package name to share it via that app.

%d bloggers like this: