Configuring Meta Tags for Facebook Share
Adding Facebook Share to your website is easy. However, you can enhance how the shared item appears on Facebook by configuring how it gets previewed on a user’s profile and when a user tries to share it. You do this with a combination of <link> and <meta> tags.
Facebook Share passes along the URL of your page to our servers, which in turn looks up certain HTML tags within it. Those tags are used to display a preview of the page. In order to provide this preview, we always look for the title of the page, a summary of the main content and an image. If there’s media content on the page, those media files are also important to identify.
In order to make sure that the preview is always correctly populated, you should add the tags shown below to the <head> element in your HTML code. If you don’t tag your page, Facebook Share will grab the title of your page as specified in the <title> tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.
You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the <head> element in your page:
So an example news story could have the following:
As shown, title contains the preview title, description contains the preview summary and image_src contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out. For consistency’s sake, please use the <meta> tag to provide text data for the preview, and the <link> tag for any source URLs.
The title and description tags are the minimum requirements for any preview, so make sure to include these two.
The thumbnail_image is the URL to the image that appears in the Feed story. The thumbnail’s width or height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.
Specifying a “medium” Type
You may also specify the type of content being shared by using the following tag:
Valid values for medium_type are “audio”, “image”, “video”, “news”, “blog” and “mult”.
Specifying Multimedia Tags
By default, Facebook Share assumes that the page being shared is a full page, and a link or URL will be shared in the user’s Feed.
If you specifically want to share audio or Flash content that renders and plays inline on Facebook, you need to specifically tag your page to identify the Flash content.
The ideal way for you to connect video and media files to the share link is to make the URL in the link point to a Web page that contains the <meta>/<link> tags described above (title, description, image_src) along with some additional <meta>/<link> tags:
In order to embed Flash content with Facebook Share, you must add a few additional meta tags along with title and description from above:
- image_src – URL to the thumbnail image. Max size is 130×110 pixels. Images will be resized proportionally
- video_src – URL to the embedded video file
- video_height – max height is 280px
- video_width – max width is 420px
- video_type – specify the content type or MIME type of the video file here. For Flash content, use “application/x-shockwave-flash”
- Facebook supports embedding video in SWF format only.
- For your videos to be embeddable on Facebook, Facebook must whitelist your site. Please send a request using the form here and include the domain names where your plan to host the Flash content.
Here is an example of embedded Flash video:
For that video, the appropriate metadata would look like this:
Hiding the Share Action Bar
When someone clicks on your shared item, they are redirected to your page and a small action bar is added above your site. The action bar promotes further sharing so that more people can see your content If you would like to disable this feature, simply add this code to your web page: