Facebook 页面嵌入做出响应 - 以前的帖子解决方案不起作用答案

【问题标题】：Facebook Page Embed Make Responsive - Previous Post Solutions Not WorkingFacebook 页面嵌入做出响应 - 以前的帖子解决方案不起作用
【发布时间】：2016-08-05 11:48:00
【问题描述】：

--更新-- 这是我对这个问题的解决方案。奇怪的是，我无法在 facebook 插件中使用 javascript 变量来表示宽度和高度，从而每次都能完美匹配。我只是将插件的高度和宽度设置为非常高的值，使其适合，令人惊讶的是没有裁剪。我有一个延迟功能，在调整大小以重新加载插件后触发。这种方法唯一的缺点是滚动条看起来有点滑稽，因为插件的高度和宽度设置得太高了。

<div id="facebookFeed">
        <div class="fb-page" data-href="https://www.facebook.com/correlationone/" data-tabs="timeline" data-small-header="true" data-width="2000" data-height="1000" data-hide-cover="true" data-show-facepile="false">
            <div class="fb-xfbml-parse-ignore">
                <blockquote cite="https://www.facebook.com/correlationone/">
                    <a href="https://www.facebook.com/correlationone/">Correlation One</a>
                </blockquote>
            </div>
        </div>
    </div>

<script type="text/javascript">

    var feed = document.getElementById("facebookFeed");

    function reloadFeed(){
        for (var i = feed.childNodes.length - 1; i >= 0; i--) {
            feed.removeChild(feed.childNodes[i]).remove();
        }

        feed.innerHTML = `<div class="fb-page" data-href="https://www.facebook.com/correlationone/" data-tabs="timeline" data-small-header="true" data-width="2000" data-height="1000" data-hide-cover="true" data-show-facepile="false">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/correlationone/">
                        <a href="https://www.facebook.com/correlationone/">Correlation One</a>
                    </blockquote>
                </div>
            </div>`

        FB.XFBML.parse();
    }

    var delay = (function(){
      var timer = 0;
      return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
      };
    })();

    $(window).resize(function() {
        delay(function(){
          reloadFeed();
        }, 500);
    });

    </script>

--下面是原帖--

我正在尝试使 facebook 页面嵌入响应式。我已经尝试了每一种该死的方式，但我不明白为什么这不起作用。该页面正在作为 wordpress 页面模板加载。

我现在使用的主要方法是在页面加载后添加插件以动态获取高度和宽度的大小，然后将其添加到文档中并解析。不幸的是，解析时没有出现任何内容。我在控制台中检查了 DOM，元素就在那里。

<body>

    <?php include('templates/analytics.html');?>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=547400675437424";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div id='fullpage'>

    <?php include('templates/nav.html');?>

    <div id="facebookFeed">

    </div>

    </div>


    <?php get_footer(); ?>

    </div>
    <script type="text/javascript">
    window.fbAsyncInit = function() {
        var height = window.innerHeight,
            width = window.innerWidth,
            feedHeight = height * 0.912,
            feedWidth = height * 0.3,
            feed = document.getElementById("facebookFeed");

        feed.innerHTML = `<div class="fb-page" data-href="https://www.facebook.com/correlationone/" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-width=${feedWidth} data-height=${feedHeight} data-hide-cover="true" data-show-facepile="false">
                <div class="fb-xfbml-parse-ignore">
                    <blockquote cite="https://www.facebook.com/correlationone/">
                        <a href="https://www.facebook.com/correlationone/">Correlation One</a>
                    </blockquote>
                </div>
            </div>`

        FB.XFBML.parse();
    }
    </script>

【问题讨论】：

developers.facebook.com/docs/plugins/page-plugin#resizing – 根本不可能；该插件只会在初始化时根据容器元素调整其宽度，稍后不会对任何更改做出反应。
我知道我必须在调整大小时重新渲染插件。因此我的 FB.XFBML.parse();
您在 fbAsyncInit 事件中只调用了一次该方法 - 我不确定该事件是否会触发，当您嵌入带有嵌入其 URL 哈希部分的参数的 SDK 时.另外，一旦一个元素被解析并转换成一个插件，它就不会被再次解析——所以你需要删除它，用一个新的替换它，然后再次解析。（或者至少你必须删除告诉方法一个元素已经被解析的指示符。）
嘿 CBroe 我已经阅读了您的 cmets 并更新了原始帖子。之后我在插件 html 中添加并调用解析，但插件无法呈现。

标签： javascript facebook iframe

【解决方案1】：

我有同样的问题，我想在桌面上嵌入一个大的（宽度：500px），在移动设备上嵌入一个小的（宽度：350px）。我有解决方案，这就是我使用的：

javascript：

<script language="JavaScript">
function autoResizeManual(id, newwidth, newheight ){

    document.getElementById(id).width = (newwidth) + "px";
    document.getElementById(id).height = (newheight) + "px";

}
//-->
</script>

然后是 PHP - 有两种情况 - 对于常规帖子，FB 的默认宽度是 500 像素，对于视频，它是 560 像素。

 if($deviceType != 'computer') { //check if it's a mobile any way you want
    if(stripos($my_embed,"<iframe") !== false) { 
//check if the fb frame is prezent in the embed

            if(stripos($my_embed,"&width=500") !== false) {
//if it's a regular post
                $embed_width = '320';
                $embed_height = '500';
                $my_embed = str_ireplace('&width=500', '&width=320', $my_embed);
            }

if(stripos($my_embed,"&width=560") !== false) {

//if it's a video
                $embed_width = '320';
                $embed_height = '200';
                $my_embed = str_ireplace('&width=560', '&width=320', $my_embed);
            }

                $change_petition = '<iframe id="iframe1" onLoad="autoResizeManual(\'iframe1\',\''.$embed_width.'\',\''.$embed_height.'\');" ';

//code to be injected to launch the javascript

                $my_embed=  str_ireplace('<iframe', $change_petition, $my_embed);

//the injection

    }
    }

print $my_embed

【讨论】：

很高兴看到您的解决方案。我将用我的工作方式来更新主要的 psot。我无法使用 javascript 作为变量设置插件的高度和宽度，这让我感到惊讶。我发现无论出于何种原因，只要在插件上设置一个非常高的宽度或高度就可以使其合适。我的 resize 函数完成时也有延迟。