ウェブのいいね!ボタン

As Meta’s developer platform continues to evolve, we're making strategic decisions to focus on tools and features that deliver the most value to developers and businesses. Today, we're announcing that two Facebook Social Plugins - the Facebook Like button and the Facebook Comment button - will be discontinued on February 10, 2026.

This change reflects our commitment to maintaining a modern, efficient platform that serves developers' current needs while enabling us to invest in future innovations. The plugins that will be discontinued reflect an earlier era of web development, and their usage has naturally declined as the digital landscape has evolved.

On February 10, 2026 the plugins will gracefully degrade by rendering as a 0x0 pixel (i.e., an invisible element) rather than causing errors or breaking your website functionality. This change is intended to only remove the plugin content from your site and should not otherwise impact your website's functionality.

For more information, please see the blog and FAQ about this change.

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

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

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

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

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

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

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

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

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

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

href
Width
layout
action
size

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_countbuttonbox_countのいずれかを指定できます。詳細は、よくある質問をご覧ください。

data-lazy

trueを指定すると、loading="lazy" iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。trueまたはfalse (デフォルト)を指定できます。

data-ref

リファーラルをトラッキングするためのラベル。文字数は50未満にする必要があります。英数字と一部の記号(現時点では+/=-.:_)を使用できます。詳細は、よくある質問をご覧ください。

data-share

いいね! ボタンの横にシェアボタンを表示するかどうかを、trueまたはfalse (デフォルト)で指定します。この設定はXFBMLバージョンでのみ機能します。

data-size

ボタンのサイズにはlargesmall (デフォルト)の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} />"; 

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

AltStyle によって変換されたページ (->オリジナル) /