2012.09.24 [月] Facebook「Like Box」をカスタマイズした。
最終更新:-0001.11.30Webサイト制作Tips
【2013年4月8日追記】
外部からのCSSが効かない仕様になったようですので、fb.wallを使って対処しました。
「 それでも、Facebook「Like Box」をカスタマイズしたかった。」書きました。
【2013年2月20日追記】
いつの間にか、CSSが効くようになっていましたが、新たに修正が必要だったりしましたので、Facebook側で何かが変わったのでしょう(T_T)
【2013年1月30日追記】
最近、likeboxで検索してこのページに来られる人が多かったので何事かと思っていましたが、どうやらカスタマイズしたCSSが効いていないようで、仕様の変更か何かあったみたいです。解決策がみつかったら追記します。
Facebookが話題になり始めた頃、トライデントコンピュータ専門学校Webデザイン学科のFacebookページを制作しました。このウェブDeブログや学生のブログ、学科の話題などをまとめて紹介しています。
そして、Facebookページの記事を、ブログやWebサイトにプラグインとして配置できる「Like Box」を設置しています。設置の仕方は簡単で、「Like Box」のページに行って、必要事項を記入してCodeを発行します。HTML5, XFBML, IFRAME, URLから好きな形式を選んで、パーツを設置したい場所に貼り付けます。
ところが、設置は簡単なのですが、縦長になってしまうため見栄えがあまり良くありません。Borderの色など設定できるのですが、レイアウト、文字のサイズ・色、写真の配置などの細かい設定はありません。CSSで調整しようと試みましたが、<iframe>のため外から調整が効きません。ということで、下の図のように変更すべく、調べました。
参考サイト
◆Facebookの「Likebox」を自由にカスタマイズ（ウルトラエル）
◆Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法（かちびと.net）
1.まずは、FacebookページのIDを調べます。Webデザイン学科のFacebookページはURLが設定されているので、IDを調べる方法を探します。
◆FacebookページIDを簡単に確認する方法（HAPPY*TRAP）
http://graph.facebook.com/trident.webdesign
で確認できました。
2.APIキーを取得するため、Facebookアプリを新規で作成します。
https://developers.facebook.com/apps/
アプリの名前を決めて、
セキュリティチェックをすると、
App IDと書いてありますが、これがAPI Keyとなります。
3.表示したい場所にコードを埋め込み、ページID、（いいね！している人の）アイコンの表示数、記事の表示の有無（1で表示）、幅、高さを設定します。
<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="1" connections="アイコン表示数" width="幅" height="高さ" css="http://XXXXXX.com/XXXX/style.css?1"></fb:fan>
そして、効かせたいCSSファイルのURLパスを記入します。拡張子.cssの後ろの?1は、キャッシュが強いのでうまくCSSの変更ができないということで、更新ごとに数字を変えていきます。?1...2...3.....9と。※2桁は効きませんでした。
CSSのプロパティは、Firebugや要素の検証を使用して探して書き換えていきます。!importantもそんなに使いませんでした。
4.最後にこのコードを、HTMLの<body>のすぐ後ろに入れAPP IDを入れて完成。
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID入れる',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
「いいね！」を「Like!」など英語にしたい場合は、ja_JPをen_USに変えます。
もっと簡単にサクサク〜っと変更できると思っていたんですが、かなり手間取ってしまいました。
外部からのCSSが効かない仕様になったようですので、fb.wallを使って対処しました。
「 それでも、Facebook「Like Box」をカスタマイズしたかった。」書きました。
【2013年2月20日追記】
いつの間にか、CSSが効くようになっていましたが、新たに修正が必要だったりしましたので、Facebook側で何かが変わったのでしょう(T_T)
【2013年1月30日追記】
最近、likeboxで検索してこのページに来られる人が多かったので何事かと思っていましたが、どうやらカスタマイズしたCSSが効いていないようで、仕様の変更か何かあったみたいです。解決策がみつかったら追記します。
Facebookが話題になり始めた頃、トライデントコンピュータ専門学校Webデザイン学科のFacebookページを制作しました。このウェブDeブログや学生のブログ、学科の話題などをまとめて紹介しています。
そして、Facebookページの記事を、ブログやWebサイトにプラグインとして配置できる「Like Box」を設置しています。設置の仕方は簡単で、「Like Box」のページに行って、必要事項を記入してCodeを発行します。HTML5, XFBML, IFRAME, URLから好きな形式を選んで、パーツを設置したい場所に貼り付けます。
ところが、設置は簡単なのですが、縦長になってしまうため見栄えがあまり良くありません。Borderの色など設定できるのですが、レイアウト、文字のサイズ・色、写真の配置などの細かい設定はありません。CSSで調整しようと試みましたが、<iframe>のため外から調整が効きません。ということで、下の図のように変更すべく、調べました。
参考サイト
◆Facebookの「Likebox」を自由にカスタマイズ（ウルトラエル）
◆Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法（かちびと.net）
1.まずは、FacebookページのIDを調べます。Webデザイン学科のFacebookページはURLが設定されているので、IDを調べる方法を探します。
◆FacebookページIDを簡単に確認する方法（HAPPY*TRAP）
http://graph.facebook.com/[ユーザーネーム(ユニークURL)]ということなので、
http://graph.facebook.com/trident.webdesign
で確認できました。
2.APIキーを取得するため、Facebookアプリを新規で作成します。
https://developers.facebook.com/apps/
アプリの名前を決めて、
セキュリティチェックをすると、
App IDと書いてありますが、これがAPI Keyとなります。
3.表示したい場所にコードを埋め込み、ページID、（いいね！している人の）アイコンの表示数、記事の表示の有無（1で表示）、幅、高さを設定します。
<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="1" connections="アイコン表示数" width="幅" height="高さ" css="http://XXXXXX.com/XXXX/style.css?1"></fb:fan>
そして、効かせたいCSSファイルのURLパスを記入します。拡張子.cssの後ろの?1は、キャッシュが強いのでうまくCSSの変更ができないということで、更新ごとに数字を変えていきます。?1...2...3.....9と。※2桁は効きませんでした。
CSSのプロパティは、Firebugや要素の検証を使用して探して書き換えていきます。!importantもそんなに使いませんでした。
4.最後にこのコードを、HTMLの<body>のすぐ後ろに入れAPP IDを入れて完成。
<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID入れる',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
「いいね！」を「Like!」など英語にしたい場合は、ja_JPをen_USに変えます。
もっと簡単にサクサク〜っと変更できると思っていたんですが、かなり手間取ってしまいました。
