• かちびと.net

    Facebookページをアピール出来るソーシャルプラグイン・Likebox(いいね!ボックス)をオリジナルデザインに変更する方法をご紹介します。割と簡単に出来るのでぜひトライしてみてください。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Facebookページをアピール出来るソーシャルプラグイン・Likebox(いいね!ボックス)をオリジナルデザインに変更する方法

スポンサーリンク

Facebookページもかなり普及したようで、
様々なサイトやブログでソーシャルプラグ
インの定番のLikeboxを見かけるように
なりました。最近知ったのですが、この
Likeboxはデザインを変更する事が出来る
ようなので、今日はその方法をご紹介致
します。

特にLikeboxはFacebookページのPRとして用いられる、定番のソーシャルプラグインなので、デザインの変更方法は知っておいても損は無いかなと思います。

Likeboxって何?という方でもおそらく以下のようなコンテンツをどこかで目にはしてると思います。

Likeboxのデザインをカスタマイズする


こんな感じでデザインを変更しました。どうしても既存のLikeboxでは浮いてしまう・・とお悩みの方はトライしてみては如何でしょう。

ではチュートリアルです。

Step.1 / Likeboxを表示させるコードを用意する

デザインをカスタマイズしたい場合はFacebookより発行されるコードとは別のコードを使用します。

<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="FacebookページのID" connections="表示アイコン数" width="690" height="320" css="cssのパス" ></fb:fan> 

ここに、APIキーや、ID、カスタマイズ用に用意するcssのパスなどを含めていけばデザインを変更することが出来ます。

では手順です。

Step.2 / APIキーを取得


Create an AppでAPIキーを取得します。サイト名とURLを入力し、ヒューマンチェックをすれば上記のような画面に移動しますので「アプリの秘訣」っていう意味不な名前のコードをコピーして、

<script type="text/javascript">FB.init("APIキー");</script>

のFB.init(“”)内にペーストします。

Step.3 / FacebookページのIDを調べる


IDを調べます。通常はURLの最後にid=***とありますが、独自のURLに変更してる場合は、上図のように「基本データを編集」に進めばIDが分かります。
IDをコピーして

<fb:fan profile_id="FacebookページのID" connections="表示アイコン数" width="690" height="320" css="cssのパス" ></fb:fan> 

profile_id=”"内にペーストします。

あとは、表示するアイコンの数や幅をWebサイトに合わせて決めてください。次はcssです。

Step.4 / cssを作成する


cssを作成しようにも、セレクタなどが分からないと作れませんので、Likeboxのソースを確認します。ChromeならF12でデベロッパーツールが起動します。FirefoxならFirebug等をご利用ください。IEならこれを機会にブラウザを乗り換えて下s

Likeboxのソースを見るとiframeにsrc=”"が指定されていますのでそのパスを開けばセレクタ等を確認出来ます。

Final step / 作成したcssのパスを挿入する

cssが出来たらLikeboxを表示するコード内に含めます。

<fb:fan profile_id="FacebookページのID" connections="表示アイコン数" width="690" height="320" css="cssのパス" ></fb:fan>

ここのcss=”"の中にURLを入れてください。

ただ、ものすごく強いキャッシュで、仮にソースを変更しても全く反映されません。このキャッシュ対策としてexample.css?1という具合に、「?1」を加えてあげるといいそうです。それでもダメなら別のファイル名で。知らずにちょっと苦労しました・・・

これでLikeboxのデザインのカスタマイズが出来たはずです。当サイト下部に適当にカスタマイズしたLikeboxを表示させていますので宜しければ御覧ください。暇を見てもう少し変更を加えていこうかと思います。

以下のページが大変参考になりました。感謝です。

FacebookのLikebox(いいね!ボックス)を結構カスタマイズしちゃいたい。
(via:Webディレクター・ハラヒロシのブログ)

URL :
TRB :

Comments & Trackbacks (8)

  1. imura__man

    変更をしたいと思っていたので、参考になりました。ありがとうございます。
    他の記事についてもたびたび、参考にさせていただいてます。

    • シロ

      おお、何よりですー!デザイン変えられると配置しやすいですよね。他の記事も有難う御座いますー!

  2. yuka

    こんにちは。いつも大変参考にさせてもらっています!
    なんかFacebookの仕様変更があったみたいで、記述の追加をしないといけなくなったみたいです。

    私は下記のサイトをご参考にさせていただきました。
    http://www.ultra-l.net/note/2011/07/facebooklixebox.php

    よく仕様変更になっちゃうの困りますよね。。。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services