web-dev-qa-db-ja.com

Facebookのソーシャルプラグインに流動的な幅を設定することはできますか？

「レスポンシブデザイン」の概念を中心にサイトを開発していますが、facebookのソーシャルプラグインは静的な幅であり、サイズを変更するとレイアウトが「壊れる」。

メディアクエリを使用して、低解像度のブラウザー（モバイルなど）で非表示になるようにプラグインを設定しました。ただし、デスクトップブラウザーでは、ブラウザーウィンドウのサイズを小さく変更しても、プラグインを非表示にするほど小さくない場合、レイアウトから抜け出します。

Facebookソーシャルプラグインの流動的な幅を設定する方法はありますか？

facebook-social-pluginsresponsive-design
72
Chaddeus

正しい答えは、私がここで見つけたものの組み合わせです。 Mikelの答えは良い出発点です。

Facebook Developers Platformリンク

これは言う：

これを修正しました。今後は、幅を100％（例：data-width = "100％"）に指定して、流動的なレイアウトを取得できます。ドキュメントも更新されます。 https://developers.facebook.com/docs/plugins/comments お待ちいただき、ありがとうございます。

しかし...これは、ロード時にプラグインが利用できる幅をロードします。ページのサイズを変更すると、ページをロードしたときと同じ幅のままになります。これを修正し、Facebook Socialプラグインの真のレスポンシブバージョンを作成するには、CSSに以下を追加します。

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

これにより、プラグインは、ウィンドウのサイズを変更するときに使用可能なスペースにサイズ変更されます。

このコードをページプラグインで機能させるには、クラス名「fb-comments」を「fb-page」に変更します。

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

（Black_Stormyを追加してくれてありがとう！）

35
patrick

これらの方法はいずれも機能しませんでしたが、このアイデアを使用すると、次のことがうまくいきました：

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}
62
Jubair

私はcssを使用して解決策を見つけました。この記事からインスピレーションを得ました http://css-tricks.com/2708-override-inline-styles-with-css/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
56
Alan

私はこのコードを使用してそれを機能させることができました：

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

}

私のHTMLファイルにこれがあるので：

<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>

ヒント：divクラスに応じてcssを変更する必要があります。

9
Sergiu Octavian

これは古い質問ですが、これは「facebook comment plugin responsive」のGoogleでの最高の結果であるため、依然として関連しています。

他の回答の回避策は、FBが最近（2014年5月）終わりに修正したため、もう必要ありません。

https://developers.facebook.com/x/bugs/256568534516879/ から：

これを修正しました。今後は、幅を100％（例：data-width = "100％"）に指定して、流動的なレイアウトを取得できます。ドキュメントも更新されます。 https://developers.facebook.com/docs/plugins/comments お待ちいただき、ありがとうございます。

したがって、HTMLを例えば.

<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>

また、追加のCSS回避策は必要ありません。

編集：これにより、プラグインが作成され、ロード時に使用可能なスペースに幅が調整されます。ブラウザウィンドウのサイズを変更すると、プラグインはその初期幅のままになります。真のレスポンシブにするには、これをCSSに追加します。

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

これにより、ブラウザのサイズを変更するときにプラグインが現在使用可能なスペースに適応します

7
mikel

.fb-comments spanをスタイルに追加する場合にのみ機能します。

.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
5
Abdul Shakoor Kakar

公式のwordpress facebookプラグインを使用している場合は、モバイルスニッフィングfacebookが必要です。

モバイルデバイスのユーザーエージェントが検出されると、モバイルバージョンが自動的に表示されます。 mobileパラメーターをfalseに設定すると、この動作をオフにできます。注：モバイル版では幅のパラメーターが無視され、ポートレート/ランドスケープの切り替え状況で適切にサイズを変更するために、代わりに100％の流動的な幅があります。この動作を利用するには、モバイルサイトのCSSを調整する必要がある場合があります。必要に応じて、コンテナ要素を介して幅を制御できます。 http://developers.facebook.com/docs/reference/plugins/comments/

35行目でfacebook/social-plugins/fb-comments.phpを変更する必要があります。

<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>

これにより、以下でスタイルを設定できます。

.fb-social-plugin {
    width:98%!important;

}

.fb_iframe_widget span {
    width:100%!important;
}

.fb-comments iframe[style] {width: 100% !important;}

モバイルバージョンを修正するか、プラグインのGUIに設定を追加できると便利です。

5
jnowland

受け入れられた答えは私にはうまくいきませんでした。

私はこれをクレイグ・ベイリーのコメントで見つけました：

http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress

これは完全に流動的です（osx ffおよびsafari、ios6でテスト済み）。

.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
4
danwild

この投稿はあまり古くないように見えますが、答えは私にとってはうまくいきませんでした。これをスタイルシートに追加する必要がありました...

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

.fb_iframe_widgetと.fb_iframe_widget [style]は両方とも重要であると思われました。

