2019年8月28日水曜日

Facebookのいいねボタンを設置する方法

こんばんは、こうちゃんです。

おそらくサイト作りをする方には大切な情報、
サイト上にFacebookのいいねボタンを設置する方法、です。

昨今SNSメディアの流行はすごいものがあり、個人のサイト・ブログを駆逐せんばかりの勢いです。
となると、必然的に個人のサイトなども生き残りをかけて、ある程度SNSなどとからめて流行らせていく必要もありまして、そんな技術のひとつに、サイトの中に、そのサイトへのSNSでの投票を意味する、いいねを送れるようにする、というものです。
その代表例が近年大流行のFacebookのいいねでして、ここではそれを可能にする、
ボタンの設置の技術的な解説を行います。

Facebookイイねボタン作成方法

必要なもの
facebookアカウント
facebookデベロッパーアカウント
facebookアプリID
(古いサイトだと誰でも作れるように書いてあるが、最近のバージョンは不特定多数が使えないように登録時にfacebookアプリIDが必要なように)

1.facebookにログイン

2.
https://developers.facebook.com/docs/plugins/like-button/?locale=ja_JP
にアクセス、まず右上メニュー、マイアプリから、新しいアプリを作成、を選択

3.この時点でデベロッパーアカウントを持ってないと、登録画面に、
facebookを持ってて、あとはいくつか規約に同意するだけでデベロッパーアカウント登録はすぐにできる

4.その後、新しいアプリ作成続行、
アプリ名を適当に、イイネAPP、とかつけて登録する

5.画面中央の、いいねボタン構成ツールで必要情報、対象URLや、幅、タイプなどを選択してコードを取得ボタン押下
ボタンのタイプは、
standard ボタンが表示され、横に文字で〇人がいいねしました の文字
box_count いいねボタンの上にいいねされた数表示
button_count いいねボタンの右にいいねされた数表示
button シンプルにいいねボタンだけ表示

6.画面に、プログラム用コードと、iframe用があるので、iframe用タブを押して、アプリIDを選択、のところで先ほど登録したアプリIDを選択して、下のコードをコピーして使う

7.コードでは対象URLが固定で決まってしまうのでサイトの中で使う際には、サイトのURLなどに合わせて変わるように変数等で動的に割り当て

これで、自身のサイトなどのページ中にいいねボタンを埋め込むことが可能になります。
よろしければ参考にしてぜひ埋め込みチャレンジしてみてください。


こうちゃん