EASY SOCIAL-SHARING WITH IONIC 3 AND IONIC-NATIVE

HAVE YOU INTEGRATED SOCIAL SHARING INTO YOUR IONIC APP YET ?

5 min readJun 7, 2017

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 you putting in any effort. You probably even use social-sharing with noticing it ,think about have many times have you seen and clicked these buttons

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/Phone-Gap 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 and give users the ability to share the quotes they like.

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.

NOW TO THE FUN STUFF !!!

To retrieve our quotes we will be using Quotes on Design API ,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

Now lets create our method for retrieving the quotes

The getQuotes methods uses a async to resolve the quotes API request and assigns that value to the quotes variable. The API returns an array of json objects containing our quotes.

Note: It is not advised to have HTTP requests in your Component , best practice is to have all requests inside a provider. However for simplicity's sake the following code will suffice.

SHARING THE QUOTES

Now that we actually have our quotes we need to create methods for sharing them. In our app we will have four methods for sharing quotes.

General share : This method is going to open the share sheet and let our users share using the apps they have installed.
Whatsapp share: This method allows users to share the quote directly to whatsapp to a contact of their choose.
Facebook share : This method allows users to share a quote via the facebook app.
Twitter share : This method allows users to share a quote via the Twitter App.

These methods can text a message , a file and a url as arguments but for simplicity we will only be passing a message and setting the rest to null. You can read more on he plugin here.

Note : For method 2-4 , the respective apps must be installed in order to share a quote.

The message we will share will be the quote ,its aurthor followed by the string “Sent from my Awesome App”. To do this lets make a simple function compilemsg which takes in the index number of the quotes and returns a string containing the quote , the author and telling the user it was sent from our Awesome App.

Now that we have our message , we can write functions for sharing it

REGULAR SHARE

This will share the app via the action sheet to any app you choose.

WHATSAPP SHARE

This will share your message with your contacts or groups on whatsapp.

TWITTER SHARE

This will share your message with the twitter app as a tweet or dm.

FACEBOOK SHARE

This will share your message via he facebook app.

Now for our HTML

And thats it , now our app is able share via the action share ,whatsapp , facebook and twitter.

SO WE ONLY GET 10 QUOTES ??

Our app currently suffers from one serious flaw , it only shows 10 quotes and there is no way of getting more. Tried of looking at the same ten quotes .Well whats the point of having a dynamic app if you just end up looking at the same static content.

Let’s fix that by adding Ionic’s pull to refresh widget.In our home.html , lets add the following code just after our ion-content tag

This add an ion-refresher which updates our quotes when we pull the very top of the app by calling the doRefresh() method. Speaking of that ,lets head of to home.ts and add the doRefresh() method.

You can find the full code from this article on my github repo .

NOTE: This is a re-post of my original blog post which appeared on My life of code