Tech

Ionic 2/3 X-SocialSharing

Hello, we will look at the Ionic 2/3 X-SocialSharing plugin today and we will learn how to share something on the social media platform (like post, text, word, etc.) and other actions and use them.

1.Ionic 2/3 X-SocialSharing Preference and Purpose

We need to use this plugin if we want to share any work in our application, social media to the user.

On this page you will integrate your application into social media transactions and on the other side you will be able to share your application’s identification.

2.Initialize

 

First, I will assume that we have opened a new application. If you do not know how to open a new application, click here to learn the necessary steps.

After the Npm install and ionic serve we can install  plugin

Firstly;

ionic cordova plugin add cordova-plugin-x-socialsharing

and for npm

npm install –save @ionic-native/social-sharing

 

3.Lets Start Coding

If you use it, I will do it by opening a fab button and you can do it the way you want.

Let’s start with the design first;

socialmedia.html

 

<ion-fab>
<button  ion-fab mini>
<ion-icon name=”share”></ion-icon>
</button>

<ion-fab-list side=”left”>

<button (click)=”twitterShare(“Hello” + ‘\n’ + “World”)”  ion-fab mini>
<ion-icon name=”logo-twitter”></ion-icon>
</button>
<button  (click)=”whatsappShare(“Hello” + ‘\n’ + “World” )”  ion-fab mini>
<ion-icon name=”logo-whatsapp”></ion-icon>
</button>
<button  (click)=”otherShare(“Hello” + ‘\n’ + “World”)” ion-fab mini>
<ion-icon name=”at”></ion-icon>
</button>

</ion-fab-list>
</ion-fab>

 

We are making a design. You can see the image below.

If an explanation is required;

1. I’m opening a fab.
2. I give a button for the fab and I get a visual layout with the icon.
3. With the Fab list, I’m telling you where the buttons will stop and where to open it, “left” to the left.
4. I am telling you the functions of the buttons (click) and the things to be shared within them.
5. I use icons to visualize them.

 

And coding;

 

socialmedia.ts

First import

 

import { SocialSharing } from ‘@ionic-native/social-sharing’;

and constructor

public sharingVar: SocialSharing

 

whatsappShare(message) {

this.sharingVar.shareViaWhatsApp(message, null, “http://www.emreakbaki.com”)
.then(() => { },
() => {
let toast = this.toastCtrl.create({
message: “Error”

});
toast.present();

})
}

twitterShare(message) {

this.sharingVar.shareViaTwitter(message, null, “http://www.emreakbaki.com”)
.then(() => {

},
() => {
let toast = this.toastCtrl.create({
message: “Error”

});
toast.present();

})
}

otherShare(message) {

this.sharingVar.share(message, “Hello World”, null, “http://www.emreakbaki.com”)
.then(() => {

},
() => {
let toast = this.toastCtrl.create({
message: “Error”

});
toast.present();

})

}

 

 

If we explain this,

1. I’m writing functions (Whatsapp, twitter, other)
2. I have a sharing job in them and leave “then” blank so you can write something like “successful”.
3. If it does not succeed, I print the error message with toast on the screen.

 

4.Final

For a more detailed look: Link

As a result, after this process you are making your application compatible with social media like every current and good application on the market.