Like Button for the Web

When a person visiting your webpage clicks the Like button, an App Event is triggered to log this like on Facebook.

欧州地域でのソーシャルプラグインに対する変更

欧州地域でFacebook製品を使用しているユーザーに関しては、Cookie同意プロンプトが更新されたため、ソーシャルプラグインに何らかの影響が現れる可能性があります。欧州地域のユーザーは、1)Facebookアカウントにログインしている、2) 「アプリとウェブサイトのCookie管理」に同意している、のいずれかの条件を満たさない限り、「いいね！」と「コメント」のソーシャルプラグインのサポートを終了します。この二つの要件が満たされていれば、ユーザーは「いいね」や「コメント」ボタンなどのプラグインを見たり、操作したりすることができます。上記のいずれかの条件を満たさない場合、ユーザーはプラグインを見ることができません。

欧州地域には、以下の国が含まれます。

欧州連合 (EU): オーストリア、ベルギー、ブルガリア、クロアチア、キプロス共和国、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、ハンガリー、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルク、マルタ、オランダ、ポーランド、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン
EU加盟国ではないが、EEAのみ/EFTA、または関税同盟国: [EEA のみ/EFTA] アイスランド、リヒテンシュタイン、ノルウェー、スイス [EU 関税同盟] すべてのチャンネル諸島、マン島、モナコ、キプロスのイギリス主権基地領域。[欧州関税同盟] アンドラ、サンマリノ、バチカン市国
EU 加盟国ではないが、欧州最外部地域（OMR)に属する地域: マルティニーク、マヨット、グアドループ、フランス領ギアナ、レユニオン、サンマルタン、マディラ、アゾレス諸島、カナリア諸島
英国 (全ブリテン諸島)

Get a Customized Like Button

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

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

Like Button Configurator

「いいね！」するURL

Width

レイアウト

standard

アクションタイプ

ボタンサイズ

small

シェアボタンを追加

コードを取得

Note, if you are already logging app events, remove the autoLogAppEvents=1 statement from the button code to prevent duplicate logging.

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}
             &autoLogAppEvents=1" 
        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.