スポンサードリンク

ホームページ設置のFacebookコメント/Facebook LikeBoxの幅を常に100%にする方法

ホームページ設置のFacebookコメント/Facebook LikeBoxの幅を常に100%にする方法
設置したFacebookの機能の幅がはみ出してきちんと表示できない。

Facebookのいいね!ボタンやコメント機能をホームページに追加する事が出来ます。
パソコンやタブレット、スマートフォンによって幅が変化するレスポンシブのデザインを採用していると、横幅をホームページの幅に合わせて100%にし、きちんと表示した方が、閲覧者にとって親切です。

Facebook Like Boxと設置例
Facebookページへのいいね!を増やす事ができます。
設置方法はこちら(英語)

Facebookの Like Boxの設置例

Facebook Commentsの設置例
記事にコメントをしてもらうことで、閲覧者とのコミュニケーションが活発になります。
設置方法はこちら(英語)

Facebook Commentこのように、枠いっぱいに設置できるとダイナミックです。
既存の設置画面を見ると、幅を100%と指定しても、横いっぱいに設置することはできません。
そこで、CSSを使い、きれいに設置できるようにします。

CSSでFacebookの設置を横幅100%に

こちらをお使いのCSSファイルに追加すると、設定できます。高さも横幅に合わせ自動的に調整されます。
他にバッティングする設定がない事を確認してください。

Facebook Like BoxへCSS適用

Facebook CommentsへCSS適用

まとめ

閲覧者の殆どが、スマートフォンやタブレット端末からのアクセスである事が多くなってきています。
パソコンだけできちんと表示されているだけでは、モバイルでの閲覧者には、不十分である場合があります。ソーシャルサービスとの連携は現在必須ですので、このような機能をできるだけ多くの端末で、きちんと表示されるようにする事は、非常に大切となっています。もしわからない事がありましたらお問い合わせください。

Pocket
LinkedIn にシェア


スポンサードリンク