Ionic social share button
Before going to implement social share in ionic, we need to know about social share.
Social sharing is sending photos, videos, product recommendations and website links to friends with social networking accounts. Twitter and Facebook, Instagram , LinkedIn icons appear on almost every website, however, there are numerous other venues where information can be shared.As you know social media is a big traffic source, that’s why most of the website and apps use social media to drive more traffic to their website.
Implementation Social share in Ionic
Social share in Ionic, you may need a social sharing feature inside your Ionic Framework Android and IOS application. Ionic Social Sharing is really easy to set up.
Step 1 : At first create a new project
ionic start IonicProject blank cd IonicProject ionic platform add android ionic platform add ios
Step 2 : Add Apache Cordova plugins to get all these share
https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git
Step 3 : Download the latest stable ngCordova, then copy ng-cordova.min.js to www/js folder. Now we have to add index.html in our project
<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">
Step 4 : We have to modify angular.module in app.js file. Most important is that ng-cordova.min.js must include before cordova.js
angular.module('starter', ['ionic', 'ngCordova'])
Step 5 : Now we are ready to make generic share button and we are going to share twitter share button.
We have to create a new controller in 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"); }); } });
Step 6 : The above function sends a message, image, subject, link from the www folder.
To execute function, we have to use the follow codes
<button class="button" ng-click="shareAnywhere()">Share anywhere</button> <button class="button" ng-click="shareViaTwitter('some message', null, 'https://www.thepolyglotdeveloper.com')">Shaare on Twitter</button>
Step 7 : Somewhere in our application we could have a button for sharing 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"); }