Social Sharing in Ionic application

You may need a social sharing feature inside your Ionic Framework Android and iOS application.

Using the Social Sharing plugin for Apache Cordova, we are able to do the social sharing.

Add ngCordova

First you have to add ngCordova to your Ionic application. If you already have this in your app, you can skip this step.

Install ngCordova

bower install ngCordova --save

Add ng-cordova.js before cordova script inside index.html

//index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

Add ngCordova in your app module dependencies

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

Add Social Sharing cordova plugin

In order to implement social sharing, add cordova social sharing plugin.

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

Implement Social sharing

Now, go ahead and start creating method to share in your controllers

// share anywhere
$scope.share = function () {
    $cordovaSocialSharing.share('This is my message', 'Subject string', null, 'http://www.mylink.com');
}

// Share via email. Can be used for feedback
$scope.sendFeedback = function () {
    $cordovaSocialSharing
            .shareViaEmail('Some message', 'Some Subject', 'to_address@gmail.com');
}

// Share via SMS. Access multiple numbers in a string like: '0612345678,0687654321'
$scope.sendSMS = function (message, number) {
    $cordovaSocialSharing.shareViaSMS(message, number);
}

For more functionalities, refer the documentation.

Have a nice day.

View comments

Rate this app in Ionic application

You may need a "Rate this app" link inside your Ionic Framework Android and iOS application. When i implemented this features by adding the link to Google Play and App Store, the link does not work. Then i found that it needs inappbrowser cordova plugin.

Add InApp Browser cordova plugin

cordova plugin add org.apache.cordova.inappbrowser

Implement "Rate this app"

Now, go ahead and start creating method to open a link based on the device.

<button ng-click="rateUs()">Rate us</button>
$scope.rateUs = function () {
    if ($ionicPlatform.is('ios')) {
        window.open('itms-apps://itunes.apple.com/us/app/domainsicle-domain-name-search/id511364723?ls=1&mt=8'); // or itms://
    } else if ($ionicPlatform.is('android')) {
        window.open('market://details?id=<package_name>');
    }
}

Have a nice day.

View comments

Showing 'No internet connection' message in Ionic application

There are often times where you need to display No internet connection message to your users inside your Ionic Framework Android and iOS application.

Add Network information cordova plugin

Inorder to check internet connection, you need to have network information cordova plugin.

cordova plugin add org.apache.cordova.network-information

Check for internet connection inside Platform ready

Now, you have to check the internet connection inside platform ready as follows

angular.module('myApp', ['ionic'])

.run(function($ionicPlatform, $ionicPopup) {
  $ionicPlatform.ready(function() {

    // Check for network connection
    if(window.Connection) {
      if(navigator.connection.type == Connection.NONE) {
        $ionicPopup.confirm({
          title: 'No Internet Connection',
          content: 'Sorry, no Internet connectivity detected. Please reconnect and try again.'
        })
        .then(function(result) {
          if(!result) {
            ionic.Platform.exitApp();
          }
        });
      }
    }

  });
})

Have a nice day.

View comments