Native sharing centers are available both on iOS and Android. If you are wondering what is a native sharing center, it is what appears when you click on sharing icons in apps.

Usually, clicking on a sharing icon opens a standard panel with standard sharing actions: email, Facebook, open in a browser…

Apps can add their own sharing methods to these panels. For example, if you have installed Slack or Whatsapp, you will be able to share links and photos with these apps using the native share capabilities. The native sharing user experience is very smooth – compared to the usual web sharing – as the user is already connected with his/her account.

In this tutorial, we are going to learn how to leverage the native sharing centers in our apps.

Add Social Sharing Cordova Plugin

First we have to add the capability to call the native sharing center using a Cordova plugin. We are going to use the Social Sharing plugin done by Eddy Verbruggen.

To add this plugin to your app:

  • Edit your app by clicking it in the applications list
  • Go to the PhoneGap Build box
  • Go to the PhoneGap configuration
  • Paste the following tag in the Plugins text area:  <plugin name="cordova-plugin-x-socialsharing" source="npm" />

From now the sharing plugin will be included in your app when compiling and you will have access to the JavaScript API it provides.

Add Sharing Button To Your App

We are going to add a simple share button to the single template of the default Q theme. It will call the native sharing center with pre-defined parameters.

Note: instead of a link, we recommend that you use the default iOS and Android icons as users already know them. You will easily find SVG version of each (eg. here’s one for Android and this one for iOS).

Add Share Button To Single Template

  • In your theme’s folder, open single.html
  • Add the following tag in the single-content div

Store Post Title And URL

To share a post from the app, we use the  shareWithOptions() function provided by the Social Sharing plugin. This function expects parameters such as a message, an URL back to the post… In this example, we are going to share the post title and its original URL (ie. the URL to the article on the website). These parameters will be stored as custom attributes of the share button when a post is displayed.

  • Open functions.js in your theme’s folder
  • Go to the screen:showed event
  • First, we have to grab the current screen object

  • Now we can get the permalink and title values to set our custom attributes when a post is displayed

  • As we don’t want to keep these values, we can clean them when leaving the screen, adding the following line to the screen:leave event

Add Sharing Function

Trigger The Sharing

Everything is in place, now we need to bind our sharing function to the Share button by adding the following code to functions.js.

And we’re done! Now users can share an article using the native OS sharing center.

Happy coding 🙂

Published by Benjamin on March 26, 2018

Head of Digital for a press group, WordPress since 2008, WordCamp organizer, developer for the fun

2 Comments

  1. Hello guys am a fan, hope some day can have half your skills.

    Am having problem add social share to the app i don’t know what’s is the problem but i guess it’s the php i create a folder named php and drop the php file with the code in it, i was confused cuz in the tutorial seem like it should have a php dir by default but i couldn’t find it plz help me 🙂

    Reply
    • Hi Bruno,
      The code described in this tutorial is Javascript, not PHP. It goes into the functions.js file of your WP-AppKit app theme (/wp-content/themes-wp-appkit/q-android for example).
      If you need to add some PHP code from another tutorial, it will go in the app theme “php” folder (you can see there is one “php” folder in /wp-content/themes-wp-appkit/q-android).
      For any further questions, please contact us at support@uncategorized-creations.com.
      Regards,

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us