Sharing Best Practices for Websites & Mobile Apps

For Websites

We want all websites-- and in particular news sites, magazines, blogs, and other media sites-- to easily reach their existing fans and grow their fan base. This way, people can get the most engaging Facebook experience.

  1. Learn who your users are and what they want to share
  2. Make sure the Facebook Crawler can access your site
  3. Use proper Open Graph tags to drive distribution
  4. Optimize your image sizes to generate great previews
  5. Use our debug tool to debug your Open Graph Tags
  6. Encourage your content creators to turn on Follow
  7. Pre-cache the og:image for your stories

For Mobile Apps

We also want to help mobile app developers make it easy for their users to become their advocates. Building app experiences that people understand and trust is key to successfully using Facebook Sharing. Below are some best practice we highly recommend you follow:

  1. Ask for permissions to publish explicitly when people share
  2. Use App Links to link into a specific location in your app from Facebook to enable a seamless experience
  3. Make your stories more engaging and customized with Open Graph
  4. Use Message Dialog for private sharing
  5. Use App Insights to track your metrics

Sharing Best Practices for Websites

1. Learn what people want to share

Having great content is necessary, but it’s not the only thing that gets people to share your content.

Track the success of your content with Facebook Insights. You can view the reach of particular stories, understand the demographics of who is sharing and engaging with your content and optimize future efforts based on this understanding. This data is available online and through an API for developers.

2. Facebook Crawler access

The Facebook Crawler fetches content from your site and generates a preview for people on Facebook. When someone shares a URL on Facebook and Likes or Recommends a page on your site using a plugin, it activates the Facebook Crawler. If your content is publicly available, we should have no problem accessing it.

If your content requires someone to login or if you restrict access after some amount of free content has been consumed, you will need to enable access for the Facebook Crawler. This access is only used to generate previews, and Facebook will not publicly expose your private content.

There are two methods to give Facebook’s Crawler access to your content:

  1. IP whitelisting, which is more secure, but requires upkeep
  2. User agent whitelisting, which is less secure, but requires little to no upkeep)

IP whitelisting

Your engineers can allow the following IP addresses access to pages that would otherwise be inaccessible to the public.

31.13.24.0/21
31.13.64.0/18
66.220.144.0/20 
69.63.176.0/20 
69.171.224.0/19 
74.119.76.0/22 
103.4.96.0/22 
173.252.64.0/18 
204.15.20.0/22
2401:db00::/32 
2620:0:1c00::/40 
2a03:2880::/32

Please note that these IP ranges can and do change regularly, so you should periodically run the following command to receive an updated list

whois -h whois.radb.net -- '-i origin AS32934' | grep ^route

User agent whitelisting

Your engineers can allow the following user-agent access to pages that would otherwise be inaccessible to the public. We rarely update these user-agents, and users can spoof them. But since only a very small percentage of users know how to change their browser’s user-agent, the expected number of users who would exploit this is very low. Additionally, you also do not need to include all the URL's regular content to our crawler, just a valid HTML document with the appropriate meta tags.

Facebook’s crawler crawls with facebookexternalhit/<version_number>, where <version_number> is either 1.0 or 1.1, as of March 2013.

facebookexternalhit/1.0
facebookexternalhit/1.1

As of May 28th, 2014 you may also see a crawler with the following user agent string:

Facebot

The Facebot crawler may crawl your entire website instead of just a single page. Facebot will respect your robots.txt settings.

Crawler rate limiting

You can label pages and objects to change how long Facebook's crawler will wait to check them for new content. Use the og:ttl object property to limit crawler access if our crawler is being too aggressive.

3. Use proper Open Graph tags

Open Graph tags are included in your page’s HTML and allow the Facebook Crawler to generate previews when your content is shared on Facebook.

We give examples below, but the basic Open Graph tags you should implement are:

  • og:title – The title of your article, excluding any branding.
  • og:site_name - The name of your website. Not the URL, but the name. (i.e. "IMDb" not "imdb.com".)
  • og:url – This URL serves as the unique identifier for your post. It should match your canonical URL used for SEO, and it should not include any session variables, user identifying parameters, or counters. If you use this improperly, likes and shares will not be aggregated for this URL and will be spread across all of the variations of the URL.
  • og:description – A detailed description of the piece of content, usually between 2 and 4 sentences. This tag is technically optional, but can improve the rate at which links are read and shared.
  • og:image – This is an image associated with your media. We suggest that you use an image of at least 1200x630 pixels.
  • fb:app_id – The unique ID that lets Facebook know the identity of your site. This is crucial for Facebook Insights to work properly. Please see our Insights documentation to learn more.

