I wanted to be able to share selected content in my app to several social media places, and not merely by copy/paste to an email client. Now my app can share contents of a <textarea> field to Facebook, Google+, Google Drive, Dropbox, a memo app, email, and so on. It was easier to do than I thought. Here is how I did it for Android.
This assumes you already have a Cordova project built and Android platform added. (Steps will be slightly different for iOS. I’ll add those steps to this page when I’m ready.)
Resource:
https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin
My current environment:
Mac OS X El Capitan 10.11.6
cordova -v: 6.3.1
cordova platform ?: android 5.1.1
Adding the resource
1. Install the social sharing plugin at https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin. Click on Clone or Download and choose the Zip option.
2. After it downloads, uncompress or unzip it in your Downloads folder.
3. [skip]
4. Download the plugin to the app using the terminal. Make sure the terminal references your app as the starting point and run:
cordova plugin add cordova-plugin-x-socialsharing
5. Add these lines to myApp/config.xml:
<!-- for Android --> <feature name="SocialSharing"> <param name="android-package" value="nl.xservices.plugins.SocialSharing" /> </feature>
6. Check that the same lines are in myApp/android/res/xml/config.xml. If not, add them:
<feature name="SocialSharing"> <param name="android-package" value="nl.xservices.plugins.SocialSharing" /> </feature>
7. Open platforms/android/AndroidManifest.xml and add the following right under another existing line that also begins with “<uses-permission”:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
8. In Downloads, copy www/SocialSharing.js to the myApp/www/js folder.
9. [skip]
10. You also need to make sure the cordova deviceready lines are included at the top of the page:
< script type="text/javascript" src="cordova.js"></script>
< script>
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
function onDeviceReady() {
}
</script>
(Remove the space after the <. I added it to prevent WordPress from converting the JavaScript line to actual code. This is true for the following JavaScript lines as well.)
Implementing the resource
1. In my app, I’ll first populate a <textarea> field with the content I want to send to social media. How you do that depends on your app structure. In myApp, it all ends up in:
<textarea id="summary"></textarea>
2. I have a share button nearby that references the openShareMenu() social sharing code:
<p><a class="black-text light-blue accent-1 left btn" href="#" onclick="openShareMenu();">Share</a></p>
3. At the bottom of the page I have the social sharing code. It’s a bit different than the resource page and works for me. At the point of tapping the Share button, the textarea had already been populated by another button (so the user can review or use the information entered without sharing). Here’s some information about it:
a. It first gets the element ID “form1″ that houses the already populated <textarea id=”summary”> and grabs its content for the message: portion. This is the main content you are sharing.
b. The subject: portion is a heading you want to associate the content with, such as you would with a subject line of an email or a filename. Choose an appropriate subject for your own app. You can perhaps programmatically grab some portion of another field to appear there in the same way I did with with the message line.
c. chooserTitle: is a message for the user that will appear in bold above the social sharing icons. With my wording, I imply that the only choices available are those already installed in the app.
d. There are a couple more options than those given below. See the resource link above.
<!-- plugin instructions: https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin -->
< script src="../js/SocialSharing.js"></script>
< script>
function openShareMenu() {
form1 = document.getElementById("form1");
var options = {
message: form1.summary.value, // populate this with your populated textarea content
subject: 'Project Summary',
chooserTitle: 'Pick an installed app' // Android only, you can override the default share sheet title
};
/* use for testing */
var onSuccess = function(result) {
console.log("Share completed? " + result.completed); // On Android apps mostly return false even while it's true
console.log("Shared to app: " + result.app); // On Android result.app is currently empty. On iOS it's empty when sharing is cancelled (result.completed=false)
};
var onError = function(msg) {
console.log("Sharing failed with message: " + msg);
};
window.plugins.socialsharing.shareWithOptions(options, onSuccess, onError);
}
</script>
Results
Clicking on the Share button I made brings up the sharing sheet of icons. Three dots below the icons indicates that there are three sheets worth of icons to share to. I’ll give a sampling of what happened with my implementation. Note that your most recent sharing icons used will be remembered and moved to the first sheet when you return to the sharing sheet later.
a. “Save to [Google] Drive” results in the Subject being the default document name. You’ll choose a folder and it’ll be inserted as a document file.
b. “Memo” saves it as a text memo, with the Subject as the memo header.
c. “Add to Dropbox” gave me a choice of folders to save it to, with an Add button. Tapping the Add button gave me a chance to type in a filename. The Subject line was ignored. Clicking OK saved it as a text file. After hitting Cancel, I could use the Android back button to return to the app (as I could with all the other sharing apps here).
d. “Google+” filled the blog entry with the text and ignored the Subject line. I could edit it any way I wish before hitting the Post button. If I choose to Cancel, it asks me if I wanted to discard the post.
e. “Convert to [Adobe] PDF” opened a creen for Subscribe or Sign In. I clicked Sign In and entered my Adobe ID and password. The page gave a text filename composed of the first word in the contents, an underscore, then the date and time, then .txt. I tapped on Convert. After waiting, the filename appeared appended with pdf (no txt). Tapping on the entry showed the text output in an ugly Times-like serif font. The share icon below the screen brought up the same share icons as in my app for further sharing.
f. “Messages” pasted the contents into the Messages app and waited for me to type in a recipient. The Subject is ignored, since Messages doesn’t provide a subject line.
g. “Email” pasted the contents into an email and waited for me to type in a recipient. The Subject was the email subject.
h. “Copy to clipboard” results in a notice fading on: “Copied to clipboard.” See the next point …
i. “Facebook” opened the FB app, but did not automatically paste the contents. Luckily I had already pasted to clipboard, so I pressed and held until Paste appeared, and got the contents pasted in.
j. “AndroidBeam” transferred the contents to another Android device. First, both devices needed to have NFC turned on (in Settings). Once AndroidBeam is tapped, put both devices back to back flat against each other. The other device then shows the text on its screen. I assume one would press and hold to copy it, then open an app to paste it as a file.
k. “Gmail” copied the contents into the email body and the subject into the subject line and waited for a recipient to be added.
l. “OneDrive” opened a screen for entering your Microsoft account or for signing up. I did not have an account, so I press Back. This tells me that the icons showing do not know if you have an account or not.
m. “Wi-Fi Direct” detected a Wi-Fi printer device by name and “Connected.” It will detect such an enabled printer even if the Wi-Fi was turned off, so that has to be checked first. I selected it and tapped “Share.” This experiment is inconclusive; nothing printed after Wi-Fi was turned on: “Sending failed.”
n. “Bluetooth” detected a nearby computer by name. I tapped on the computer name in the listing. It saved the text file to that PC computer’s My Documents folder in a Bluetooth-titled subfolder, a subfolder which I assume was created on the fly for the file.
iPhone Dev Log 