Adding a Share Button to an iOS App

I updated my iOS app "My Bookstore".
This update adds a button to share your favorite books on Twitter and Facebook.

Adding a share button is surprisingly easy.
The tricky part is that how it looks on each service varies quite a bit...

Adding the Button

First, place a button for the user to tap.

1. Drag a UIButton from the bottom-right of Storyboard and drop it onto the View.
2. Click the "figure-8" icon in the upper-right to open the ViewController source. If the wrong file opens, select the correct one from the picker at (2).
3. Right-click-drag the UIButton into the ViewController to register it as a member variable (IBOutlet).
4. Right-click the UIButton and drag "Touch Down" into the ViewController to register the tap action as an IBAction function.

Implementing the Share Action

The share action is just a call to UIActivityViewController:
In this sample, shareText contains the body text shown in the share.
In "My Bookstore", I put the book title and URL there.

Strictly speaking, the link URL is supposed to go in shareWebsite,
but how each service handles it varies. More on that below.

Attach an image via shareImage.
This sample assumes an image file "ImageFile.png" exists inside the app bundle.
If you're fetching an image from an external server, convert it to a UIImage object and pass it in.

// Body text for the share post
let shareText = "Sample text http://{url-related-to-content}/"
// App introduction URL
let shareWebsite = "http://{app-introduction-url}/"
let shareImage = UIImagePNGRepresentation(UIImage(named: "ImageFile")
// Items to share
let activityItems = [shareText, shareWebsite, shareImage] as [Any]
// Initialize and present
let activityVC = UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
self.present(activityVC, animated: true, completion: nil)

Share Results by Service

How shared content appears depends entirely on the destination service.
Here's what I found when testing with several services:

[Mail / Messages]

Sharing via Mail or Messages shows the body text, URL, and image as-is.

If multiple URLs are included they'll appear back-to-back, which looks cramped — some line breaks help.

[Twitter]

Both the in-body URL and the additional URL are included.
Long URLs are truncated with "..." and replaced with Twitter's own t.co short URLs.
The image displays properly too.

It looks quite natural on Twitter itself.
However, for users who have linked Twitter and Facebook, the auto-cross-posted result is not great:

[Twitter → Facebook cross-post]

Three URLs now appear. The third is a link to the Twitter post itself.
Worse, all three URLs are t.co short links.

To be precise, the thumbnail shown is not from the third URL's image —
it's the thumbnail from the original Twitter post.
In practice both point to the same image, so it doesn't matter much.

These issues stem from Twitter's cross-posting behavior and Facebook's rendering rules — there may be nothing an app can do about it.

[Facebook]

Facebook sharing looks polished at first glance — but it's nothing like what was actually posted.

The URL I had in the body text has been removed.
I had included an Amazon link in the body, but Facebook replaced the thumbnail with Amazon's own card (showing Prime status, review count, etc.).

Whatever happened to the image I attached to the original post?
The additional URL I included separately also disappeared.

In this case, the first URL in the list was an Amazon link, and Facebook chose that as the thumbnail source.
In the Twitter→Facebook cross-post earlier, the last URL (the Twitter link) became the thumbnail.
So it seems Facebook inspects multiple URLs and picks which one to use as the thumbnail.
What determines whether other URLs get discarded entirely is unclear.

If you're sharing posts containing multiple URLs, you'll want to carefully test how Facebook renders the result:
whether the intended URL is shown as the thumbnail, whether the main URL gets stripped, etc.

Summary

Implementing the share feature itself is straightforward.
Whether the shared content looks the way you intended is entirely up to the destination service.
Facebook in particular behaves unpredictably.

Share features often double as a way for users to spread the word about your app.
It's worth making sure the result isn't completely meaningless on the receiving end.