3
arnonate

Activity Feed または Like Box などのFacebookプラグインにHTML5コードを使用することを好む人向け：

/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .fb_iframe_widget span[style], .fb_ltr[style] {
    width:420px !important;
    }
}
  • コメントやパーセンテージベースの幅では機能しません。純粋な流動性が必要な場合は、iframeコードに固執します。
  • H/T to Alan このページの上部にあるcss-tricksリンクの場合。 （：
2
phpwns

このサイズ変更に関する重要な注意事項：Facebookコメントスクリプトは、モバイルデバイス上にいることを検出すると、これを破ります。ただし、<fb:comments>タグには属性値が含まれますmobile="false"その後（今のところ）FacebookのスクリプトはあなたのCSSを尊重します。

2
murdaugh

これをCSSファイルまたはスタイルタグ付きのhtmlコードのいずれかに配置するだけです。

<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe     span[style]{width: 100% !important;}
</style>

参照： http://dwij.co.in/making-facebook-comments-responsive

2
Web Developer in Pune

この単純なスクリプトを使用してこれを機能させました（リンクのコードを参照）。

https://Gist.github.com/2111366

FacebookアプリIDとページURLを使用するために、情報をいくつか変更する必要があります。

このソリューションではjQueryを使用しているため、その仕組みを理解する必要がありますが、レスポンシブデザインを実行するスクリプトを取得すると、ページの読み込み時またはページのサイズ変更時に機能します。

2
Steve Eldridge

2015年9月の時点で、この問題に対する私自身の解決策を知らされていない大衆に参加させる：

Facebookはfb-pageウィジェットにadapt-container-widthというオプションを提供します。これは（ docs に従って）親の幅（最大500pxまで）を追跡する必要があります。 FB.XFBML.parse()で再レンダリングすると、実際のウィジェット自体に設定したものにもかかわらず、ウィジェットは親のコンテナ幅の奇妙な値に引っかかっているように見えます。今のところ、これは十分に機能します：

  1. FBのコードジェネレーターを使用して要素を作成します（ このページ の上部）
  2. イベントをwindowのresizeメソッドにバインドします（必要に応じて、_.debounceを使用して、中間リクエストでブラウザーが過負荷にならないように、適切な制限を設定します

  3. Facebookがより多くのウィジェットAPIを公開するのを待ってください。

    <div class="fb-page"
    data-adapt-container-width="false" <!-- This bit's the important part -->
    data-href="https://www.facebook.com/yourpage"
    data-show-posts="true"
    data-small-header="true"
    data-width="100%"
>
    <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote>
    </div>
</div>

次のjavascriptと組み合わせて：

    // FB Resize
    $(window).bind('resize', _.debounce(function() {

        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            var el = $('.fb-page');
            var width = el.parent().width();
            el.attr('data-width', width);

            FB.XFBML.parse();
        }
    }, 1000)); // Debounce until 1000ms have passed
2
blast_hardcheese

コメントについては知りませんが、リンクボックスを使用すると、Facebookから直接iframeオプションを使用し、ピクセル単位の幅をパーセンテージで切り替えるだけで、幅に応じて変更できますそれが入っている列。

1
Solomon Kleinsmith

これはJQueryであり、質問への回答の一部である可能性があります。 「いいね」ボタンのHTML5バージョンを使用しています。

<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>

「div.main-content」要素は、「いいね」ボタンが私のデザインに収まらなければならない要素です。サイズ変更は、divが非常に小さくなるまで機能するため、div.fbライクのdata-layout属性を「標準」からより少ない水平スペースを使用する代替に変更する必要があります。私はこれが初めてなので、これが「いいね」ボタンの応答性を高める最もエレガントなソリューションであるかどうかはわかりません。私は、この問題に関する専門家である誰かからのこの質問への答えを見たいです。

$(window).resize(function() {
  var computed_width = $('div.main-content').width();    
  $('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height:  24px; width: ' + computed_width + 'px');
});
1
Brian McFann

応答幅と読み込みイメージを使用したjQueryを使用した完全な例を次に示します。 AlanとJubairのCSSコードは、コード内でコメント化されています。

これはAndroid webviewで問題なく動作します

<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
    .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
        width: 100%;/* !important; To get the control with JQuery*/
    }
</style>

