文档已更新。
中文(简体) 译文尚未完成。
英语更新时间:11月10日
中文(简体) 更新时间:2023年10月10日

Like Button for the Web

As Meta’s developer platform continues to evolve, we're making strategic decisions to focus on tools and features that deliver the most value to developers and businesses. Today, we're announcing that two Facebook Social Plugins - the Facebook Like button and the Facebook Comment button - will be discontinued on February 10, 2026.

This change reflects our commitment to maintaining a modern, efficient platform that serves developers' current needs while enabling us to invest in future innovations. The plugins that will be discontinued reflect an earlier era of web development, and their usage has naturally declined as the digital landscape has evolved.

On February 10, 2026 the plugins will gracefully degrade by rendering as a 0x0 pixel (i.e., an invisible element) rather than causing errors or breaking your website functionality. This change is intended to only remove the plugin content from your site and should not otherwise impact your website's functionality.

For more information, please see the blog and FAQ about this change.

欧洲地区社交插件的变更

由于系统会向欧洲地区使用 Facebook 产品的用户显示更新过的 Cookie 同意提示,因此可能会发现社交插件受到一些影响。对于欧洲地区的用户,我们将不再支持“赞”和“评论”社交插件,除非这些用户:1) 已登录到他们的 Facebook 帐户中,并且 2) 已同意接受“应用和网站 Cookie”控件。如果已同时满足这两项要求,则用户将能够看到“赞”或“评论”按钮之类的插件,还能与其互动。如果未满足上列任一要求,则用户将不能看到那些插件。

欧洲地区是指列出的一系列特定国家/地区,其中包括:

  • 欧盟 (EU):奥地利、比利时、保加利亚、克罗地亚、塞浦路斯共和国、捷克共和国、丹麦、爱沙尼亚、芬兰、法国、德国、希腊、匈牙利、爱尔兰、意大利、拉脱维亚、立陶宛、卢森堡、马耳他、荷兰、波兰、葡萄牙、罗马尼亚、斯洛伐克、斯洛文尼亚、西班牙、瑞典

  • 仅属于欧洲经济区 (EEA)/属于欧洲自由贸易联盟 (EFTA) 或关税同盟的非欧盟 (EU) 成员:[仅属欧洲经济区/属于欧洲自由贸易联盟] 冰岛、列支敦士登和挪威;瑞士:[欧盟关税同盟] 所有海峡群岛、马恩岛、摩纳哥;塞浦路斯英属基地;[欧洲关税同盟] 安道尔、圣马力诺、梵蒂冈。

  • 属于欧洲外延地区 (OMR) 的非欧盟成员:马提尼克岛、马约特岛、瓜德罗普岛、法属圭亚那、留尼汪岛、圣马丁岛、马德拉群岛、亚速尔群岛、加那利群岛。
  • 英国(所有不列颠群岛)

Get a Customized Like Button

Use the Like Button Configurator to get the Like button code to insert into your webpage.

  1. Set the URL of your webpage where you are placing the Like button
  2. Customized your Like button
  3. See a preview of your button
  4. Click the Get Code, and copy and paste the code into your webpage

Like Button Configurator

href
Width
layout
action
size

Use Open graph meta tags to edit your link preview. The og:url tag and data-ref attribute should be the same URL.

Full Code Example

Formatted for readability.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}" 
        nonce="FOKrbAYI">
  </script>

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="https://www.your-domain.com/your-page.html" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>

</body>
</html>

Like Button HTML5 Attributes

HTML5 Attribute Description

data-action

The verb to display on the button. Can be either like (default) or recommend.

data-colorscheme

The color scheme used by the plugin for any text outside of the button itself. Can be light (default) or dark.

data-href

The URL of the webpage that will be liked.

data-kid-directed-site

If your website or online service, or a portion of your service, is directed to children under 13 you must set this to true. Default is false.

data-layout

Selects one of the different layouts that are available for the plugin. Can be one of standard (default), button_count, button or box_count. See the FAQ for more details.

data-lazy

true means use the browser's lazy-loading mechanism by setting the loading="lazy" iframe attribute. The effect is that the browser does not render the plugin if it's not close to the viewport and might never be seen. Can be one of true or false (default).

data-ref

A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details.

data-share

Specifies whether to include a share button beside the Like button, true or false (default). This only works with the XFBML version.

data-size

The button is offered in 2 sizes i.e. large and small (default).

data-width

The width of the plugin (standard layout only), which is subject to the minimum and default width. Please see the Layout Settings table for more details.

Layout Settings

Layout Settings are optional.

Layout Default Sizes

standard

Minimum width: 225 pixels.
Default width: 450 pixels.
Height: 35 pixels (without photos) or 80 pixels (with photos).

box_count

Minimum width: 55 pixels.
Default width: 55 pixels.
Height: 65 pixels.

button_count

Minimum width: 90 pixels.
Default width: 90 pixels.
Height: 20 pixels.

button

Minimum width: 47 pixels.
Default width: 47 pixels.
Height: 20 pixels.

Change the Language

You can change the language of the Like Button by loading a localized version of the Facebook JavaScript SDK. Replace en_US with your locale, for example, fr_FR for French (France).

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />"; 

The width of a Social Plugin may need to be adjusted to accommodate different languages.