Facebookの「いいね!」のコメント欄が見切れるバグを解決する方法

小林

小林

皆様、平素は当ブログの記事に対してドッカンドッカン「いいね!」を押して頂き、誠にありがとうございます。

さて、昨今は「いいね!」を押下した際に、コメントも同時に投稿できるようなスタイルのものが散見されますが、しばしば下記の様な現象が見受けられます。それは、

「いいね!」した際に表示されるコメント欄が途切れる

というものです。Just like this! まずはこちらの画像をご覧頂きたい

holy shit!なんでこんなことになるかと言いますと、

javascriptにより生成されるコメント欄(iframe)が、その中身のコンテンツの量に応じて高さを指定しようとするものの、なにかしらの原因で失敗している。

ここで大事なのは「なにかしら」です。きっと隣に全裸の男が座っている所為なんでしょう。

では、この問題に直面した場合、我々はどうすればいいんでしょうか?
しばらく途方に暮れていたところを、見るに見かねたのか隣の全裸の男がこんな言葉をかけてくれました。

『チョモランマ。なんつって。』

それを聞いて僕はハッとしました。

『そうか。「いいね!」した際のcallbackで、生成されたiframeの高さを強制的に変更すればいいんじゃないか!?』

調べてみたところ「いいね!」のcallbackはiframeが生成された後に実行される模様です。
そこでこんなコードを書きました。

FB.Event.subscribe( //Facebookのイベントにコールバック関数をフックできます。
    'edge.create', //いいね!された時のイベント
    function(response) {
        //jQueryを利用して生成されるiframeエレメントをセレクト
	$(".fb_edge_comment_widget > span,
           .fb_edge_comment_widget > span iframe")
	    .css("height",500);
            //高さの変更(今回は500にしてますが、OGPの設定によると思われます。)
    }
);

という訳で、全裸の男のおかげで無事にこの問題を解決?することができました。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL