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 にすればシェアも同時に表示される。 ちなみに上述の関西弁を指定すると、通常日本語で「シェア」となるものが「わけわけ」に変化する。

このエントリーをはてなブックマークに追加