どうもマツケンです。

LikeBoxのレスポンシブ対応させる方法(その②)について解説してます。

前回紹介したLikeBoxのiframeコードをレスポンシブ(横幅可変)対応させる方法なんですが

Facebookの“いいね!”ボタンが消えてしまうということだったので、今回はその解決策を紹介します。

 

コメントを頂くまで、”いいね!”ボタンが消えてることに気付いてませんでした。
(どうもすいませんでした。。。)

「Facebookのいいねボタンは別にいらんし」という方は、
iframeのままでもOKだと思います。

LikeBoxの設置方法については　⬅こちらを参照してください。

手順は3つ

①LikeBoxコードを”HTML5″で生成

②コードをsingle.phpにペースト(2箇所)

③CSSにレスポンシブ対応コードを記述

①HTML5でコードを生成

HTML5でコードを生成した場合は、
2ヵ所(single.php)にコードを貼付けなければいけません。

メモ帳などに、コードをコピーしておきましょう。

②single.phpにペースト

①のコードをbodyタグ直下にペースト。

②のコードを任意の場所にペースト。

このページでは、記事本文下に設置しています。

 

定型文
ソーシャルボタン
LikeBox

の順番になっています。

 

最後に”ファイルの更新”を忘れずに。

CSSにレスポンシブ対応コードを記述

CSSに以下のコードをペーストしてください。

(テンプレRefineProの場合は、custom.phpに記述)

 

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

テレビ観ながらでも5分あれば終わりますので、試してみてください。

 

以上

LikeBoxレスポンシブ対応＋”いいね!”ボタン表示の解決方法でした。

コメント頂きました＊ゆり＊さん、ヘブラカエラさんありがとうございました!