どうも、マツケンです。

FacebookのLikeBoxをレスポンシブ対応させる方法を紹介します。

前回紹介した“LikeBoxを設置する方法”では、スマホから閲覧した場合に、LikeBoxが大きくはみ出した状態になります。

 

スマホユーザーが急激に増加しているため、サイト作成をする場合はPC表示のみならず、スマホ対策もきっちりとやっていきたいですね。

ということで、”LikeBoxのスマホ対策”の方法を画像付で解説します。

 

そして前回HTML5でコードを生成していたんですが、HTML5でコードを生成した場合、ワードプレスのテーマ設定で2ヵ所にコードを貼付けなければいけないので

めんどくさっ

と思ったので(笑)一発で終わらせるために、iframeでコードを生成したバージョンを紹介します。

簡単に導入できますので、画像通りに手を動かしてみましょう。(5分以内に完了できます）

①iframeでコードを生成

iflameで生成したコードをコピーします。

コードを貼付ける時に、赤枠内の”width:500px”を“width:100%”に変更する必要があります。

テーマ編＞単一記事の投稿(single.php)を開き、任意の場所にコード貼付けます。

「ファイルを更新」を忘れずに。

CSSにレスポンシブ対応コードをペースト

最後にCSSにコードを記述して終わりです。

RefineProの場合、custom.phpに記述します。(テンプレによります)

スタイルシートに以下のコードをペーストしてください。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

LikeBoxレスポンシブ対応まとめ

②width:100%に修正したコードをsingle.phpにペースト

③CSSにレスポンシブ対応させるコードをペースト

たったこれだけ。

 

レスポンシブ対応なんて、一見ハードルが高そうに思えますが、相当シンプルな作業で実現することができます。

今すぐやってみてください ^ ^

 

(2014/1/26追記)

CSSにレスポンシブのコードを記述すると、記事画面でソーシャルボタンの“いいね!”ボタンだけが表示されないという情報を頂きました。

解決方法は”➡LikeBoxのHTML5コードをレスポンシブ(横幅可変)対応させる方法”で紹介しています。HTML5のコードで生成したものを記述するだけなので、イージーです！

 

「後でやろう」と思っても、未来の自分がやってくれることはありません。

こういうのは今この瞬間にやるべきなんです。

たった５分なので、今からトライしてみてください!!

１.２..  続きを読む＞＞