Add Social Sharing to Your Ionic App [v4]

ionic-social-sharing-v4

If you can let your users share the content of your app you have a greater chance of creating a buzz or viral app. The good thing is adding this functionality with Ionic 4 works in a matter of minutes!

In this Quick Win we will add the social sharing plugin and also use the file plugin to resolve the path of local files.

ionic-social-share-v4

As a result we’ll be able to quickly share content of our app on the major social platforms without any further integration!

Create the Basic Ionic 4 Social Sharing App

Like always we start with a blank app, and at the time writing this I’m using the Ionic 4 beta so there we go:

Are you ready to start learning?

Join the Ionic Academy

This will create a new Ionic app and add the two needed packages from Ionic Native and the according Cordova plugins. Now go ahead and link them inside your app/app.module.ts like this:

As said before, there’s nothing else you need to configure on any social provider but if you want to share an image like I do in the following code, copy an image to your apps app/assets/imgs/academy.png or name it differently and pick the right name in the code later.

Adding the Social Share Functions

The view in our example won’t be doing anything special besides showing a bunch of buttons to trigger our different functions.

Therefore, go ahead and open your app/home/home.page.html and add them like this:

Now we can get started with the actual sharing, and all the functions are basically called on our socialSharing package. You can checkout all the different functions and options inside the Ionic Native documentation.

Most of the functions look the same and you can pass as parameters:

  • Text to share
  • Image to be shared
  • Link to a website

While you can pass in all the parameters, most of them won’t work together.

Also, the different social platforms change their behaviour from time to time so perhaps they don’t allow to bring in any additional predefined text or at some point anything else.

If you specify a URL, most of the time everything else will be ignored. Text is very likely not coming through on some platforms, so give the platform you need a try and see what still works.

The perhaps most interesting part is sharing a local asset. Inside the code you’ll find a resolveLocalFile function that copies our previously added asset file into the cache directory of the app – something maybe not mandatory at least on iOS I’ve found out while creating the video.

If the plugin can’t find your asset you can copy it to a directory it will find, use the URL and once the sharing process is finished, call removeTempFile to clean up after you.

Again, you might also be good with using a path to the image like this directly: ${this.file.applicationDirectory}www/assets/imgs/academy.jpg

To get all the functions in your app finally open the app/home/home.page.ts and change it to:

One last thing: You might have noticed the use of asynchronous Cordova calls without any then() blocks.

The reason for this is the use of async/await inside our functions. By using these words you basically tell your code to wait for the completion of an async call before continuing with the code. It’s nice to keep your code a bit easier but at the same time disguises async calls as the code looks like a regular flow.

So keep this in mind, just a short excursion.

Also, you might have learned something about copying files and working with local asset files in Ionic as well today!

You can find a video version of this Quick Win below.

Tweet
Reddit
+1
Share
Email