いいね！ボタン(ウェブ用)

あなたのウェブページにアクセスした人がいいね！ボタンをクリックすると、アプリイベントがトリガーされ、その「いいね！」のログがFacebookに記録されます。

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

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

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

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

カスタマイズしたいいね！ボタンを取得する

ウェブページに挿入するいいね！ボタンのコードを取得するには、いいね！ボタン設定ツールを使用します。

いいね！ボタンを配置するウェブページのURLを設定する
いいね！ボタンをカスタマイズする
ボタンのプレビューを確認する
[コードを取得]をクリックし、コードをコピーしてウェブページに貼り付ける

いいね！ボタン設定ツール

「いいね！」するURL

Width

レイアウト

standard

アクションタイプ

ボタンサイズ

small

シェアボタンを追加

コードを取得

すでにアプリイベントをログに記録している場合は、ログ記録の重複を避けるため、ボタンコードからautoLogAppEvents=1ステートメントを削除してください。

Open Graphメタタグを使用すると、リンクのプレビューを編集できます。og:urlタグとdata-ref属性のURLは同じものにしてください。

全コードの例

読みやすいようにフォーマットしたコードを次に示します。

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

いいね！ボタンのHTML5属性

HTML5属性	説明
`data-action`	ボタンに表示する動詞。`like` (デフォルト)または`recommend`のどちらかを指定できます。
`data-colorscheme`	プラグインが使用するカラースキームです。ボタンそのものではなく、その外側にあるテキストに適用されます。`light` (デフォルト)または`dark`を指定できます。
`data-href`	「いいね！」の対象となるページのURL。
`data-kid-directed-site`	ウェブサイト、オンラインサービス、またはサービスの一部が13歳未満の子どもを対象としている場合は、これを`true`に設定しなければなりません。デフォルトは`false`です。
`data-layout`	プラグインに使用できるレイアウトの中から1つ選択します。`standard` (デフォルト)、`button_count`、`button`、`box_count`のいずれかを指定できます。詳細は、よくある質問をご覧ください。
`data-lazy`	`true`を指定すると、`loading="lazy"` iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。`true`または`false` (デフォルト)を指定できます。
`data-ref`	リファーラルをトラッキングするためのラベル。文字数は50未満にする必要があります。英数字と一部の記号(現時点では+/=-.:_)を使用できます。詳細は、よくある質問をご覧ください。
`data-share`	いいね！ボタンの横にシェアボタンを表示するかどうかを、`true`または`false` (デフォルト)で指定します。この設定はXFBMLバージョンでのみ機能します。
`data-size`	ボタンのサイズには`large`と`small` (デフォルト)の2種類があります。
`data-width`	プラグインの幅(standardレイアウトのみ)。最小幅やデフォルト幅が設定されている場合は、それらの値が優先されます。詳細は、「レイアウト設定」の表をご覧ください。

レイアウト設定

レイアウト設定は任意です。

レイアウト	デフォルトサイズ
`standard`	最小幅: 225ピクセル。デフォルト幅: 450ピクセル。高さ: 35ピクセル(写真なし)または80ピクセル(写真あり)。
`box_count`	最小幅: 55ピクセル。デフォルト幅: 55ピクセル。高さ: 65ピクセル。
`button_count`	最小幅: 90ピクセル。デフォルト幅: 90ピクセル。高さ: 20ピクセル。
`button`	最小幅: 47ピクセル。デフォルト幅: 47ピクセル。高さ: 20ピクセル。

言語を変更する

Facebook JavaScript SDKのローカライズバージョンを読み込むことで、いいね！ボタンの言語を変更できます。en_USを自分のロケールに置き換えます。たとえば、フランス語(フランス)ならfr_FRにします。

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

使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。