Share Things On Social Media Via An Ionic Mobile App

Recently one of my subscribers asked me if I could refresh the social media sharing article that I wrote for Ionic Framework 1 to work with Ionic 2. Since I’m already in the process of rewriting all my posts to Ionic 2, I figured now is a good time to do so.

In case you hadn’t seen my previous post, it is still worth checking out. In either scenario, the goal we’re going to accomplish here is sharing messages, images, and links via social media outlets on Android and iOS within an Ionic 2 mobile app that uses Angular.

To be clear before we get too deep, the user needs to have the social media application installed on their device before it can be used. This is only in the scenario where you want specifics. There is a generic approach and we’re going to see both.

Let’s start by creating a new Ionic 2 project using the Command Prompt (Windows) or Terminal (Mac and Linux):

ionic start ExampleProject blank --v2
cd ExampleProject
ionic platform add ios
ionic platform add android

Two important things to note here. First, you need to be using a Mac if you wish to add and build for the iOS platform. Second, you need to be using the Ionic CLI that supports version two of the framework.

With the project set up, we now need to install the Apache Cordova plugin that will make this all possible. Using the wonderful SocialSharing-PhoneGap plugin by Eddy Verbruggen we can get sharing features into our app. This can be installed by executing the following:

ionic plugin add cordova-plugin-x-socialsharing

Now we can start using it per the documentation. The plugin is powered by vanilla JavaScript, but not a problem because Angular works fine with vanilla JavaScript.

For this sample project we’re going to spend all our time in the app/pages/home/home.js and app/pages/home/home.html files. These are our logic and UI files. Starting with the logic file, open app/pages/home/home.js and include the following code:

import {Page, Platform} from 'ionic/ionic';

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    constructor(platform: Platform) {
        this.platform = platform;
    }

    share(message, subject, file, link) {
        this.platform.ready().then(() => {
            if(window.plugins.socialsharing) {
                window.plugins.socialsharing.share(message, subject, file, link);
            }
        });
    }

    shareViaTwitter(message, image, link) {
        this.platform.ready().then(() => {
            if(window.plugins.socialsharing) {
                window.plugins.socialsharing.canShareVia("twitter", message, null, image, link, function(result) {
                    window.plugins.socialsharing.shareViaTwitter(message, image, link);
                }, function(error) {
                    console.error(error);
                });
            }
        });
    }
}

Let’s break this down a bit.

Per the official plugin documentation we have the opportunity to use a few diverse functions. We can share to whatever the device will let us, share to a particular network, and also check to see if we even can share to a particular network. There is too much to the plugin to see everything so we’re just going to focus on three things.

share(message, subject, file, link) {
    this.platform.ready().then(() => {
        if(window.plugins.socialsharing) {
            window.plugins.socialsharing.share(message, subject, file, link);
        }
    });
}

In the above function we are preparing for a very generic social share. This means the user can decide where they want to share based on the parameters passed. Since the plugin uses native code it needs to be wrapped in the platform.ready otherwise you could face errors. When the device is ready we check to see if the plugin is installed and exists and if it does, show the share menu.

shareViaTwitter(message, image, link) {
    this.platform.ready().then(() => {
        if(window.plugins.socialsharing) {
            window.plugins.socialsharing.canShareVia("twitter", message, null, image, link, function(result) {
                window.plugins.socialsharing.shareViaTwitter(message, image, link);
            }, function(error) {
                console.error(error);
            });
        }
    });
}

The above function is a little different. This time we are specifying where to share, being Twitter. Not everyone will have Twitter installed on their device so we must first can to make sure we can share to Twitter using the canShareVia function. If successful, then go ahead and share.

Now let’s look at our very simple UI. Open the project’s app/pages/home/home.html file and include the following code:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button default (click)="share('Hello World', 'Attention', null, 'https://www.thepolyglotdeveloper.com')">Share</button>
    <button default (click)="shareViaTwitter('Hello World', null, 'https://www.thepolyglotdeveloper.com')">Share on Twitter</button>
</ion-content>

Nothing fancy here right? We just made two buttons to call each of the two functions that we built in the logic file.

Conclusion

You may have already seen it in my Ionic Framework 1 tutorial, but social media sharing needed a refresher for Ionic 2 which uses Angular instead of AngularJS.

With the social media sharing plugin you can share text, images, and links to media networks like Twitter, Facebook, and Google+. You can even share to email and SMS text message if you wanted to.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.