ソーシャルプラグイン

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

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

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

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

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

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

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

すでにアプリイベントをログに記録している場合は、ログ記録の重複を避けるため、ボタンコードから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 (デフォルト)のいずれか1つを指定できます。

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

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

参考情報