いいね！ボタンをブログ（Blogger）に追加する方法

先日の記事で『Like Box』（いいね！ボックス）を作成してブログに貼る方法をご紹介しましたが、今回は同じソーシャルプラグインである『Like Button』（いいね！ボタン）についてです。

どちらも名前は似てますが、いいね！の対象が異なります。
『いいね！ボックス』→お持ちのFacebookページへのいいね！
『いいね！ボタン』→ボタンを設置したサイトや記事へのいいね！

Webサイトをお持ちの方ならぜひ利用したいソーシャルボタンの一つです。
今回は、Facebookのソーシャルプラグインで最も利用者が多いと思われる『いいね！ボタン』の作成方法をご紹介します。

まずは下記のリンク先へ移動します。
https://developers.facebook.com/docs/reference/plugins/like/


『Facebook developers』の『Like Button』作成ページに移動しました。
ページの中ほどに『Configurator』とありますので、そちらで『いいね！ボタン』の作成ができます。

ボタンのサイズなどの情報入力していくと、その下にあるプレビューに作成状況が表示され、最後に左下の『Get Code』をクリックするとコードが表示される仕組みです。



















作成するボタンの情報を入力していきます。

『URL to Like』→ボタンを取り付けたいWebサイトのURLを入力します。
『Layout Style』→『standard』、『button count』、『box count』の３つのタイプから選ぶことができます。実際にプレビューで確認しながらやるといいと思います。
『Color Scheme』→『Light』、『Black』から選べます。
『Width』→ボタンの幅を決めます。
『Font』→６種類のフォントから選べます。
『Verb to display』→ボタンの表示方法を『like』（いいね！）、『recommend』（おすすめ）の２種類から選択できます。表示が異なるだけです。お好みでどうぞ。
『Send Button』→サイトのリンクを最大20人まで送ることができます。メッセージ、グループ、またはメールアドレスへも送ることができます。
『Show faces』→いいね！をしてくれたユーザーのプロフィール画像が表示されます。

※色々変更が面倒だ、という方は、ボタンのスタイルだけ変更して、後はコード作成しても良いと思います。

最後に左下にある『Get Code』をクリックします。

あとはこのコードをお持ちのサイトに貼り付けれるだけです。

【ブログへの貼り付け補足１】
ここから先は、フェイスブックとは直接関係ありませんが、私のようにBloggerブログに貼り付ける場合は、ガジェットを使って簡単にブログに設置することができます。
以下の流れでボタンを表示させることができます。

（コードはIFRAMEを選択）
レイアウト→貼り付けたい場所の『ガジェットを追加』をクリック→HTML/JavaScriptを選択→コードを貼り付けて保存


【ブログへの貼り付け補足２】

いいね！ボタンだけでなく、Twitterなど他のボタンも利用したい方は、『忍者おまとめボタン』のように、他ソーシャルボタンを一度にまとめて設置できるサイトもあります。とっても便利ですよ。
『忍者おまとめボタン』