Tech

Ionic 2/3 X-SocialSharing

28 December 2017
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.
social-media-social-networks

social-media-social-networks

 

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.

 

 

You Might Also Like

6 Comments

  • Reply 검증사이트 26 March 2018 at 16:22

    Wow What wonderful data. Thank you for the time you spent on this post.

  • Reply C++ Tutorial 30 April 2018 at 20:16

    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!

  • Reply Elizabeth Bay Locksmith 30 May 2018 at 14:18

    There is noticeably a bundle to know about this. I assume you created certain nice points in functions also.

  • Leave a Reply

    Emre Akbaki