ウェブページにアクセスしたユーザーがいいね!ボタンをクリックすると、アプリイベントがトリガーされ、その「いいね!」のログがFacebookに記録されます。
ウェブページに挿入するいいね!ボタンのコードを取得するには、いいね!ボタン設定ツールを使用します。
すでにアプリイベントをログに記録している場合は、ログ記録の重複を避けるため、ボタンコードから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属性 | 説明 |
---|---|
| ボタンに表示する動詞。 |
| プラグインが使用するカラースキーム。ボタンそのものではなく、その外側のテキストに適用されます。 |
| 「いいね!」の対象となるページのURL。 |
| ウェブサイト、オンラインサービス、またはサービスの一部が13歳未満の子どもを対象としている場合は、この属性を |
| プラグインに使用できるレイアウトの中から1つ選択します。 |
|
|
| リファーラルをトラッキングするためのラベル。文字数は50未満にする必要があります。英数字と一部の記号(現時点では+/=-.:_)を使用できます。詳細は、よくある質問をご覧ください。 |
| いいね!ボタンの横にシェアボタンを表示するかどうかを、 |
| ボタンのサイズには |
| プラグインの幅(standardレイアウトのみ)。最小幅とデフォルト幅が設定されている場合は、それらの値が優先されます。詳細は、「レイアウト設定」の表をご覧ください。 |
レイアウト設定は任意です。
レイアウト | デフォルトサイズ |
---|---|
| 最小幅:225ピクセル。 |
| 最小幅:55ピクセル。 |
| 最小幅:90ピクセル。 |
| 最小幅:47ピクセル。 |
Facebook JavaScript SDKのローカライズバージョンを読み込むことで、いいね!ボタンの言語を変更できます。たとえば、フランス語(フランス)に変更するには、ロケールのen_US
をfr_FR
に置き換えます。
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version={graph-api-version} />";
使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。