FacebookのLikeboxを設置してほしいっていう依頼、たまにあります。
こういうやつ↓
これ、Facebook developerページで作成するんですが、
作成するときに、widthとheightを入れますよね。
だから当然、横幅と縦幅が固定になりますよね。
すると、レスポンシブサイト制作で、スマホでみたときには、崩れる(はみでる)ことになります。
例えば横幅700pxでlikeboxを作ったときに、 スマホで見ても700pxなので、横がぶちぬかれて飛び出してしまいます。
それを解消するcssがこちらのサイトで紹介されてました。
http://mbdb.jp/hacks/facebook/likebox-responsive-customize-css.html
これに少しだけ追加して
レスポンシブ用にまとめましたので、手順を書きます。
①Like boxはHTML5で作る
Developerページで、横幅やら縦幅やらをPC用に設定して、GET CODEボタンを押すと、
以下みたいなウィンドウが出てきます。(201310現在)
上の方でHTML5とかIFRAMEとか選べます。
これをHTML5にします。
ソースが2つに分かれて出てきますが、気にするこたーない。
両方ともそのまま続けてコピペして、サイトで表示したいところに貼ります。
②スクリプトをdivで囲む。
cssで整形したいから、言われなくても囲むと思いますけど
こんな風にします。
HTML
③そしてスマホが読み込む用のCSSでwidth100%を指定する
CSS
↑コピペでOK
呼び出される中身のいろんなやつらにwidth:100%を指定します。
上記のcssは、スマホで読み込む用のcssなので、一番外側を
でかこってます。
スマホでみたときにlikeboxの横幅が縮んで100%になりますが、heightはそのままで、中身が全部表示されないので、臨機応変に、height:250pxとか高さしていして調整します。
(ここは結構ざっくりで、ランドスケープモードにしたり、アンドロイドなどのいろんなサイズの端末でみたときに、若干高さが余ったり足りなかったりしますけど。。)
ところでLikeboxってマーケティング的に集客効果あるんですかね??
効果出たって話を僕は聞いたことがないんですけども。
こういうやつ↓
これ、Facebook developerページで作成するんですが、
作成するときに、widthとheightを入れますよね。
だから当然、横幅と縦幅が固定になりますよね。
すると、レスポンシブサイト制作で、スマホでみたときには、崩れる(はみでる)ことになります。
例えば横幅700pxでlikeboxを作ったときに、 スマホで見ても700pxなので、横がぶちぬかれて飛び出してしまいます。
それを解消するcssがこちらのサイトで紹介されてました。
http://mbdb.jp/hacks/facebook/likebox-responsive-customize-css.html
これに少しだけ追加して
レスポンシブ用にまとめましたので、手順を書きます。
①Like boxはHTML5で作る
Developerページで、横幅やら縦幅やらをPC用に設定して、GET CODEボタンを押すと、
以下みたいなウィンドウが出てきます。(201310現在)
上の方でHTML5とかIFRAMEとか選べます。
これをHTML5にします。
ソースが2つに分かれて出てきますが、気にするこたーない。
両方ともそのまま続けてコピペして、サイトで表示したいところに貼ります。
②スクリプトをdivで囲む。
cssで整形したいから、言われなくても囲むと思いますけど
こんな風にします。
HTML
<div id="facebookLikeBox">
ここにコピペしたスクリプトを貼る
</div>
③そしてスマホが読み込む用のCSSでwidth100%を指定する
CSS
#facebookLikeBox{margin:0 10px;}#facebookLikeBox .fbcomments,#facebookLikeBox .fb_iframe_widget,#facebookLikeBox .fb_iframe_widget[style],#facebookLikeBox .fb_iframe_widget iframe[style],#facebookLikeBox .fbcomments iframe[style],#facebookLikeBox .fb_iframe_widget span{width: 100% !important;height:250px !important;}
↑コピペでOK
呼び出される中身のいろんなやつらにwidth:100%を指定します。
上記のcssは、スマホで読み込む用のcssなので、一番外側を
@media screen and (max-width: 640px) {ホニャーラー}
でかこってます。
スマホでみたときにlikeboxの横幅が縮んで100%になりますが、heightはそのままで、中身が全部表示されないので、臨機応変に、height:250pxとか高さしていして調整します。
(ここは結構ざっくりで、ランドスケープモードにしたり、アンドロイドなどのいろんなサイズの端末でみたときに、若干高さが余ったり足りなかったりしますけど。。)
ところでLikeboxってマーケティング的に集客効果あるんですかね??
効果出たって話を僕は聞いたことがないんですけども。