いいね！ボタンを1回クリックすると、ウェブ上のコンテンツが「いいね！」され、Facebook上でシェアされます。さらに、いいね！ボタンの横にシェアボタンを表示しておけば、利用者が個人的なメッセージを追加したり、シェアする相手をカスタマイズしたりできます。
いいね！ボタン設定ツールコードの例設定言語の変更よくある質問いいね！ボタンで使用するウェブサイトかFacebookページのURLを選択します。
URLをコード設定ツールに貼り付けて、いいね！ボタンのwidthなどの設定を調整します。いいね！ボタンのコードを生成するには、Get Codeボタンをクリックします。
スニペットをコピーして、目的のウェブサイトのHTMLに貼り付けます。
アプリイベントのログ記録を有効にするコードがすでにある場合は、貼り付けたコードからautoLogAppEvents=1ステートメントを削除して、ログ記録の重複を防ぎます。
コードサンプルをコピーして自分のウェブサイトに貼り付けてください。data-hrefの値を自分のウェブサイトのURLに変更します。次に、og:***メタタグを使用して、リンクのプレビューを調整します。og:urlとdata-hrefには同じ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=v3.0"></script>
<!-- Your like button code -->
<div class="fb-like"
data-href="https://www.your-domain.com/your-page.html"
data-layout="standard"
data-action="like">
</div>
</body>
</html>リンクのプレビューをカスタマイズする上記の設定の他にも、次の設定を変更できます。
| 設定 | HTML5属性 | 説明 | デフォルト |
|---|---|---|---|
|
| ボタンに表示する動詞。 |
|
|
| プラグインが使用するカラースキームです。ボタンそのものではなく、その外側にあるテキストに適用されます。 |
|
|
| 「いいね！」の対象となるページの絶対URLです。 | 現在のURL。 |
|
| 自分のウェブサイトやオンラインサービス、またはサービスの一部が、13歳未満の子どもを対象としている場合は、この設定を有効にしなければなりません |
|
|
| プラグインに使用できるレイアウトの中から1つ選択します。 |
|
|
| リファーラルをトラッキングするためのラベル。文字数は50未満にする必要があります。英数字と一部の記号(現時点では+/=-.:_)を使用できます。詳細は、「FAQ (よくある質問)」をご覧ください。 | なし |
|
| シェアボタンをいいね！ボタンの横に表示するかどうかを指定します。この設定はXFBMLバージョンでのみ機能します。 |
|
|
| ボタンには |
|
|
| プラグインの幅(standardレイアウトのみ)。最小幅やデフォルト幅が設定されている場合は、それらの値が優先されます。詳細は、後述の「レイアウト設定」をご覧ください。 | 「レイアウト設定」の |
次のいずれかのレイアウトを使用できます。
| レイアウト | デフォルトサイズ |
|---|---|
| 最小幅:225ピクセル。 |
| 最小幅:55ピクセル。 |
| 最小幅:90ピクセル。 |
| 最小幅:47ピクセル。 |
Facebook JavaScript SDKのローカライズバージョンを読み込むことで、いいね！ボタンの言語を変更できます。SDKを読み込むときに、js.srcの値を変更して、自分のロケールが使用されるようにします。たとえば、フランス語(フランス)の場合は、ロケールのen_USをfr_FRに置き換えます。
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v7.0";
使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳しくは、「ローカライズと翻訳」ページをご覧ください。
