Tweet

Facebook Like（いいね！）ボタンの設置と仕様

自分のサイトにFacebookのいいね！ボタンを設置する手順について解説する。

まず、Facebookの公式ジェネレーター「 いいね！ボタン - ソーシャルプラグイン 」にアクセスし、必要な項目を入力し、［コードを取得］ボタンをクリックする。

その後、以下のような2種類のコード（HTMLタグ）が得られる。

Step 1

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>

Step 2

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div>

Step 1は必要なJavaScriptのロード。 Step 2のタグを貼った箇所に実際にいいね！ボタンが表示される。

以前は「いいね！するURL」を空欄にしても問題なかったが、2020年現在、「入力されたhrefは、有効なURLとして認識されていません。」というエラーが出てコードが取得できなくなっている。 これを回避するため、ここではとりあえずデフォルトまたは適当なURLを指定しておく。

コード取得後、サイトにボタンを設置する際にdata-href属性を全て省いて貼り付けると、従来のように自動的に現在のURLに置き換わるようになっている。

各属性の仕様

href

属性：data-href。 ボタンを設置するページのURLを指定する。 この属性を省いた場合、いいね！ボタンが表示されているページのURLが自動的に設定される。 その際、data-href="" のように空ではなく、属性ごと消す。

layout

属性：data-layout。 ボタンの種類。 standard、box_count、button_count、button がある。

show_faces

属性：data-show-faces。 プロフィール写真を表示する。 true（表示）と false（非表示）がある。

width

属性：data-width。 表示領域の横幅。 ピクセルで指定する。

action

属性：data-action。 ボタンに表示される言葉。 like（いいね！）と recommend（おすすめ）がある。

share

属性：data-share。 シェアボタンも表示する。 true（表示）と false（非表示）がある。

colorscheme

属性：data-colorscheme。 ボタンの色。 light と dark がある。

言語の仕様

「いいね！」や「おすすめ」の文字を日本語以外に変更したい場合は、Step 1の<script>タグ中にある以下の箇所を書き換える。

src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"

日本語は「ja_JP」、英語（米国）は「en_US」、ドイツ語は「de_DE」、フランス語は「fr_FR」、中国語は「zh_CN」、韓国語は「ko_KR」など、言語コードと国名コードの組み合わせで指定できる。 英語の場合は「Like」や「Recommend」と表示される。

また、「ja_KS」を指定すると関西弁に変更できる。

src="https://connect.facebook.net/ja_KS/sdk.js#xfbml=1&version=v6.0"

関西弁は「いいね！」が「ええやん！」、「おすすめ」が「これええで！」に置き換わる。 なぜかビックリマークが付く。

また、シェアボタンは以前個別に設置できたが、その後「いいね！」と統合された。 前述のジェネレーターで作成できる。 統合されたため、各属性も共通。 data-share 属性を true にすればシェアも同時に表示される。 ちなみに上述の関西弁を指定すると、通常日本語で「シェア」となるものが「わけわけ」に変化する。