久々の更新。
小笠原日記も書き終わってないｗ
まぁそれは後々書くとして、
日本でも普及してきたFacebookのファンページ作成と、LikeBoxをこのブログに設置してみた。
なんか色々嵌りましたが、結構簡単といえば簡単です。
その際参考にさせていただきましたページはこちら。
・FacebookのLike Boxをブログに設置してみよう！
作成のために必要なもの（確認しておく事）
・作成者のfacebookアカウント
・設置したい対象のファンページ
・ファンページのURL(注意:URLの末尾の?***** パラメータは全部削除しないとダメみたい?)
・iframe使える？（使えないのであれば、XFBMLでjavascriptだけでも埋め込める模様）
「ファンページを持ってないとダメ」これが一番最初に迷いました。
※単純に、facebookでシェア・イイネしてもらいたい（mixiチェックと同じじ）だけならば、別の方法をおすすめします。
→シェアボタン 作成 - google検索
→いいねボタン 作成 - google検索
実際の流れ
・facebook上でファンページを作成
まず、facebookのファンページ作成ページから、自分のブログのファンページを作成。
※自分は左下の「アーティスト、バンドまたは著名人」項目で作成しました。
※カテゴリはBusiness Person (笑)
※アルファベット入力だと頭文字を大文字にしてくれという入力エラーが出る模様。（日本語の場合は未確認）
・LilkeBoxの設定ページで作成
facebook - LikeBox設定ページ上で、項目に入力。
実際に入力した値は以下の通り。
→Facebook Page URL
＝ http://www.facebook.com/pages/Alfsuzukinomatome2/139057606156827 :ファンページのURLを入力（先に述べた注意事項参考）
→Width
= 250 :これから作成するLikeBoxの横幅
→Color Scheme
= light :LikeBoxの色合い。 2パターンしか無い。好きな方を。
→Show Faces
= チェックオン :イイネしてくれた人のアイコン表示on/off
→Stream
= チェックオフ :ファンページ更新情報を含むか含まないか。
→Header
= チェックオフ :LikeBoxヘッダーにfacebookの青いやつを表示するかしないか。
・コード取得
上記設定で下部の"Get Code"を押下。
この際、iframeとXFBMLのコードが表示されてますが、取り急ぎ取得はiframeバージョンで。
※XFBMLの方がfacebook連携で色々やるのであれば良いと思います。
で、取得できたコードがこちらなのですが、
自分の場合、縦幅が非常に気に食わなかったため、取得したコードを少し弄りました。
[取得データ]
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAlfsuzukinomatome2%2F139057606156827&width=250&colorscheme=light&show_faces=true&stream=false&header=false&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:62px;" allowTransparency="true"></iframe>
[いじった箇所]
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAlfsuzukinomatome2%2F139057606156827&width=250&colorscheme=light&show_faces=true&stream=false&header=false&height=300" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:300px;" allowTransparency="true"></iframe>
[実際の表示]
--------------------
facebookのSocialGraph使って色々出来そうだなーという事で、
また今度色々弄ってみようかなと。
過去記事：Facebook Social Graphに統合されてみた(meta tag入れたりしてみる)
