facebookiineic

いいねボタン(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ぷろめしの場合

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

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

Facebookでいいねされると

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

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

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

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

 
これもチェックしてみては?
よく検索されてる記事
新しい記事
シームレスパターンフリー素材サイト
シームレスな背景素材サイトがスゴい!フリーでホントに使える6サイトをご紹介
windows7印刷スプーラサービスが実行されていませんプリンタの共有印刷が出来ない
プリンターの印刷スプーラ サービスが実行されていませんと表示されて印刷や共有プリンターを追加できない
Fatal-error-Call-to-undefined-function未定義の関数
Fatal error: Call to undefined functionというエラーが発生する原因について
リストの2行目以降を一文字下げたいインデントしたい
CSSのリストタグで2行目以降を一文字だけ下げる方法もちろんPタグなどにも適応可能
ツイッターカードの設定
ツイッターカードの設定方法とドメイン承認!簡単に設定できるのに意外と訴求力は高い