長野市のWebサイト制作会社 デザインスタジオ・エルWeb事業部「ウルトラエル」

「超えるをつくる」ための、公私同一学びの記録。
Webディレクター・ハラヒロシのブログ

2011.07.25

Facebookの「Likebox」を自由にカスタマイズ

こちらの記事で紹介しているカスタマイズ方法ですが、Facebook側の仕様変更のためか、表示されたりされなかったりを繰り返す不安定な状態です。現在は利用できていないようです。当記事ご参照の際はお気をつけください。

---

【2013年2月6日追記】
1月25日から表示がきかなくなっていましたが、再度表示されるようになりました。仕様変更の情報など追っているわけではありませんので今後どうなるかわかりませんが...。

【2013年1月25日追記】
2013年1月25日の朝から表示が効かなくなりました...。Facebook仕様変わったのかもしれません。(明確な情報持っていません)
現在、当該記事で紹介しているTipsが適用されない状態になっておりますのであしからずご了承ください。解決法が見つかればいいのですが...。

---------------ここから本文---------------

Facebookの「Likebox」は、ソーシャルプラグインページで簡単にソースを取得して自分のサイトに貼付けたりできる便利な機能ですが、提供しているパラメータの設定の範囲でしか変更ができず、デザインも「light」か「dark」かが選べるだけです。 このサイトでも、フッターにLikeboxを配置してみたものの、配色が微妙だなぁなんとかしたいなぁと思っていたところ、下記の記事を見つけてカスタマイズに挑戦してみました。

url FacebookのLikebox(いいね!ボックス)を結構カスタマイズしちゃいたい。 (wald-grun/blog)
url How To Add a Custom Facebook Like Box to Your Site

そこそこ手順を踏まないといけないのですが、これをやれば手持ちのCSSで設定できるので、プラグインページではできなかったような、背景の色を変えたり、画像入れたり、サムネールのサイズを変えたりできて一度覚えたら重宝するかもです。

【1】FacebookページのIDを調べておく
(例:ウルトラエルFacebookページの場合)
https://www.facebook.com/UltraL.net/182165358470028

【2】APIキーの取得
使用するサイトのドメインを正確に入力する必要があります。
http://developers.facebook.com/setup/

【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" connections="アイコン表示数" width="" height="高さ"></fb:fan>

【4】CSSのURLをパラメータとして追加
css="http://XXXXXX.com/XXXX/style.css?1"
CSSはフルパスです。ドメインはAPIキーを取得する際に登録したドメインと同一でなければいけません。

<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" connections="アイコン表示数" width="" height="高さ" css="http://XXXXXX.com/XXXX/style.css?1"></fb:fan>

※CSSを変更して確認する場合、Facebookのキャッシュが残ってしまうため、「?1」の数字の部分を変更しながら確認します。

----

【2012年7月17日追記】
おや?表示部分の仕様かわった??対処方法を探してみたら、以下の記事で解決策が。

url FeatureLoader.js.phpの仕様変更?と対策 | Archiveproducts : Webデザインや広告写真のご相談は是非アーカイブプロダクツへ

▼というわけで最新のコードはこちら。stream="0"のパラメータが追加されています。

<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="アイコン表示数" width="" height="高さ" css="http://XXXXXX.com/XXXX/style.css?1"></fb:fan>

----

【2012年7月19日追記】
あら、IEで表示されてない...。

下記記事「Loading」部分を参照して対処したら直りました。記述不足だったようです。
url JavaScript SDK : Facebook開発者向けドキュメントの日本語訳とTips

というわけで、下記記述も必要っぽいです。

<script src="http://connect.facebook.net/en_US/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>

Facebook twitter このエントリーをはてなブックマークに追加

電子書籍版 マンガ「Webクリエイター・ウルトラエル」マンガ「Webクリエイター・ウルトラエル」
ITが発展した下界に下りてきた忍者・ウルトラエルが持ち前の忍術・戦術・記憶術を駆使しながら、一人前のWebクリエイターを目指して奮闘します。
※Vol.01~Vol.10をまとめ読みできます(すべて無料です)
「ブクログのパブー」で公開していますので是非ごらんください。

Webディレクター・ハラヒロシ

ABOUT

デザインスタジオ・エルWeb事業部のWebディレクター・ハラヒロシの仕事の肥やしブログ。アンテナを360度張り巡らせて、なるべく年間360回更新します。
詳細プロフィールはこちら

twitter Feedly Facebook Instagram Pinterest Amazon

ARCHIVES

過去記事一覧

SEARCH


ウルトラエル