FacebookのLikeboxを設置してほしいっていう依頼、たまにあります。

こういうやつ↓
24

これ、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現在)

01

上の方で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ってマーケティング的に集客効果あるんですかね??

効果出たって話を僕は聞いたことがないんですけども。