Этот документ обновлен.
Перевод (Русский) еще не готов.
Последнее обновление (английский): 6 ноя
Последнее обновление (Русский): 1 июн

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. Follow these best practices to give people the most engaging Facebook experience.

  1. Make sure the Facebook Crawler can access your site
  2. Use proper Open Graph tags to drive distribution
  3. Optimize images to generate great previews
  4. Use the Sharing Debugger to debug your Open Graph tags
  5. Encourage your content creators to turn on Follow
  6. Implement JavaScript event tracking to follow plugin use in real time

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. Use App Links to link into a specific location in your app from Facebook to enable a seamless experience
  2. Use Message Dialog for private sharing
  3. Use Facebook Analytics to track your metrics
  4. Use HTTP User-Agent Header - to count mobile referral traffic from iOS and Android to your website.

Sharing Best Practices for Websites

1. 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.

You can learn more about how to make sure the Facebook Crawler can access your site in the Facebook Crawler Guide.


2. Use proper Open Graph tags

When someone shares content from your site to Facebook, our crawler will scrape the HTML of the URL that is shared. On a regular HTML page this content is basic and may be incorrect, because the scraper has to guess which content is important, and which is not.

Take control of what the Facebook crawler picks up from each page by using Open Graph meta tags. These tags provide structured info about the page such as the title, description, preview image, and more.

Good Examples

Title

A clear title without branding or mentioning the domain itself.

URL

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

Description

A clear description, at least two sentences long.

Facebook App ID

A Facebook App ID that identifies your website to Facebook.

Object Type

The type of object:

Localization

This article has some translations:

Author and Publisher

This article has an author and a publisher:


Bad Examples

Bad Title

The title should not have branding or extraneous information.

Bad URL

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.

Generic Description

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

Generic Image

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.

Missing Facebook App ID

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


3. Optimize images to generate great previews

Image Sizes

Use images that are at least 1080 pixels in width for best display on high resolution devices. At the minimum, you should use images that are 600 pixels in width to display image link ads. We recommend using 1:1 images in your ad creatives for better performance with image link ads.

Game Apps Images

There are two different image sizes to use for game apps:

  • Open Graph Stories Images appear in a square format. Image ratios for these apps should be 600 x 600 px.
  • Non-open Graph Stories Images appear in a rectangular format. You should use a 1.91:1 image ratio, such as 600 x 314 px.

Read more about Open Graph for Games.

Pre-caching images

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image:

There are two ways to avoid this and have images render on the first Like or Share action:

1. Pre-cache the image with the Sharing Debugger

Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do this if you update the image for a piece of content.

2. Use og:image:width and og:image:height Open Graph tags

Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.


4. Use the Sharing Debugger to debug your Open Graph tags

Getting your meta-tags and social plugins correct can take a bit of tweaking, so we provide a debug tool to let you test how your pages are viewed by our scraper. Just enter your page URL, and you'll get a page of useful information, such as the meta-tags that are being picked up from your page and any errors or warnings with your content that might affect social plugins.

The debug tool also refreshes any scraped content we have for your pages, so it can be useful if you need to update them more often than the standard 24 hour update period.


5. 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.

6. Implement JavaScript event tracking to follow plugin use in real time

You might want to track the interactions of people with social plugins on your site as they happen. The Facebook SDK for JavaScript can subscribe to events for someone clicking on a Like button, or sending a message with the Send button, or making a comment. The FB.Event.subscribe reference guide will show you how to track these events.

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. Use App Links to link into a specific location in your app from Facebook to enable a seamless experience
  2. Make your stories more engaging and customized with Open Graph
  3. Use Message Dialog for private sharing
  4. Use Facebook Analytics to track your metrics

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.


2. 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.


3. Use Facebook Analytics to track your metrics

Facebook Analytics 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. Visit Facebook Analytics to read more.


4. Use the HTTP User-Agent Header

You may want to track mobile referral traffic to your website from Facebook on iOS or Android. This is especially common when people share links to your site to Newfeed and their contacts click on these links on mobile. Your app should:

  • Watch for an HTTP Referer header with a value including facebook.com

  • See if referral traffic originates from Facebook on iOS, Android, or on a mobile web browser on these channels. Check for a HTTP User-Agent with the value FB_IAB/FB4A for Android and FBAN/FBIOS for iOS.