
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;
- I’m opening a fab.
- I give a button for the fab and I get a visual layout with the icon.
- With the Fab list, I’m telling you where the buttons will stop and where to open it, “left” to the left.
- I am telling you the functions of the buttons (click) and the things to be shared within them.
- 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,
- I’m writing functions (Whatsapp, twitter, other)
- I have a sharing job in them and leave “then” blank so you can write something like “successful”.
- 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.
Comments
Wow What wonderful data. Thank you for the time you spent on this post.
Your welcome.
I discovered your blog internet site internet site on the search engines and check several of your early posts. Always sustain up the quite good operate. I recently additional increase Rss to my MSN News Reader. Searching for toward reading much more on your part later on!
Thanks !!!
There is noticeably a bundle to know about this. I assume you created certain nice points in functions also.
Thanks !!!