いいねボタン(Facebook)の設置方法についてのまとめ 主要SNSサイトのソーシャルボタン-その3

フェイスブックのいいねボタン設置方法を解説しました。ついでにOGP設定も解説。とても重要なのでチェック!
2012年02月27日
 
  • このエントリーをはてなブックマークに追加

ソーシャルネットワークといえば、Facebookですね。
今回は、フェイスブックの「いいね」ボタンの設置についてです!

その他記事:
Google+1ボタン設置方法の記事はこちらから
Twitterツイートボタンの設置の方法記事はこちらから

作成ページがあります!

いいねボタンの作成ページがあります。そちらに移動して下さい。

Like Button(いいねボタン)
https://developers.facebook.com/docs/reference/plugins/like/

上から順に内容を説明しましょう!

URL to Like:いいねして欲しいURLを設定
Send Button (XFBML Only) :送るボタンの表示設定
Layout Style:ボタンのデザイン(ボタンのみボタン&数字・バルーン型)
Width:サイズ調整。ボタンの種類によって最低サイズがあります。
Show Faces:いいねしてくれた人の顔表示設定
Verb to display:likeはいいね・recommendはおすすめ
Color Scheme:背景の色設定
Font:日本語なら設定不要

設定が完了したら「Get Code」でソースをコピーして下さい。

上の枠のコードはボタンを表示するページに1つだけで大丈夫です。
もしフェイスブックページやフェイスブックにログインしてボタンを作ると
赤で塗りつぶされている部分にappIdという数字が入ります。無くてもOKです。

下の枠のソースをボタンを表示させたいところに埋め込みましょう!

これで設定完了です!

特に他に無いのでOGPについて

OGPとは、サイトの概要を示すメタコードです。
いいねボタンを作った下に作成フォームがありますが・・・あえて自分で作りますw

<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="サイトのタイプ"><!--article(記事)/blog(ブログ)/website(ウェブサイト) どれかでいいと思います。-->
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="OGP用のアイコン。正方形がいいかも。サイズは適切に">
<meta property="og:site_name" content="サイトタイトル">
<meta property="og:description" content="ページの概要説明" />

上記のOGPをヘッダーに紛れ込ませといて下さい。
うまく設定できているかを確認するためには下記のページをご活用下さい。

デバッガー
https://developers.facebook.com/tools/debug

その他、ページのURLの取得方法とか分かんねぇよ!っていう人はこちらを
参考にされて下さい。http://www.promeshi.com/archives/376

ぷろめしでデバックすると上記のようになります。
アイコンが表示されていますが、「いいね」されるとその画像が表示されます。

上にエラーが出ていることに気づいたあなた!下記を参照して下さい。
フェイスブック用にOGPの設定してたら修正が必要な[いいね!]ボタンの警告?

もし、画像を設定していないと適当な画像を表示しますので設定していて損はしないでしょう!

最重要項目です!必読お願いします!!

Facebookのお友達いません。ぷろめしの「いいね」も増えません。

お願いします!m(_ _)m
https://www.facebook.com/masanori.kaku

 
最新情報をお届けします
こちらもオススメの記事です
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事
新しい記事
cssで要素を上下左右中央寄せにする方法
png画像をイラストレーターに配置すると背景に白が入ってしまい透過されない場合の対処方法
フェイスブックの友達リストを非表示(非公開)にする方法
フェイスブックのOGPにエラー発生 Circular redirect path detected (see ‘Redirect Path̵
Google検索へのインデックを加速するPubSubHubbubをワードプレスに導入&使い方