web-dev-qa-db-ja.com

ボックスのような流体？

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

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

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

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

responsive-designfacebook-likebox
19
gillesv

あなたはそれができないと思いましたか？ 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を再度解析します。タイムアウトとチェックを追加して、愚かなことを何もせず、必要なときにだけ実行されることを確認しました。

13
gillesv

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

/* 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;
}
38
Colin Johnston

OP以降、多くの変更がありました。

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

基本的に、FBはこれをiFrameに追加します。

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

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

<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/ ）

8
tukkajukka

私はFacebookLike BoxのHTML5バージョンを使用しましたが、これが私のために働いたものです：

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

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」が含まれていることに注意してください

2
bennash

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

2
DMCS

これは、HTML5 FacebookLikeBoxプラグインを応答の高さまたは幅で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>");
        });
1
Donald Derek