responsive-design - ボックスのような流体？

Question

レスポンシブサイトを作成しているので、クライアントのFacebookファンページ用にFacebookLike-Boxを含める必要があります。like-boxの開発者ページにはカスタマイズ用のウィジェットがありますが、幅をパーセンテージで設定することはできません。

私が検索したところ、最も近いのは2010年のこのページで、カスタムCSSをリンクできるfb：fanウィジェットを参照しています。このチュートリアルを機能させようとしましたが、次のエラーで失敗します。

<fb:fan> requires one of the "id" or "name" attributes.

したがって、要約すると、流動的に設定できる、または生成するiFrameにカスタムCSSを渡すことができるFacebookLikeBoxが必要です。私を正しい方向に向けることができる人はいますか？

score 38 · Accepted Answer

私は今日この要点を見つけました、そしてそれは完全に機能します：https ://gist.github.com/2571173

/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */

/* This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. */

#fb-root {
  display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

score 13 · Accepted Answer

あなたはそれができないと思いましたか？AHA！Facebookとあなたの邪悪な固定幅の方法をあなたに持ってください：私はあなたのすべての悪を元に戻すためにJQueryスクリプトを書きました！

$(document).ready(function(){   
    var fbWidth;

    function attachFluidLikeBox(){
        // the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
        var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();

        // the containing element in which the Likebox resides
        var container = $('#likebox');  

        // we should only redraw if the width of the container has changed
        if(fbWidth != container.width()){
            container.empty(); // we remove any previously generated markup

            fbWidth = container.width(); // store the width for later comparison

            fbml = fbml.split('WIDTH').join(fbWidth.toString());    // insert correct width in pixels

            container.html(fbml);   // insert the FBML inside the container

            try{
                FB.XFBML.parse();   // parses all FBML in the DOM.
            }catch(err){
                // should Facebook's API crap out - wouldn't be the first time
            }
        }
    }

    var resizeTimeout;

    // Resize event handler
    function onResize(){
        if(resizeTimeout){
            clearTimeout(resizeTimeout);
        }

        resizeTimeout = setTimeout(attachFluidLikeBox, 200);    // performance: we don't want to redraw/recalculate as the user is dragging the window
    }

    // Resize listener
    $(window).resize(onResize);

    // first time we trigger the event manually
    onResize();
});

これは、ウィンドウのサイズ変更イベントにリスナーを追加することです。サイズが変更されると、Likeboxの包含要素の幅を確認し、正しい幅の新しいXFBMLコードを生成し、包含要素の子を上記のXFBMLに置き換えてから、FacebookAPIをトリガーしてXFBMLを再度解析します。いくつかのタイムアウトとチェックを追加して、愚かなことを何も行わず、必要なときにのみ実行されることを確認しました。

score 10 · Accepted Answer

OP以来多くの変化がありました。

iFrame幅を選択してに設定するだけ100%で、FB Like Boxレスポンシブになります。

基本的にこれを：FBに追加しますiFrame

style="border:none; overflow:hidden; width:100%; height:300px;".

score 8 · Accepted Answer

まったく同じ問題に苦しんでいます。すばやく簡単な解決策は、iframeベースのFacebookLikeボックスを使用することです。

<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=500&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

割り当てられた「fb-like-box」クラスと削除されたすべてのインラインスタイルに注意してください。iframeのクラスは次のようになります。

.fb-like-box {
  width: 100% !important;
  height:500px;
  border:none; 
  overflow:hidden;
}

iframeのsrcタグで定義されている高さと幅は関係ないようです。CSSグリッドレイアウトのセルのような流動的な要素にiframeを配置するだけです。

（http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/からのアイデアを含む）

score 3 · Accepted Answer

私はFacebookLikeBoxのHTML5バージョンを使用しましたが、これが私にとってうまくいったものです。

.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width:100% !important;
}

score 2 · Accepted Answer

いいねボックスをピクセル幅以外に設定することはできません。私の提案は、オーバーフローが非表示に設定された流動的なDIVまたはSPANに配置することです。確かに、それは同様のボックスの一部を切り落とすでしょうが、流体の要件を持つことによって、これはあなたの最善の策です。

score 2 · Accepted Answer

HTML5FacebookLikeBoxプラグインを応答の高さまたは幅でDOMに追加する小さな回避策を次に示します。

$(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("<div class='fb-like-box' 
                                         data-href='"+page_url+"' 
                                         data-width='"+widget_width+"' 
                                         data-height='"+widget_height+"' 
                                         data-colorscheme='dark' 
                                         data-show-faces='true' 
                                         data-border-color='#222' 
                                         data-stream='true' 
                                         data-header='true'>
            </div></div>");
        });

score 2 · Accepted Answer

iframeに100％を使用することについてのEdとMatthiasからの上記のコメントは、私にとって非常にうまくいきました。これが私のiframeコードです

修正なしのオリジナル：

<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp;
width&amp;height=290&amp;colorscheme=dark&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;" 
allowTransparency="true"></iframe>

100％修正で更新：

<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp;
width&amp;height=290&amp;colorscheme=dark&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;width:100%" 
allowTransparency="true"></iframe>

唯一の変更は、iframeのスタイル属性に「width：100％」を追加することです

上記のコードでは、一意の参照の代わりに「XXXXXXXXXX」が含まれていることに注意してください

responsive-design - ボックスのような流体？

8 に答える 8

Related

Reference