Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Implement Social Media Sharing With Ionic Framework

TwitterFacebookRedditLinkedInHacker News

So you’ve made a great app, but need some help marketing it. Adding social media features to your application is a great way help spread the word, without actually doing anything. Social media can bring good traffic for you, the developer, and provide useful features to your user at the same time.

Take for example, you made a mobile app that finds funny pictures on the internet. You might want to add a share button that shares a particular funny picture on your users social media account while including reference to your app so all their friends can use it too.

The following will show you how to make use of social media sharing in your Android and iOS mobile application using Ionic Framework.

To make this happen, we’ll be using the AngularJS extension set, ngCordova, along with the Apache Cordova plugin SocialSharing.

Let’s start by creating a fresh Ionic project from the command line with the Android and iOS platforms:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Please note, if you are not using a Mac, you cannot add and build for iOS.

The next thing we want to do is, add the Apache Cordova plugin that will be facilitating all these shares:

https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

From this point, we can technically follow the official SocialSharing documentation to use this plugin, but we want to keep things AngularJS.

Download the latest stable ngCordova release and copy ng-cordova.min.js to your www/js directory. With the library in place, you now need to add it to your projects index.html file similar to the following:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">

Note that ng-cordova.min.js must come before cordova.js in order for this project to work.

With the JavaScript file included into our project, we also need to include it in our app.js file. Open it and modify angular.module to look like the following:

angular.module('starter', ['ionic', 'ngCordova'])

ngCordova is now set up in our Ionic project and ready for use.

For simplicity, we are going to do two things. We are going to create a generic share button that lets the user pick how they want to share, and we are going to create a Twitter share button that will share only on Twitter.

Start by creating a new controller in your app.js file:

ionicApp.controller("ExampleController", function($scope, $cordovaSocialSharing) {

    $scope.shareAnywhere = function() {
        $cordovaSocialSharing.share("This is your message", "This is your subject", "www/imagefile.png", "https://www.thepolyglotdeveloper.com");
    }

    $scope.shareViaTwitter = function(message, image, link) {
        $cordovaSocialSharing.canShareVia("twitter", message, image, link).then(function(result) {
            $cordovaSocialSharing.shareViaTwitter(message, image, link);
        }, function(error) {
            alert("Cannot share on Twitter");
        });
    }

});

In the above code you’ll notice two functions. A generic function for letting the user decide where to share, and a share via Twitter only. In the generic function, we are sending a message, subject, link, and image from the www directory. In the share via Twitter function, we first check to see if sharing through Twitter is allowed on the device. If it is, then make a tweet. A scenario where share via Twitter may not work is if Twitter is not installed on the users device.

In your index.html file, you can use something like this to execute the functions:

button class="button" ng-click="shareAnywhere()">Share anywhere</button>
<button class="button" ng-click="shareViaTwitter('some message', null, 'https://www.thepolyglotdeveloper.com')">Share on Twitter</button>

I personally use social media sharing to grow my user base. Somewhere in your application, maybe in a settings view, you could have a button that tells the user to share on Twitter. The function that goes with this button could look like this:

$scope.shareViaTwitter = function() {
    $cordovaSocialSharing.shareViaTwitter("Check out this cool app I'm using called IonicProject for " + device.platform, null, device.platform == "Android" ? "GOOGLE_PLAY_URL" : "ITUNES_URL");
}

Notice in the above code, that a specific URL is used depending on the device platform. This way Android users share the Android URL and iOS users share the iTunes URL.

A video version of this article can be seen below.

Nic Raboy

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.

Search

Follow Us

Support This Site