ソーシャルプラグイン

ウェブのいいね！ボタン

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

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

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

  • 欧州連合 (EU): オーストリア、ベルギー、ブルガリア、クロアチア、キプロス共和国、チェコ共和国、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、ハンガリー、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルク、マルタ、オランダ、ポーランド、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン

  • EU加盟国ではないが、EEAのみ/EFTA、または関税同盟国: [EEA のみ/EFTA] アイスランド、リヒテンシュタイン、ノルウェー、スイス [EU 関税同盟] すべてのチャンネル諸島、マン島、モナコ、キプロスのイギリス主権基地領域。[欧州関税同盟] アンドラ、サンマリノ、バチカン市国

  • EU 加盟国ではないが、欧州最外部地域(OMR)に属する地域: マルティニーク、マヨット、グアドループ、フランス領ギアナ、レユニオン、サンマルタン、マディラ、アゾレス諸島、カナリア諸島
  • 英国 (全ブリテン諸島)

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

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

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

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

「いいね！」するURL
Width
レイアウト
アクションタイプ
ボタンサイズ
コードを取得

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}" 
        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} />";

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

参考情報