Social Share Bible

The following will help you understand how social shares work.

Quick Summary

• We are technically sharing links to pages. We don't share graphics or videos directly, unless we build an app and do API calls. This article is not about building custom apps and API calls.
• When you share to Facebook, what you share will look different on 1) desktop browser, 2) mobile web browser, 3) mobile app. Test all 3 environments!
• A link has 3 components for sharing: a title, a description, and an image. If you break the recommendations then things can crop in an ugly way.
  1. Title: Try to keep 60 characters or under.
  2. Description: Try to keep 160 characters or under.
  3. Image: Recommended size is 1200x630.
  4. Quote - Ok, we lied. There is a forth option just for Facebook. But it is rarely used. More details are in the tester section below.
• A link can be:
  • Normal links that open up some page.
  • Deeplinks specially coded to show content or states within a page.
  • Redirects that take you to another page.
  • Third-party sites where we do not control how they look when shared.

Social Media Tester

Worried your title or description is too long and won't fit?

Want to see what a link will look like when you share it?

Here you can test.

Cache Clearing

Facebook & Twitter both cache the URLs that you share. Here are their debuggers to help if you don't see updates, want to clear cache, or wish to debug.

Facebook's Debugger

Twitter's Debugger

Facebook Details

• Per Facebook: "Use images that are at least 1200x630 pixels for the best display on high resolution devices. " It does not need to be this proportion, but doing this saves some headaches. The minimum size if you can't or don't want to do this size is 200x200.
• If you add a URL in the description, it will be clickable.
• This is important so sayign it twice: Facebook will look different on 1) desktop browser, 2) mobile web browser, 3) mobile app. Test all 3 environments!
• Facebook's best practices: https://developers.facebook.com/docs/sharing/best-practices
• If you really want to share a video directly in Facebook instead of a link, and don't want to make a special app to do this, there is a kind of hack. You can directly share a video playable in your feed if it is uploaded to a Facebook fan page. You can see what I mean by sharing this sample video on your wall: https://www.facebook.com/facebook/videos/10157073780771729/

Twitter Details

• Twitter will generate a "Facebook-like" preview graphic using all the FB dimensions above. You don't need need to make Twitter a different way.
• You could technically make a separate graphic for Twitter and Facebook if you wanted.
• You can put #hashtags and @UserNames in the tweet.

Tumblr Details

• The service is almost dead
• Tumblr just copies what we do for Facebook.
• If you make a Tumblr "share icon button," we can also add tags into the Tumblr link share.