FC2ブログにFacebookの『いいね！』ボタン（OGP設定済み＆ifram版）を設置する方法
FC2ブログに、OGP設定済みの、
『いいね！』ボタンを設置する方法（備忘録メモ）。
『いいね！』ボタンのifram版ソースコードも
サンプルとして、載っけました。
自分流に作りたい場合は、開発者登録後、
下記で、ボタンを作成し、
Like Button - Facebook開発者
URL部分を<%topentry_link>に変更すれば、
大丈夫なはず。
（開発者登録後に、ボタンを作れば、
自動的にアプリIDも付加されるはず。）
また、ウォールやニュースフィードに表示される、
画像は、プロフィール画像が表示されるように
メタタグ部分で指定してあります。
（Facebookの推奨画像サイズは200×200px）
参考ページさま
Facebookの「いいね！」ボタン作成ページの解説とFC2ブログへの設置方法
FC2ブログにFacebook用のOGPを設定
Facebook・Twitterなどソーシャルボタン設置方法まとめ
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」の活用術。
-----------------------------------------
ステップ1：Facebookに開発者登録する
-----------------------------------------
次のページから開発者登録をする。
自分の開発者アカウントを認証するにはどうすればよいですか。 - Facebook ヘルプセンター
余談）
私の場合、本人確認のために、
携帯（au）を使って、認証を行いました。
そしたら、メチャクチャ迷惑メールが届くようになりました。（苦笑）
だいたい1日に20件～30件。
心あたりは、これしかないんだけど、
どうなんでしょ？
-------------------------
ステップ2：環境設定
-------------------------
FC2ブログ管理画面、『環境設定』で、
・いいねボタンOFF
に、設定する。
（デフォルトはOFF）
-------------------------
ステップ3：ブログ登録
-------------------------
次のページにアクセスして、
基本設定 - Facebook開発者
・アプリを編集
・設定を編集
のどちらかをクリックして、
『いいね！』ボタンを設置するブログの、
ドメインを登録する。
App Domainsの部分にブログの『ドメイン』を登録する。
例）ningenshinkaron.blog.fc2.com
---------------------------------------
ステップ4：HTMLソースに書き加える
---------------------------------------
以下のように変更する。
■ネームスペース
HTMLソース<html>部分に、次を書き足す。
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"
■メタタグ
発行された『アプリID』を書き加えて、
次のメタタグを挿入する。
<meta property="og:title" content="<!--permanent_area--><!--topentry--><%topentry_title><!--/topentry--><!--/permanent_area--><!--index_area--><%blog_name><!--/index_area-->" />
<meta property="og:type" content="<!--index_area-->blog<!--/index_area--><!--permanent_area-->article<!--/permanent_area-->" />
<meta property="og:description" content="<!--index_area--><%introduction><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<meta property="og:url" content="<!--index_area--><%url><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_link><!--/topentry--><!--/permanent_area-->" />
<meta property="og:image" content="<%image>" />
<meta property="og:site_name" content="<%blog_name>" />
<meta property="fb:app_id" content="アプリID" />
■常に表示させる『いいね！』ボタン
常に、『いいね！』ボタンを表示させたい部分には、
次を挿入する。
※アプリIDを書き加えた上で
<!--topentry-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_link>&send=false&layout=button_count&width=105&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>
<!--/topentry-->
■個別記事にのみ表示させる『いいね！』ボタン
個別記事にのみ表示させたい『いいね！』ボタンは、
表示させたい部分に、次を挿入する。
※アプリIDを書き加えた上で
<!--permanent_area-->
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:105px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=<%topentry_link>&send=false&layout=button_count&width=105&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID"></iframe>
<!--/permanent_area-->
-------------------------
ステップ5：確認
-------------------------
デバッガーツールで確認する。
デバッガー - Facebook開発者
ツイート
『いいね！』ボタンを設置する方法（備忘録メモ）。
『いいね！』ボタンのifram版ソースコードも
サンプルとして、載っけました。
自分流に作りたい場合は、開発者登録後、
下記で、ボタンを作成し、
Like Button - Facebook開発者
URL部分を<%topentry_link>に変更すれば、
大丈夫なはず。
（開発者登録後に、ボタンを作れば、
自動的にアプリIDも付加されるはず。）
また、ウォールやニュースフィードに表示される、
画像は、プロフィール画像が表示されるように
メタタグ部分で指定してあります。
（Facebookの推奨画像サイズは200×200px）
参考ページさま
Facebookの「いいね！」ボタン作成ページの解説とFC2ブログへの設置方法
FC2ブログにFacebook用のOGPを設定
Facebook・Twitterなどソーシャルボタン設置方法まとめ
＜遂に公開＞SEOの2倍のアクセスを稼ぐFacebook「OGP」の活用術。
-----------------------------------------
ステップ1：Facebookに開発者登録する
-----------------------------------------
次のページから開発者登録をする。
自分の開発者アカウントを認証するにはどうすればよいですか。 - Facebook ヘルプセンター
余談）
私の場合、本人確認のために、
携帯（au）を使って、認証を行いました。
そしたら、メチャクチャ迷惑メールが届くようになりました。（苦笑）
だいたい1日に20件～30件。
心あたりは、これしかないんだけど、
どうなんでしょ？
-------------------------
ステップ2：環境設定
-------------------------
FC2ブログ管理画面、『環境設定』で、
・いいねボタンOFF
に、設定する。
（デフォルトはOFF）
-------------------------
ステップ3：ブログ登録
-------------------------
次のページにアクセスして、
基本設定 - Facebook開発者
・アプリを編集
・設定を編集
のどちらかをクリックして、
『いいね！』ボタンを設置するブログの、
ドメインを登録する。
App Domainsの部分にブログの『ドメイン』を登録する。
例）ningenshinkaron.blog.fc2.com
---------------------------------------
ステップ4：HTMLソースに書き加える
---------------------------------------
以下のように変更する。
■ネームスペース
HTMLソース<html>部分に、次を書き足す。
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"
■メタタグ
発行された『アプリID』を書き加えて、
次のメタタグを挿入する。
<meta property="og:title" content="<!--permanent_area--><!--topentry--><%topentry_title><!--/topentry--><!--/permanent_area--><!--index_area--><%blog_name><!--/index_area-->" />
<meta property="og:type" content="<!--index_area-->blog<!--/index_area--><!--permanent_area-->article<!--/permanent_area-->" />
<meta property="og:description" content="<!--index_area--><%introduction><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<meta property="og:url" content="<!--index_area--><%url><!--/index_area--><!--permanent_area--><!--topentry--><%topentry_link><!--/topentry--><!--/permanent_area-->" />
<meta property="og:image" content="<%image>" />
<meta property="og:site_name" content="<%blog_name>" />
<meta property="fb:app_id" content="アプリID" />
■常に表示させる『いいね！』ボタン
常に、『いいね！』ボタンを表示させたい部分には、
次を挿入する。
※アプリIDを書き加えた上で
<!--topentry-->
<iframe src="http://www.facebook.com/plugins/like.php?href=<%topentry_link>&send=false&layout=button_count&width=105&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>
<!--/topentry-->
■個別記事にのみ表示させる『いいね！』ボタン
個別記事にのみ表示させたい『いいね！』ボタンは、
表示させたい部分に、次を挿入する。
※アプリIDを書き加えた上で
<!--permanent_area-->
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:105px; height:21px;" src="http://www.facebook.com/plugins/like.php?href=<%topentry_link>&send=false&layout=button_count&width=105&show_faces=false&action=like&colorscheme=light&font&height=21&appId=アプリID"></iframe>
<!--/permanent_area-->
-------------------------
ステップ5：確認
-------------------------
デバッガーツールで確認する。
デバッガー - Facebook開発者
- 同じカテゴリの記事
-
- いいね！（iframe版）はGoogleアナリティクスで計測できない (2012-07/21)
- Gmailの迷惑メールフォルダの場所 (2012-06/09)
- レターを修正したら、審査部宛にメールで報告する必要がある（インフォトップ） (2012-04/09)
- Amazonギフト券の残高を確認する方法 (2012-03/09)
- Facebookで自分のウォールを見る方法。ツイートはここに表示される。 (2011-10/21)
- ロボフォームデータを簡単に引っ越す方法 (2011-10/21)
- posted: 13:47
- トラックバック(0)
- コメント(0)
- Page Top
Comment
Page Top