Adding Social Sharing For Cordova / PhoneGap Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial we will learn how to add social sharing for Cordova apps. I will be using the cordova-plugin-x-socialsharing. We will create a basic Cordova app with a few buttons that we will wire up to share on various social media platforms.

1) Creating A project

Let’s start off by creating our app we will run the following commands in the command prompt

This will create a demo template app for Cordova.

 

Now let’s add Android and iOS platforms to our project.

 

2) Adding Social Share Plugin

Now we will add the Cordova Social Share Plugin we do that by running the following command in our command prompt

3) Creating Our App

We will start off my removing everything inside the www folder and create a new file called index.html we will put the following code in it

Note the meta tag on line 5-12 this is in place so that we do not run into any white-list errors.

Notice that we are calling the domLoaded() function on the load event of the body which will not be particularly useful in this example but it is a good way to initialize Cordova Apps.

The button tags on line 25-28 we are wiring up the click events of the buttons to functions fbShare(), twitterShare(), etc

Also note that we are linking to two JavaScript files on line 31 and 32. The cordova.js file will be injected dynamically during the build process so we need not worry about it, we will however need to create the index.js file which we will do next.

 

4) Adding Share Functionality

Now we will create the functions in a JavaScript file and call is index.js and place it in a folder called js. We will put the following code in it

Here we have coded all the necessary functions which will be fired on click events of various buttons.

 

If we take a look at the documentation of the plugin  we see that the share functions normally accept 5 arguments

  1. Message to share
  2. image (base 64 encoded)
  3. link
  4. success callback
  5. failure callback

You have to pass null for the arguments which are not available.

 

5) Building Our App

Now all that there is left is to build our app which will be done by running the following command

For Android

For iOS

These commands will build and run our app in any connected device or emulator.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: