ちびと.netかちびと.netFacebookページをアピール出来るソーシャルプラグイン・Likebox(いいね!ボックス)をオリジナルデザインに変更する方法をご紹介します。簡単に出来るのでぜひトライしてみてください。ThisWeb制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。humans.txtをご覧下さい。様々なサイトやブログでソーシャルプラグインの定番のLikeboxを見かけるようになりました。最近知ったのですが、このLikeboxはデザインを変更する事が出来るようなので、今日はその方法をご紹介致します。LikeboxはFacebookページのPRとして用いられる、定番のソーシャルプラグインなので、デザインの変更方法は知っておいても損は無いかなと思います。Likeboxって何?という方でもおそらく以下のようなコンテンツをどこかで目にはしてると思います。Likeboxのデザインをカスタマイズするこんな感じでデザインを変更しました。しても既存のLikeboxでは浮いてしまう・・とお悩みの方はトライしてみては如何でしょう。Likeboxを表示させるコードを用意するデザインをカスタマイズしたい場合はFacebookより発行されるコードとは別のコードを使用します。ここに、APIキーや、ID、カスタマイズ用に用意するcssのパスなどを含めていけばデザインを変更することが出来ます。AppでAPIキーを取得します。type=&quot;text/javascript&quot;&gt;FB.init(&quot;APIキー&quot;);&lt;/script&gt;のFB.init(“”)内にペーストします。FacebookページのIDを調べるIDを調べます。通常はURLの最後にid=***とありますが、独自のURLに変更してる場合は、上図のように「基本データを編集」に進めばIDが分かります。profile_id=”"内にペーストします。あとは、表示するアイコンの数や幅をWebサイトに合わせて決めてください。cssを作成するcssを作成しようにも、セレクタなどが分からないと作れませんので、Likeboxのソースを確認します。ChromeならF12でデベロッパーツールが起動します。FirefoxならFirebug等をご利用ください。IEならこれを機会にブラウザを乗り換えて下sLikeboxのソースを見るとiframeにsrc=”"が指定されていますのでそのパスを開けばセレクタ等を確認出来ます。作成したcssのパスを挿入するcssが出来たらLikeboxを表示するコード内に含めます。&gt;&lt;/fb:fan&gt;ここのcss=”"の中にURLを入れてください。ものすごく強いキャッシュで、仮にソースを変更しても全く反映されません。このキャッシュ対策としてexample.css?1という具合に、「?1」を加えてあげるといいそうです。それでもダメなら別のファイル名で。知らずにちょっと苦労しました・・・これでLikeboxのデザインのカスタマイズが出来たはずです。当サイト下部に適当にカスタマイズしたLikeboxを表示させていますので宜しければ御覧ください。暇を見てもう少し変更を加えていこうかと思います。以下のページが大変参考になりました。FacebookのLikebox(いいね!ボックス)を結構カスタマイズしちゃいたい。PM変更をしたいと思っていたので、参考になりました。ありがとうございます。他の記事についてもたびたび、参考にさせていただいてます。PMおお、何よりですー!デザイン変えられると配置しやすいですよね。いつも大変参考にさせてもらっています!なんかFacebookの仕様変更があったみたいで、記述の追加をしないといけなくなったみたいです。私は下記のサイトをご参考にさせていただきました。http://www.ultra-l.net/note/2011/07/facebooklixebox.phpよく仕様変更になっちゃうの困りますよね。MONODEZWeb制作に役立つそうなリソースを独断と好みで配信しています。ちびと.netにリンクの無いトラックバックはお受けいていません。コメントされる前にガイドラインをご覧下さい。