FacebookのLikeBoxのデザインをカスタマイズ
シェア
ツイートFacebookのLikeBoxをオリジナルデザインにカスタマイズする方法をメモ
1.APIキーを取得
まずは、APIキーを取得するために、Facebookアプリを新規で作成します。
取得には、
＞https://developers.facebook.com/apps/
こちらから、『新しいアプリを作成』ボタンを押し、
表示されるウインドウに従って、アプリ名の入力やセキュリティチェックをします。
そして作成されたアプリの
・アプリID / APIキー
○○○○○
・アプリのシークレットキー
○○○○○
という部分があると思うので、そのアプリID / APIキーの部分が必要となるAPIキーです。
2.FaceBookページIDの取得
次に、LikeBoxに表示させるフェイスブックページのページIDを取得します。
これは、
http://graph.facebook.com/[ユーザーネーム(ユニークURL)]
で調べることができます。
※詳しくはFacebookページIDを簡単に確認する方法
こちらのサイト様を参考にしてください。
3.サイトへの組み込み
あとは、表示させたい場所に
<div id="fb-root"></div> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("ここにAPIキー");</script> <fb:fan profile_id="ここにページID" stream="0" connections="12" width="220" height="500" css="ここにCSSまでのパス(http://www.○○○.com/css/style.css?1)"></fb:fan>
このソースの
・APIキー
・ページID
・CSSまでのパス
を入れればＯＫ。
stream=””は0がOFF 1がONです。
connections=””はLikeBoxに表示させるいいねを押してくれた人の顔の数です。
これでCSSをいじってオリジナルデザインにすることが可能ですが、
CSSを編集するために、iframeの中身を見ないといけないので、FirefoxのFirebugなどのアドオンを使いソースを確認しながらCSSを編集してください。
また、キャッシュが強力なのでCSSを編集して確認する際は、CSSまでのパスの末尾に?1～等をいれて確認してください。
最後に、
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'ここにアプリID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
このソースを記述すればＯＫ。
※フェイスブックのLikeBoxは、
個人ページでは使えず、フェイスブックページ(企業やお店のページ)でしか使えません。
フェイスブックページの作り方は、個人ページの一番下らへんに「ページ作成」というのがあるので、そちらをクリックし、あとは画面の指示に従っていけば作れます。