In addition, you might consider implementing some other types to improve distribution and engagement:

  • og:type - Different types of media will change how your content shows up in Facebook's newsfeed. There are a number of different common object types already defined. If you don't specify a type, the default will be website. You can also specify your own types via Open Graph.
  • og:locale - The locale of the resource. The default is en_US. You can also use the og:locale:alternate to reflect that you have other available language translations available as well. See our Internationalization and Open Graph Internationalization pages for examples and information.
  • article:author - This property links to the authors of the article. The target of this can be either a Facebook Profile or a Facebook Page and Facebook will likely offer a chance to follow that author when it's displayed in the news feed. (Note that your authors should have follow enabled so that people can follow them.)
  • article:publisher - This property links to the publisher of the article. The target of this property must be a Facebook Page. When displayed in the News Feed, Facebook may offer the ability to like the publisher. Note that this tag is only available to media publishers.

Example 1: GOOD

A clear title without branding or mentioning the domain itself.

<meta property="og:title"
content="Workday Sets Price Range for I.P.O." />

A site name:

<meta property="og:site_name" content="My Favorite News"/>

A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article.

<meta property="og:url"
content="http://www.myfavnews.com/2013/1/1/workday-price-range" />

A clear description, at least two sentences long.

<meta property="og:description" content="Workday, a provider of cloud-based
applications for human resources, said on Monday that it would seek to price
its initial public offering at $21 to $24 a share.  At the midpoint of that
range, the offering would value the company at $3.6 billion. Like many other
technology start-ups, Workday, founded in 2005, will have a dual-class share
structure, with each Class B share having 10 votes. Its co-chief executives,
David Duffield, the founder of PeopleSoft, and Aneel Bhusri, who was chief
strategist at PeopleSoft, will have 67 percent of the voting rights after
the I.P.O., according to the prospectus." />

Unique ID that identifies your domain to Facebook.

<meta property="fb:app_id" content="[FB_APP_ID]" />

The type of object:

<meta property="og:type" content="article" />

This article has some translations:

<meta property="og:locale" content="en_US" />            <!-- Default -->
<meta property="og:locale:alternate" content="fr_FR" />  <!-- French -->
<meta property="og:locale:alternate" content="it_IT" />  <!-- Italian -->

This article has an author and a publisher:

<meta property="article:author" content="https://www.facebook.com/fareedzakaria" />
<meta property="article:publisher" content="https://www.facebook.com/cnn" />

Example 2: BAD

The title should not have branding or extraneous information.

<meta property="og:title"
content="MyFavNews.com – Business Section- Workday Sets Price Range for I.P.O." />

This URL has extraneous information that changes from user to user, resulting in likes/shares spread across multiple URLs, instead of being aggregated for all users sharing this article.

<meta property="og:url"
content="http://www.myfavnews.com/2013/1/1 /workday-price-range?user_id=1234" />

This is a generic description that will not entice users to click.

<meta property="og:description"
content="MyFavNews is the best source for your favorite news." />

This is a generic image that will look the same for all stories. It is only 100px by 100px, which will not be usable on higher resolution displays.

<meta property="og:image"
content="http://graphics.myfavnews.com/images/logo-100x100.jpg" />

Don’t forget the fb:app_id, article:author and article:publisher tags!

4. Optimize your image sizes to generate great previews

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.

We've also redesigned link page posts so that the aspect ratio for images is the same across desktop and mobile News Feed. Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.

Game Apps

Images for game app stories appear in a square format. Image ratios for these apps should be 600 x 600 px. Read more about Open Graph for Games.

5. Use Open Graph Debug Tool

Facebook has a very simple debug tool on our developer site that lets you debug Open Graph tags on your website. All you have to do is plug in your URL and it will give you results with hints on what you need to fix.

6. Encourage your content creators to turn on Follow

