Cross-Platform Social Network Sharing

Update : This module is also available as an Alloy Widget

One of the coolest things of building mobile apps is the capability of sharing text and images with social
networks. Allowing your users to share status updates to Twitter and Facebook (among other) can increase
your user engagement because not only said status updates could carry your app’s name, but you’re allowing
your user to do it without leaving your app.

In my book Build native cross-platform apps with Appcelerator I guide you through the process of
building an app that I call PhotoMEME.

This app is somewhat simple, as compared to the conference app,
but I think it’s kind of fun, plus it was really fun to write. In a nutshell, you can take a photo, then add some text
to it and create a meme, which you can then share with your friends, primarily over Facebook and Twitter. The
most challenging part of this app was that iOS and Android work very differently when it comes to sharing content
with other apps.

Android is easy because it has a built-in mechanism called share intent, to which you can send some data, and
Android will automatically give you a list of apps that can handle that type of data.

For iOS, the user experience is similar, but the implementation is much more different and complex. Luckily
Appcelerator Titan Mads Møller created a native module called TiSocial.Framework
that implements the native iOS code required to expose this feature, at least for Twitter and Facebook.

But even after having these two capabilities exposed to you, the implementations, as far as cross-platform is
concerned, are very different at the JavaScript level. For this reason I created the
SocialShare CommonJS module, which normalizes these two
different methods into one simple function call.

The code is very simple:

require('com.alcoapps.socialshare').share({
    status                  : 'This is the status to share',
    image                   : fileToShare.nativePath,
    androidDialogTitle      : 'Sharing is caring!!!'
})

As simple as that: one function call, send the text you’d like to share, the image you’d like to share (if any),
and the title for the Android dialog. This module will take care of the cross-platform differences for you, and
will offer your user a native sharing dialog they already know how to use.

To learn more about this and other cool cross-platform tips, tricks, techniques and full apps, make sure you checkout my book Build native cross-platform apps with Appcelerator.

7 COMMENTS

  1. Dear Ricardo,

    I am getting your book for sure! In addition, I would like to ask you if
    you know any book about building social message apps with chating and calling options like whatsapp or viber.

    Thanks a lot!

  2. Nice, thanks for sharing Ricardo!

    This commonjs module would be even more useful / reusable if you built it as an alloy widget (it would referenced and instalable through gitt.io, etc.). We would just have a problem with the native modules, which should be installed separately, but this is not a great matter and a README could help

  3. This throws ‘NSGenericException’ on iPad devices.
    UIPopoverPresentationController
    () should nave a non-nil sourceView or barButtonItem set before the presentation occurs

    Is there an update or workaround for this?

Comments are closed.