フェイスブックのいいねボタン設置方法を解説しました。ついでにOGP設定も解説。とても重要なのでチェック!
facebookiineic

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

2012-02-27 (月) 16:00 | Facebook
このエントリーをはてなブックマークに追加

ソーシャルネットワークといえば、Facebookですね。
映画にもなってますしねw

今回は、フェイスブックの「いいね」ボタンの設置についてです!

その他記事:
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

この記事は参考になりましたか?
このエントリーをはてなブックマークに追加
よく読まれている記事です
似たような記事がありますよ
blog comments powered by Disqus

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

デブなWEB屋さんです!特に優れた能力があるわけではありませんがフリーで仕事をしています。意外とやれば出来るもんです!ただWEB仲間が少ないので友達になって下さい!ツイッター:@moreiic Google+:Google

フィード

Return to page top