Follow lets content creators share public updates with their followers, while saving personal updates for friends only. For example, journalists can allow readers or viewers to follow their public content, like photos taken on location or links to published articles. Follow is a simple, effective way for your audience to connect with you and keep up with your content, without adding you as a friend.

Get started with Follow:

  • Enable Follow - Go to your Account Settings and click on the Followers tab. Check the box to allow followers, and if you’d like, you can adjust your settings for follower comments and notifications.
  • Fill out your timeline - Make sure your timeline looks professional: add a cover photo, your title and work history, key career milestones, and life events.
  • Observe – Follow other journalists, photographers, authors, and anyone else who has built up a large follower base. Visit their timelines and check out the types of content they share.
  • Post to your followers - Share interesting photos, links to your content, and updates about what you’re working on, etc. Any post you set to Public will be shown to your followers in News Feed.
  • Be Authentic – Post in your own voice, use photos you’ve actually taken, and be honest.

7. Pre-cache the og:image for your stories

Some of our Social Plugins render an image when someone is interacting with them. The image is based on the og:image on the page, or other images on the page if the og:image isn't set. Before the social plugin can render an image Facebook's crawler has to see the image at least once. For sites where pages change frequently (e.g. ecommerce) the first person who clicks on these plugins won't see a rendered image:

Image not rendered on first click of the like button.
After reloading the page and clicking like again.

If you create a new page, update the image (or other content on the page), you can pre-cache the image by putting the url in our debugger and pre-caching the content. This will trigger the crawler to look at your page and pre-cache the content, including the image.

Sharing Best Practices for Mobile

Let your users be your advocates by making it easy for them to tell their friends about your app using Facebook Sharing.

Building app experiences that people understand and trust is key to successfully using Facebook Sharing. For people using your app, sharing helps them communicate with their friends about what's important to them and enhances their experience in your app. For you as a developer, sharing increases awareness of your app through impressions in the Facebook newsfeed and, when people engage with the content posted from your app, it can send people to your app or your app's App Store page, driving traffic and app installs.

There are four ways to allow your users to Share on mobile:

Apps that follow these best practices help people feel comfortable about sharing and thus helps to create a win-win scenario for both developers and users.

The following are best practices that we highly recommend you follow:

  1. Ask for permissions to publish explicitly when people share
  2. Use App Links to link into a specific location in your app from Facebook to enable a seamless experience
  3. Make your stories more engaging and customized with Open Graph
  4. Use Message Dialog for private sharing
  5. Use App Insights to track your metrics

1. Ask for permissions to publish explicitly when people share

You should trigger permission requests when people are trying to accomplish an action in your app which requires the particular permission. Asking for permissions in context is especially important when your app is asking for publish permissions. We recommend that you ask for publish permissions after people click a "share," "post," or "publish" option in your app. If your app only needs basic sharing functionality (e.g., sharing one item at a time, no custom composer), you can use our Share Dialog for iOS and Android.

One of the most interesting aspects of sharing to Facebook from your app is that when people engage with the news feed stories posted from your app, those stories can send people to your app or your app's App Store page, driving traffic and app installs. You can implement this behavior using App Links. App Links is a standard that makes it possible to deep link to content in your app. When someone using your app shares content via Facebook (or another App Links-enabled app) you can create a link that makes it possible to jump back into your app into that piece of content.

3. Make your stories more engaging and customized with Open Graph

Open Graph lets apps tell stories on Facebook through a structured, strongly typed API.

People use stories to share the things they're doing, the people they're doing them with and the places where they happen. Open Graph lets you integrate apps deeply into the Facebook experience, which increases engagement, distribution and growth. People can view the same stories across multiple devices— and can comment on their friends' stories and start a conversation:

Read here to learn more about Open Graph.

4. Use Message Dialog for private sharing

Message Dialog allows people to explicitly share stories with content from your app in a more personal way to a more specific, limited audience using Facebook Messenger. App Links seamlessly transits to the right location in your app.

5. Use App Insights to track your metrics

Facebook Insights provides developers and Page owners with metrics about their content. By understanding and analyzing trends about usage and demographics as well as consumption and creation of content, you can be better equipped to improve your business and create better experiences on Facebook. Read more about Insights here.

Was this document helpful?