<commit_before>---
layout: post
section-type: post
comments: true
title:  "Easy Social-Sharing with Ionic 3 and Ionic-native"
category: tutorial
tags: [ 'ionic','javascript','angular','ionic-3','web dev' ]
---

##### Have you integrated social sharing into your ionic app yet ?

If you answered no ,you should seriously consider it.
Social sharing is an apps integration with social media channels where the app shares information to services and feeds such as Twitter and Facebook.
 Social sharing has become a vital part of community building and brand marketing.
It can get more people talking about your app and increase your installs without your putting in any effort. You probably even you social-sharing with noticing it ,think about have many times have you seen and clicked these buttons

![image](/img/share.png)

We share everything articles , pictures , game play and game scores ,bible verses, playlists ,videos ,etc . As long as your app has something someone may find valuable and worth sharing to a friend , we should definitely give them a button to do it.

### Advantages of Social Sharing

* Social Influence : The more people that share from your app , the more people will become interested in it.
* Trusted Recommendations: People are more likely to download your App if its shared from someone they Trust
* Easy To Use : Letting your users share directly from the app is better than having them copy/paste or screenshot content.

## Implementation in Ionic 3

In this tutorial I will show your how to make app which implements social sharing with Ionic 3 and Ionic native. Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy.
The app we will create(shown below ) will retrieve quotes from an [external API](http://quotesondesign.com/) and give users the ability to share the quotes they like.
![image](/img/social-final.png)

First lets create a new project using the ionic 3 -cli
```
ionic start socialsharing blank
```

Now we’re going to install Social Sharing native plugin. You can find the entire docs to the plugin in the ionic-native docs.
```
 ionic plugin add cordova-plugin-x-socialsharing
 npm install --save @ionic-native/social-sharing
```
To make the plugin work in our app will need to import it in `app.module.ts` so it’s available to be used throughout the app and also add it to the list of providers.
```javascript
import { SocialSharing } from '@ionic-native/social-sharing';

@NgModule({
 declarations: [...],
 imports: [...],
 bootstrap: [IonicApp],
 entryComponents: [...],
 providers: [
   ......,
   SocialSharing
 ]
})
export class AppModule {}
```

### NOW TO THE FUN STUFF !!!

To retrieve our quotes we will be using [Quotes on Design API](http://quotesondesign.com/) ,this api returns an array of quotes objects with an ID , title (aurthor) ,content(quote) and a link. You can aslo specify the number of quotes you want.
Setting this up in ionic , head over to your `home.ts` file and add the following imports
```javascript
 // libraries for retrieving our quotes
import { Http } from '@angular/http'; // don't forget to import HttpModule in app.module.ts
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
//library for social-sharing
import { SocialSharing } from '@ionic-native/social-sharing';<commit_msg>fixed broken links and typos<commit_after>---
layout: post
section-type: post
comments: true
title:  "Easy Social-Sharing with Ionic 3 and Ionic-native"
category: tutorial
tags: [ 'ionic','javascript','angular','ionic-3','web dev' ]
---

##### Have you integrated social sharing into your ionic app yet ?

If you answered no ,you should seriously consider it.
Social sharing is an apps integration with social media channels where the app shares information to services and feeds such as Twitter and Facebook.
 Social sharing has become a vital part of community building and brand marketing.
It can get more people talking about your app and increase your installs without your putting in any effort. You probably even you social-sharing with noticing it ,think about have many times have you seen and clicked these buttons

![image](/img/share.png)

We share everything articles , pictures , game play and game scores ,bible verses, playlists ,videos ,etc . As long as your app has something someone may find valuable and worth sharing to a friend , we should definitely give them a button to do it.

### Advantages of Social Sharing

* Social Influence : The more people that share from your app , the more people will become interested in it.
* Trusted Recommendations: People are more likely to download your App if its shared from someone they Trust
* Easy To Use : Letting your users share directly from the app is better than having them copy/paste or screenshot content.

## Implementation in Ionic 3

In this tutorial I will show your how to make app which implements social sharing with Ionic 3 and Ionic native. Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy.
The app we will create(shown below ) will retrieve quotes from an [external API](https://quotesondesign.com/api-v4-0/) and give users the ability to share the quotes they like.
![image](/img/social-final.png)

First lets create a new project using the ionic 3 -cli
```
ionic start socialsharing blank
```

Now we’re going to install Social Sharing native plugin. You can find the entire docs to the plugin in the ionic-native docs.
```
 ionic plugin add cordova-plugin-x-socialsharing
 npm install --save @ionic-native/social-sharing
```
To make the plugin work in our app will need to import it in `app.module.ts` so it’s available to be used throughout the app and also add it to the list of providers.
```javascript
import { SocialSharing } from '@ionic-native/social-sharing';

@NgModule({
 declarations: [...],
 imports: [...],
 bootstrap: [IonicApp],
 entryComponents: [...],
 providers: [
   ......,
   SocialSharing
 ]
})
export class AppModule {}
```

### NOW TO THE FUN STUFF !!!

To retrieve our quotes we will be using [Quotes on Design API](https://quotesondesign.com/api-v4-0/) ,this api returns an array of quotes objects with an ID , title (aurthor) ,content(quote) and a link. You can aslo specify the number of quotes you want.
Setting this up in ionic , head over to your `home.ts` file and add the following imports
```javascript
 // libraries for retrieving our quotes
import { Http } from '@angular/http'; // don't forget to import HttpModule in app.module.ts
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
//library for social-sharing
import { SocialSharing } from '@ionic-native/social-sharing';
{'fraction_non_alphanumeric': 0.0786103341675254, 'fraction_numerical': 0.0020609450905343736, 'mean_word_length': 4.278943278943279, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1201719', 'n_tokens_mistral': 1806, 'n_tokens_neox': 1707, 'n_words': 947}