PhoneGap Social Sharing plugin for Android and iOS6+

by Mayur Panchal

• These instructions are for PhoneGap 3.0.0 and up.

0. Index

1. Description
2. Installation 2. Automatically (CLI / Plugman) 2. Manually 2. PhoneGap Build
3. Usage
4. Credits
5. License

1. Description

This plugin allows you to use the native sharing window of your mobile device.

• Works on Android, version 2.3.3 and higher (probably 2.2 as well).
• Works on iOS, version 6 and higher.
• Share text, a link, and image, or all of those. Subject is also supported, when the receiving app supports it.
• Supports sharing images from the internet, the local filesystem, or from the www folder.
• Compatible with Cordova Plugman.
• Officially supported by PhoneGap Build.

iOS 6 screenshot (options are based on what has been setup in the device settings):

2. Installation

Automatically (CLI / Plugman)

SocialSharing is compatible with Cordova Plugman, compatible with PhoneGap 3.0 CLI, here's how it works with the CLI:

$ phonegap local plugin add https://github.com/mayurloved/phonegap.git

or

$ cordova plugin add https://github.com/mayurloved/phonegap.git

run this command afterwards:

$ cordova prepare

SocialSharing.js is brought in automatically. There is no need to change or add anything in your html.

Manually

1. Add the following xml to your config.xml in the root directory of your www folder:

<!-- for iOS -->
<feature name="SocialSharing">
	<param name="ios-package" value="SocialSharing" />
</feature>

<!-- for Android -->
<feature name="SocialSharing">
  <param name="android-package" value="nl.xservices.plugins.SocialSharing" />
</feature>

For Android, images from the internet are only shareable with this permission added to AndroidManifest.xml:

<config-file target="AndroidManifest.xml" parent="/manifest">
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
</config-file>

2. Grab a copy of SocialSharing.js, add it to your project and reference it in index.html:

<script type="text/javascript" src="js/SocialSharing.js"></script>

3. Download the source files for iOS and/or Android and copy them to your project.

iOS: Copy SocialSharing.h and SocialSharing.h to platforms/ios/<ProjectName>/Plugins

Android: Copy SocialSharing.java to platforms/android/src/nl/xservices/plugins (create the folders)

PhoneGap Build

SocialSharing works with PhoneGap build too! Version 3.0 of this plugin is compatible with PhoneGap 3.0.0 and up. Use an older version of this plugin if you target PhoneGap < 3.0.0.

You can implement the plugin with these simple steps.

1. Add the following xml to your config.xml to always use the latest version of this plugin:

<gap:plugin name="nl.x-services.plugins.socialsharing" />

or to use this exact version:

<gap:plugin name="nl.x-services.plugins.socialsharing" version="3.1" />

2. Reference the JavaScript code in your index.html:

<!-- below <script src="phonegap.js"></script> -->
<script src="js/plugins/SocialSharing.js"></script>

3. Usage

You can share text, a subject (in case the user selects the email application), (any type and location of) image, and a link. However, what exactly gets shared, depends on the application the user chooses to complete the action. A few examples:

• Mail: message, subject, image.
• Twitter: message, image, link (which is automatically shortened).
• Google+ / Hangouts: message, subject, link
• Facebook iOS: message, image, link.
• Facebook Android: sharing a message is not possible. Sharing links and images is, but a description can not be prefilled.

Here are some examples you can copy-paste to test the various combinations:

  <button onclick="window.plugins.socialsharing.share('Message only')">message only</button>
  <button onclick="window.plugins.socialsharing.share('Message and subject', 'The subject')">message and subject</button>
  <button onclick="window.plugins.socialsharing.share(null, null, null, 'http://www.x-services.nl')">link only</button>
  <button onclick="window.plugins.socialsharing.share('Message and link', null, null, 'http://www.x-services.nl')">message and link</button>
  <button onclick="window.plugins.socialsharing.share(null, null, 'https://www.google.nl/images/srpr/logo4w.png', null)">image only</button>
  <button onclick="window.plugins.socialsharing.share('Message and image', null, 'https://www.google.nl/images/srpr/logo4w.png', null)">message and image</button>
  <button onclick="window.plugins.socialsharing.share('Message, image and link', null, 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')">message, image and link</button>
  <button onclick="window.plugins.socialsharing.share('Message, subject, image and link', 'The subject', 'https://www.google.nl/images/srpr/logo4w.png', 'http://www.x-services.nl')">message, subject, image and link</button>

Want to share images from a local folder (like an image you just selected from the CameraRoll)?

// note: instead of available(), you could also check the useragent (android or ios6+)
window.plugins.socialsharing.available(function(isAvailable) {
  if (isAvailable) {
    // use a local image from inside the www folder:
    window.plugins.socialsharing.share(null, null, 'www/image.gif', null); // succes/error callback params may be added as 5th and 6th param
    // .. or a local image from anywhere else (if permitted):
    // local-iOS:
    window.plugins.socialsharing.share(null, null, '/Users/username/Library/Application Support/iPhone/6.1/Applications/25A1E7CF-079F-438D-823B-55C6F8CD2DC0/Documents/.nl.x-services.appname/pics/img.jpg');
    // local-iOS-alt:
    window.plugins.socialsharing.share(null, null, 'file:///Users/username/Library/Application Support/iPhone/6.1/Applications/25A1E7CF-079F-438D-823B-55C6F8CD2DC0/Documents/.nl.x-services.appname/pics/img.jpg');
    // local-Android:
    window.plugins.socialsharing.share(null, null, 'file:///storage/emulated/0/nl.xservices.testapp/5359/Photos/16832/Thumb.jpg');
    // .. or an image from the internet:
    window.plugins.socialsharing.share(null, null, 'http://domain.com/image.jpg');
  }
});

iOS quirk (with camera plugin)

When using this plugin in the callback of the Phonegap camera plugin, wrap the call to share() in a setTimeout(). The share widget has the same limitation as the alert dialogue mentioned in the Phonegap documentation.

Excluding some options from the widget

If you want to exclude (for example) the assign-to-contact and copy-to-pasteboard options, add these lines right before the last line of the share() method in SocialSharing.m (see the commented lines in that file):

NSArray * excludeActivities = @[UIActivityTypeAssignToContact, UIActivityTypeCopyToPasteboard];
activityVC.excludedActivityTypes = excludeActivities;

I'll probably make this configurable via Javascript one day. And thanks for the tip, Simon Robichaud!

4. CREDITS

This plugin was enhanced for Plugman / PhoneGap Build by Mayur Panchal. The Android code was entirely created by the author. The iOS code was inspired by Cameron Lerch. I also included a nice enhancement posted here to allow sharing files from the internet.

5. License

The MHP License (NIT) and yes our Special Thanks to EddyVerbruggen. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.