Facebook like boxをレスポンシブデザインにフィットさせる方法

更新


facebookのLike boxは「いいね」を増やしたいなら設置必須のソーシャルプラグインです。しかし、固定幅であるためレスポンシブデザインのサイトでは少々扱いづらいのです。そこで、CSSを細工して可変幅にしてみました。

とりあえず普通にLike Box作成

まず、Like Box作成ページに行きましょう。

Like Box – Facebook開発者

適宜入力して、Get Codeボタンを押します。

@web_shufuは最新投稿のストリームと、ヘッダーは省き、顔写真は入れる設定にしました。

    次に、指示に従って、<body>直後にJavaScript SDK、任意の場所にLikeboxのコードを貼り付けます。

    このままだとデザイン崩壊

    このままだと、画面やカラムの幅が狭いとき、Like boxが画面やカラムを突き破ってしまいます。

    スタイルのあて方

    そこで、スタイルをあてて、Like boxの幅が、画面やカラムの幅以内に収まるようにします。

    スタイルシートに以下のような記述を加えればいいです。

    div.fb-like-box,
    div.fb-like-box iframe[style],
    div.fb-like-box span {
    width: 100% !important;
    }
    

    すると、Like boxが画面やカラムの枠内にきちんと収まるようになります。

    Like Box は使っとくに越したことはない

    バズ部さんによれば「いいね」のうちかなりの部分がLike boxから行われています。

    使っとくに越したことはないですね。

    Special Thnaks

    以下の記事には大変お世話になりました。有難うございました。

    tips レスポンシブWebデザイン FacebookのLike Boxをリキッドレイアウトへ対応させる方法

    ≫ FacebookのLikeboxを可変レイアウトにして装飾する :: Creatorish

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です