Facebook: Facepile のキレイな描画方法

6524 ワード
Facebook JavaScript JavaScript テキストリンク

Facebook connectをしているサイトで、”友達のxxxさん他10人が使っています。”
こんな感じです。
http://pinqa.com/topics/5303

というような、機能であるFacepile。

実際にviewに描画しようとすると、FB独自のローディングが出てきたりして、何かと使いづらいので、キレイに描画出来るようにしました。

下記のコードを利用すると、、、
1: FB独自のローディングが出て来ないので、不要な幅によるデザイン崩れを防げる
2: 利用している友達が0人の場合は、何も表示されずにデザイン崩れを防げる

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=アプリケーションID&amp;xfbml=1"></script>
<div id="js_facepile" class="facepile_container" style="display:none">
    <fb:facepile size="medium" max_rows="6"></fb:facepile>
</div>

$(function(){

  var _timerID; 
  var _height;
  var _width = 1200;
  var count = 0;
  var $face = $("#js_facepile");

  StartTimer();

  function TimeDo() 
  { 

    count ++;
    _height = $face.find("span").height();

    if(_height > 70){
      clearInterval(_timerID); 
        $face.find("span").css("width",_width);
        $face.find("iframe").css("width",_width);
        $("#facepile_login_btn").css("bottom","8px").css("right","8px");
      $face_css.css("height","56px");
        $face.show();
    }else if(_height < 70){
      clearInterval(_timerID); 
    }    

    if(count == 100){
      clearInterval(_timerID); 
    }

  } 

  function StartTimer() 
  { 
      _timerID = setInterval(TimeDo, 100); 
  } 

});

ちなみに、上記のソースコードでは、webkitのみの対応がされます。
ロジック的には、Facebookから返ってくるifameのheightを使って分岐しています。
FB側で検索結果が返ってくると、iframe内のheightの高さが変わります。しかし、この高さの変更が、ブラウザごとに変わるので、カスタマイズした分岐が必要になります。

他のブラウザの対応も知りたい方は、コメントに書いてください！！

macにnvmが遭遇したピットを取り付ける
詳しくはC++11中ratioコンパイル期間点数(一)