Ionic Content – Social sharing plugin

The Ionic native plugin allows us to share our content to authorized social media account. Sharing content through native have lots of advantages. Frist, we don’t have to log in to social media, we can share this information to large number of people and no need to type title, link, image and body as all will be programmatically handle directly from apps

In this app, we are creating apps that will allow us to share data to different social media, we can share information to specific media like Whatsapp, or Facebook, email, SMS and more, that can be handled by native plugin methods. Check more information on ionic website on cordova-plugin-x-socialsharing, we are not discussing these in this in this example,

Our apps Screenshot

Step 1: ionic start LinkSocialShare –v2
Step 2: Add following plugin code in command prompt
$ ionic plugin add –save cordova-plugin-x-socialsharing
$ npm install –save @ionic-native/social-sharing

Step 3: Add the following code in home.html

<ion-header>...Social Sharing ... </ion-header>
 
<ion-content padding>
  <ion-card>
    <h2 #messageSubject>Ionic Developer</h2>
    <p>May 5, 2016</p>
   
    <img src="https://source.unsplash.com/category/technology/600x390">
 
    <ion-card-content>
      <p #messageBody>Wow Ionic 3 is so awesom. I gotta share this to other people.</p>
    </ion-card-content>
 
    <ion-row>
      <ion-col>
        <button ion-button color="primary" clear small icon-left>
          <ion-icon name="thumbs-up"></ion-icon>
          <div>12 Likes</div>
        </button>
      </ion-col>
      <ion-col>
        <button ion-button color="primary" clear small icon-left (click)="sendShare(messageBody.innerText, 
        messageSubject.innerText, 'http://ionicframework.com/docs/v2/')">
        <ion-icon name="ios-share"></ion-icon></button>
      </ion-col>
      <ion-col center text-center>
        <ion-note>
          11h ago
        </ion-note>
      </ion-col>
    </ion-row>
  </ion-card>
</ion-content>

 

When we are sharing our content to social media, we need to have title or subject and content body. In our home.html template we have

<h2 #messageSubject>Ionic Developer</h2>

, where local variable #messageSubject have a reference value of h2 DOM node. We have subject Ionic Developer because you will access messageSubject.innerText
Same we have local variable reference to #messageBody

Step 4: Add the following code in home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';
 
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, private socialSharing: SocialSharing) {
  }
 
  sendShare(message, subject, url) {
    this.socialSharing.share(message, subject, null, url);
  }  // End of function
}

 

Step 5: Inside the apps.module.ts, the
import { SocialSharing } from ‘@ionic-native/social-sharing’; and add the social sharing reference in provider.

To run apps in actual device, we have to run >>ionic platform add android >>ionic build android >> ionic run android