Skip to main content

Share images, text, messages via Facebook, Twitter, Email, SMS, WhatsApp, etc With ng-cordova in Ionic Framework

PhoneGap Social Sharing for Android, iOS and Windows Phone

The following Content will show you how to make use of social media sharing in your Android and Windows and iOS mobile application using Ionic Framework.
To implement this , we’ll be using the AngularJS extension set, ngCordova, along with the Apache Cordova plugin SocialSharing.
1.Create the project
ionic start Test blank
cd Test
ionic platform add android
2.Add Plugin (Share images, text, messages via Facebook, Twitter, Email, SMS, WhatsApp, etc using this plugin.)
3.Implementation
Download the latest stable ngCordova release and copy ng-cordova.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:
<!DOCTYPE html>
<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">
   <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
   <link href="css/ionic.app.css" rel="stylesheet">
   -->
   <!-- ionic/angularjs js -->
   <script src="lib/ionic/js/ionic.bundle.js"></script>
   
   <!-- ng-cordova  -->
   <script src="js/ng-cordova.js"></script>
   
   <!-- cordova script (this will be a 404 during development) -->
   <script src="cordova.js"></script>
   <!-- your app's js -->
   <script src="js/app.js"></script>
   <script src="js/controllers.js"></script>
 </head>
 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Blank Starter</h1>
     </ion-header-bar>
     <ion-content ng-controller="ShareController">
      <br><br>
       <button class="button" ng-click="shareAnywhere()">Share anywhere</button>
       <!-- Place Your Image file www/img directory -->
       <button class="button" ng-click="shareViaTwitter('Demo message', 'www/img/image1.jpeg', 'http://santoshshinde2012.blogspot.com')">Share on Twitter</button>
       <br><br>
       <button class="button" ng-click="shareViaWhatsApp('Demo message', 'www/img/image1.jpeg', 'http://santoshshinde2012.blogspot.com')">Share on WhatsApp</button>
       <button class="button" ng-click="shareViaFacebook('Demo message', 'www/img/image1.jpeg', 'http://santoshshinde2012.blogspot.com')">Share on Facebook</button>
     </ion-content>
   </ion-pane>
 </body>
</html>
Now need to add it to your projects app.js file similar to the following:
var app = angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
 $ionicPlatform.ready(function() {
   if(window.cordova && window.cordova.plugins.Keyboard) {
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
   }
   if(window.StatusBar) {
     StatusBar.styleDefault();
   }
 });
})
Now need to add it to your projects Controllers.js file similar to the following:
app.controller("ShareController", function($scope, $cordovaSocialSharing) {
   $scope.shareAnywhere = function() {
       $cordovaSocialSharing.share("My Demo Message", "My Demo Subject", "www/img/image1.jpeg",    "http://santoshshinde2012.blogspot.com");
   }
 $scope.shareViaTwitter = function(message, image, link) {
 $cordovaSocialSharing
   .shareViaTwitter(message, image, link)
   .then(function(result) {
     // Success!
     alert("success : "+result);
   }, function(err) {
     // An error occurred. Show a message to the user
     alert("Cannot share on Twitter");
   });
 }
 $scope.shareViaWhatsApp = function(message, image, link) {
 $cordovaSocialSharing
   .shareViaWhatsApp(message, image, link)
   .then(function(result) {
    alert(result);
     // Success!
   }, function(err) {
     // An error occurred. Show a message to the user
      alert("Cannot share on WhatsApp");
   });
 }
 $scope.shareViaFacebook = function(message, image, link) {
 $cordovaSocialSharing
   .shareViaFacebook(message, image, link)
   .then(function(result) {
     // Success!
   }, function(err) {
     // An error occurred. Show a message to the user
     alert("Cannot share on Facebook");
   });
 }
 // access multiple numbers in a string like: '0612345678,0687654321'
 $scope.shareViaSMS = function(message, number) {
 $cordovaSocialSharing
   .shareViaSMS(message, number)
   .then(function(result) {
    alert(result);
     // Success!
   }, function(err) {
     // An error occurred. Show a message to the user
   });
 }
 // TO, CC, BCC must be an array, Files can be either null, string or array
 $scope.shareViaFacebook = function(message, subject, toArr, bccArr, file) {
 $cordovaSocialSharing
   .shareViaEmail(message, subject, toArr, bccArr, file)
   .then(function(result) {
     // Success!
   }, function(err) {
     // An error occurred. Show a message to the user
   });
 }
  $scope.shareViaFacebook = function(socialType, message, image, link) {
 $cordovaSocialSharing
   .canShareVia(socialType, message, image, link)
   .then(function(result) {
     // Success!
   }, function(err) {
     // An error occurred. Show a message to the user
   });
  }
});







Comments

Post a Comment

Popular posts from this blog

What exactly means MVW design pattern ?

What is a MVW framework? The abbreviation stands for 'Model - View - Whatever'.  Well there are many different JavaScript frameworks available , all invented for the same purpose. They all try to separate the presentation logic from the business logic where JavaScript holds the model and logic, and html the presentation layer. Quick overview : You can change the model without changing the view and vice-versa Unit testing is easy These are the core benefits of using such a framework. By separating presentation and business logic changes to the code are easier to implement and take less time. Another benefit is that code can be reused from a controller thus saving more time. Angularjs makes the code also shorter in comparison to other frameworks, which improves code stability. Less code means minor potential for bugs. For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings...
1 comment
Read more

File Upload & Download With ng-cordova File Transfer Plugin In Ionic Framework

Using the AngularJS extension set , ngCordova , with Ionic Framework and the Apache Cordova File Transfer plugin, you can easily upload files to a remote server and download files from a remote server. 1.Create the project ionic start Test blank cd Test ionic platform add android 2.Add Plugin org.apache.cordova.file-transfer https://github.com/apache/cordova-plugin-file-transfer This plugin allows you to upload and download files. This plugin defines global FileTransfer, FileUploadOptions Constructors. Although in the global scope, they are not available until after the deviceready event . Installation cordova plugin add cordova plugin add cordova-plugin-file-transfer     2.    org.apache.cordova.file             https://github.com/apache/cordova-plugin-file             This plugin implements a Fi...
20 comments
Read more

Steps To Create Cordova Plugin

Introduction A plugin is a package of injected code that allows the Cordova webview within which the app renders to communicate with the native platform on which it runs. Plugins comprise a single JavaScript interface along with corresponding native code libraries for each supported platform. Due to following reason, we will go for plugin development To get the native capabilities of the device in the cordova based app Build the common functionality across the number of Cordova application(Reusability) Prerequisites For the creation of plugin you need to install plugman . npm install -g plugman Plugin Structure Decide Plugin ID & Name The plugin ID should be unique Plugin name should follow the convention “cordova.plugin.[your.plugin.name]” Create the structure Use the following command to create the plugin with plugin ID “cordova.plugin.test” and name “Test”. plugman create --name Test --...
Post a Comment
Read more