Facebookいいねボタンの設置方法
サイト作成に役立つ、ページ中にFacebookのいいねボタンを設置する方法の解説まとめです。
Facebookのいいねボタンの効用
おそらくサイト作りをする方には大切な情報、サイト上にFacebookのいいねボタンを設置する方法の解説です。
昨今SNSメディアの流行はすごいものがあり、個人のサイト・ブログを駆逐せんばかりの勢いです。
となると、必然的に個人のサイトなども生き残りをかけて、ある程度SNSなどとからめて流行らせていく必要もありまして、そんな技術のひとつに、サイトの中に、そのサイトへのSNSでの投票を意味する、いいねを送れるようにする、というものです。
その代表例が近年大流行のFacebookのいいねでして、ここではそれを可能にする、
ボタンの設置の技術的な解説を行います。
必要なものとしては、
・facebookアカウント
・facebookデベロッパーアカウント
・facebookアプリID
などです。これらは無料ですぐに作成できますので、現段階では持っていなくても構いません。
※古いサイトだと誰でも作れるように書いてあるが、最近のバージョンは不特定多数が使えないように登録時にfacebookアプリIDが必要なように
Facebookにログイン
Facebook上の機能を使いますので、まずは公式サイトにログインしておく必要があります。
なお、この時点でFacebookのアカウントをお持ちでない場合は、次のリンクを参考に、アカウントの方、作成しておいてください。
その後にログイン、次項の作業に続いてください。
Facebookの使い方の基本から有効利用方法まで - NAVER まとめ
アプリ作成
いいね！ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook
こちらが具体的にいいねボタンを作成する作業サイトになります。
こちらにアクセス、まず右上メニュー、マイアプリから、新しいアプリを作成、を選択。
この時点でデベロッパーアカウントを持ってないと、登録画面になりますが、
Facebookを持ってて、あとはいくつか規約に同意するだけでデベロッパーアカウント登録はすぐにできます。
デベロッパーアカウントを作成しましたら、新しいアプリ作成続行、
アプリ名を適当に、イイネAPP、とかつけて登録する
いいねボタン構成ツールでボタン作成
画面中央の、いいねボタン構成ツールで必要情報、対象URLや、幅、タイプなどを選択してコードを取得ボタン押下
作成できるボタンのタイプは、
standard ボタンが表示され、横に文字で〇人がいいねしました の文字
box_count いいねボタンの上にいいねされた数表示
button_count いいねボタンの右にいいねされた数表示
button シンプルにいいねボタンだけ表示
があります。
画面に、プログラム用コードと、iframe用があるので、iframe用タブを押して、アプリIDを選択、のところで先ほど登録したアプリIDを選択して、下のコードをコピーして使う
サイトに設置して使用
コードでは対象URLが固定で決まってしまうので、もしもポータルサイトやまとめサイトの中などで使う場合でURLの違う多数のページに配置したい時には、サイトのURLなどに合わせて変わるように変数等で動的に割り当てることで対応します。
これで、自身のサイトなどのページ中にいいねボタンを埋め込むことが可能になります。
よろしければ参考にしてぜひ埋め込みチャレンジしてみてください。
Facebookとは
Facebook（フェイスブック、FB）は、アメリカ合衆国カリフォルニア州メンローパークに本社を置くFacebook, Inc.が運営する世界最大のソーシャル・ネットワーキング・サービス（SNS）である。
9億人以上が参加している世界最大のSNS（2012年4月現在）。実名参加が必須のため、友人・知人が見つけやすい。テキストや写真の投稿、メッセージの交換、施設への「チェックイン」など、多彩な機能が用意されている。
出典 Facebook - Wikipedia
参考
WEBエンジニア奮闘記: Facebookのいいねボタンを設置する方法