<body>
    <div id="fb-root"></div>
    <script>
       window.fbAsyncInit = function() {
        FB.init({
                appId   : 'APP_ID',
                channelUrl : '//domain.com/channelUrl.php',
                status  : true, 
                cookie  : true,
                xfbml   : true
            });

        //Event fired when the plugin has been completely loaded
        FB.Event.subscribe('xfbml.render',
            function(response) {
                //alert('You liked the URL: ' + response);
                var w = (typeof window.innerWidth != 'undefined')?
                           window.innerWidth
                        :(typeof document.documentElement != 'undefined'
                         && typeof document.documentElement.clientWidth !=
                         'undefined' && document.documentElement.clientWidth != 0) ?
                           document.documentElement.clientWidth
                        : document.getElementsByTagName('body')[0].clientWidth;

                w *= .950; //95% for best fit on mobile screens
                //RESIZE
                $(".fb-comments").css("width",w);
                $(".fb-comments > span").css("width",w);
                //Some days ago the next line would be sufficient                       
                $(".fb_ltr").css("width",w);
                //Now the modify of the span width is necessary to do the work

                $("#div_loading_gif").remove();



            }
        );

      };

      //cargando SDK Asíncronamente
      (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
      }(document));



    </script>

    <div id="div_loading_gif" style="width:100%;  height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >

    </div>

    <!--Usando jquery modificar el style de el div de clase fb_ltr
    cambiar el ancho por el de la pantalla-->
    <div class="fb-comments"
        style="padding:0 auto;"
        data-href="http://domain.com/comments.html" 
        data-width="100px" 
        data-num-posts="5"
        data-mobile="false"
        >
    </div>



</body>
1
Chrifer7

Inspect要素を使用して、生成されているコードを確認します。 Wordpress Facebookプラグインのように、異なる「ID」を使用し、使用されているIDを見つけたら追加します

 #fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}

これは、常に学習のトリックを行うわけではありません。色とサイズを変更して応答性を高めることは、まだ非常にバグがあります。それはパーセンテージを好まないようであり、それが入っているボックスのサイズが見えないので、これは機能していません。ブラウザウィンドウのサイズに応じて、@ mediaクエリを実行してサイズを変更することをいじっています。

幅を認識できればいいのですが、@ mediaが唯一の方法のようです。

1
Joel

Facebookは、コメントプラグインから出力されたマークアップにいくつかの変更を加えました。 HTML5バージョンを使用しています。上記で共有されたものからこの修正されたCSSはトリックを行いました。

.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
1
Joshua Pekera

正規表現を使用して幅のみを書き換え、残りのスタイルタグはそのままにしておくため、出力マークアップの変更後も持続するjqueryを次に示します。

＃footer-lastの例を置き換えて、正しいコンテナIDまたはセレクタを指定する必要があります。 iframeは、コンテナの幅の変更に基づいてサイズが変更されます。コンテナはレスポンシブとして設定する必要があります。

// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
1
Aaron Klump

これは、HTML5 Facebook LikeBoxプラグインを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

これを試してみたところ、<div>は固定幅のiframe内にあります。つまり、流動的にするにはjavascriptでstyleタグを実際に削除する必要があります。

編集：JSでiframeコンテンツにアクセスできないのは、それが別のドメインから来ているためです

0
blues_driven

これは私のために働く

/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
    display: inline !important;
}

.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width: 100% !important;
}
0
Ahmad Ajmi

これは私のために働く：

 $('.fb-comments').attr('data-width', '100%');
0
krishna kinnera

それがどのように機能するのか：このdata-width = "100％"を追加するだけです。例を次に示します。

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
0
ukando

クラス「fb-container」を使用して、facebookのようなボックス（または他のソーシャルプラグイン、ユニバーサルに動作する）を配置する空のdivを作成し、次のjQueryを追加します。

$(document).ready(function(){
    $('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});

p.s。PARENT DIVをコメントボックスとWWW.YOURSITEHERE.COMをサイトに一致させる他の要素に置き換えることができます

0
pashOCONNOR

ここに私が終わったものがあります：

(function() {
    window.addEventListener('load', updateWidth);
    window.addEventListener('resize', debounce(function () {
        updateWidth();
        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            FB.XFBML.parse();
        }
    }, 1000));

    function updateWidth() {
        $('.fb-like, .fb-comments').each(function () {
            var el = $(this);
            var width = el.parent().width();
            el.attr('data-width', width);
        })
    }

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
})();
0
karser

小さなjQueryを使用して動作し、ページの読み込み時とウィンドウのサイズ変更時に "data-width"属性を設定しました。すべてのCSSアプローチで遭遇した問題は、コメントとボタンの一部がコンテナのマージンの外側に隠れているか、オーバーフローしていたことです。

これが私の0.02ドルです。また、＃divセレクターを、コンテナdivなどのコメントボックスに一致させるものに設定するだけです。

jQuery（document）.ready（function（）{

//check for device width and reformat facebook comments
function fbCommentWidth() {
    jQuery('.fb-comments').attr('data-width',jQuery('#content').width());

}
//run on resize, and reparse FB comments box    
jQuery(window).on('resize',function() {
    fbCommentWidth();
    FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();

}）;

0
Wade Sonenberg

おもう max-widthはこの場合widthよりも優れており、私にとってはうまくいきます：

.fb-comments, .fb-comments iframe[style], .fb-comments span {
  width: 100% !important;
}
0
Dorian