Fatal编程技术网
  • javascript/
  • 具有自动浏览器刷新JavaScript的响应性FB页面插件

具有自动浏览器刷新JavaScript的响应性FB页面插件

javascript html css facebook

具有自动浏览器刷新JavaScript的响应性FB页面插件,javascript,html,css,facebook,Javascript,Html,Css,Facebook,我正试图在我的网站上嵌入一个插件到我的Facebook页面上，并具有完全响应的行为。基本上，我只希望它的宽度在不同的浏览器大小下改变；浏览器为480或更窄时为480px；481

我正试图在我的网站上嵌入一个插件到我的Facebook页面上，并具有完全响应的行为。基本上，我只希望它的宽度在不同的浏览器大小下改变；浏览器为480或更窄时为480px；481<浏览器<731时为250px，浏览器为731或更宽时为300px

我意识到这个问题，但是之前的答案要么因为FB的改变而不再有效，要么要求用户刷新他们的浏览器窗口。但在上，我发现了一个功能全面、响应迅速的FB页面插件的实际例子；随着浏览器窗口大小的调整，它会动态更改大小和其他特征

这篇博文提到了他们使用的JavaScript，以及一个链接，指向您可以在其中看到它的站点。但他们并没有提供所有涉及CSS和HTML的精简摘要，而且他们网站上的代码对我的新手来说有点复杂。我曾尝试将他们的JavaScript添加到我的站点，但由于某些原因，它对我不起作用。更改浏览器宽度时，“我的DIV#fbsection”会很好地调整其宽度，但其中的DIV.fb页面只有在刷新后才会更改

我在Dreamweaver CS 6中使用了他们的响应模板创建了我的网站，它包含了他们的样式表boilerplate.css和JavaScriptrespond.min.js。有关守则如下：

（来自HTML文档）

我做错了什么？
谢谢大家的回复。

虽然从理论上讲，你想做的事情应该是可以做到的，但事实证明，对于我今晚所做的事情来说，这是一个太大的挑战。到目前为止，如果你的网页设计能够保持facebook插件的宽度不变，那么就更容易了，这样你就不必尝试刷新它以使其响应。

这里的代码：

$(window).on('load', function() {
是jQuery的代码。$是jQuery加载时的别名。在您的站点上，jQuery尚未正确加载。如果你得到了，你应该在头上加上这样的东西：

正确加载后

各种第三方托管的jquery都可以工作，请看这里：（我不确定哪个版本是最好的，但我认为2.x可能会工作）

例如：

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
密切关注控制台日志，了解更多Javascript错误和注意事项。有些可能不是实际的断开错误，但在这种情况下，您会看到未定义$，这将阻止加载主要内容。

我定制了解决方案以满足我的需要，因为我只需要调整宽度，并将解决方案简化为：

function resizeFBPlugin(){
    //getting parent box width
    var container_width = ($('.fb-column').width() - parseInt($('.fb-column').css('padding-left'))).toFixed(0);

    if (!isNaN(container_width)) {
        $(".fb-page").attr("data-width", container_width);
    }
    if (typeof FB !== 'undefined' ) {
        FB.XFBML.parse();
    }
}
Html代码。确保您的小部件包装在div with class fb列或您选择命名类的任何列下

    <div class="fb-column">
      <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="true" data-width="500" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook/" class="fb-xfbml-parse-ignore"> <a href="https://www.facebook.com/facebook/">Facebook/a></blockquote></div>
    </div>


Facebook/a>
然后可以在窗口加载和调整大小时运行resizeFBPlugin函数。祝你好运

在原始博客帖子上看到了您的帖子。提供的示例代码中有一个输入错误，如果未被捕获或您不熟悉语法，将导致类型错误。这里是我的工作，所有的脚本和样式嵌入方便。我删除了他们为其目的添加的标题，但您可以轻松地将其添加回（只需确保在样式中将
.fb column-header
更改为
.fb column-header
）

另外，
YOURPAGE
本来是要用作占位符的，但看起来好像有人真的有这个URL，所以为这个奇怪的赤膊男道歉

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    var CMSSpace = CMSSpace || {};
  </script>
  <style>
    .fb-column {
      height: 550px;
      min-height: 550px;
    }
  </style>
</head>

<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <div class="fb-column">
    <div class="fb-page" data-href="https://www.facebook.com/YOURPAGE" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
      <blockquote cite="https://www.facebook.com/YOURPAGE" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/YOURPAGE">YOUR PAGE NAME</a></blockquote>
    </div>
  </div>
  <script>
    $(window).on('resize', function() {
      setTimeout(function() {
        CMSSpace.changeFBPagePlugin()
      }, 500);
    });

    $(window).on('load', function() {
      setTimeout(function() {
        CMSSpace.changeFBPagePlugin()
      }, 1500);
    });
  </script>
  <script>
    CMSSpace.changeFBPagePlugin = function() {
      //getting parent box width
      var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
      //getting parent box height
      var container_height = (Number($('.fb-column').height()) - (Number(($('.fb-column').css('padding-top').replace("px", "") * 2)))).toFixed(0);
      if (!isNaN(container_width) && !isNaN(container_height)) {
        $(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
      }
      if (typeof FB !== 'undefined') {
        FB.XFBML.parse();
      }
    }
  </script>
</body>

</html>


页面标题
var CMSSpace=CMSSpace | |{}；
.fb列{
高度：550px；
最小高度：550px；
}
$（窗口）.on（'resize'，function（））{
setTimeout（函数（）{
CMSSpace.changeFBPagePlugin（）
}, 500);
});
$（窗口）.on（'load'，function（）{
setTimeout（函数（）{
CMSSpace.changeFBPagePlugin（）
}, 1500);
});
CMSSpace.changeFBPagePlugin=函数（）{
//获取父框宽度
var container_width=（Number（$（'.fb column'）.width（））-Number（$（'.fb column'）.css（'padding-left'）.replace（'px'，“”））.toFixed（0）；
//获取父框高度
var container_height=（Number（$（'.fb column'）.height（））-（Number（$（'.fb column'）.css（'padding-top'）.replace（'px'，''）*2））.toFixed（0）；
如果（！isNaN（容器宽度）和&！isNaN（容器高度））{
$（“.fb page”）.attr（“数据宽度”，容器宽度）.attr（“数据高度”，容器高度）；
}
如果（FB的类型！=“未定义”）{
FB.XFBML.parse（）；
}
}
我已将其改编为一段更简单的代码，希望能有所帮助

你所需要做的就是像平常一样集成你的Facebook提要，在父div标记中添加一类
fb container
，并确保jQuery已加载

您需要的代码是：

//Make Facebook Feed Responsive 100% Height
$(window).on('resize', function () {
    setTimeout(function () { changeFBPagePlugin(); }, 500);
});

$(window).on('load', function () {
    setTimeout(function () { changeFBPagePlugin(); }, 1500);
});

changeFBPagePlugin = function () {
    var container_width = Number($('.fb-container').width()).toFixed(0);
    var container_height = Number($('.fb-container').height()).toFixed(0);
    if (!isNaN(container_width) && !isNaN(container_height)) {
        $(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
    }
    if (typeof FB !== 'undefined') {
        FB.XFBML.parse();
    }
};
我正在使用一个引导式网站，其提要位于
col md
列中，无论大小，它始终填充整个高度。

a无需任何媒体查询。 
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

function resizeFBPlugin(){
    //getting parent box width
    var container_width = ($('.fb-column').width() - parseInt($('.fb-column').css('padding-left'))).toFixed(0);

    if (!isNaN(container_width)) {
        $(".fb-page").attr("data-width", container_width);
    }
    if (typeof FB !== 'undefined' ) {
        FB.XFBML.parse();
    }
}

    <div class="fb-column">
      <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="true" data-width="500" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook/" class="fb-xfbml-parse-ignore"> <a href="https://www.facebook.com/facebook/">Facebook/a></blockquote></div>
    </div>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    var CMSSpace = CMSSpace || {};
  </script>
  <style>
    .fb-column {
      height: 550px;
      min-height: 550px;
    }
  </style>
</head>

<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <div class="fb-column">
    <div class="fb-page" data-href="https://www.facebook.com/YOURPAGE" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
      <blockquote cite="https://www.facebook.com/YOURPAGE" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/YOURPAGE">YOUR PAGE NAME</a></blockquote>
    </div>
  </div>
  <script>
    $(window).on('resize', function() {
      setTimeout(function() {
        CMSSpace.changeFBPagePlugin()
      }, 500);
    });

    $(window).on('load', function() {
      setTimeout(function() {
        CMSSpace.changeFBPagePlugin()
      }, 1500);
    });
  </script>
  <script>
    CMSSpace.changeFBPagePlugin = function() {
      //getting parent box width
      var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
      //getting parent box height
      var container_height = (Number($('.fb-column').height()) - (Number(($('.fb-column').css('padding-top').replace("px", "") * 2)))).toFixed(0);
      if (!isNaN(container_width) && !isNaN(container_height)) {
        $(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
      }
      if (typeof FB !== 'undefined') {
        FB.XFBML.parse();
      }
    }
  </script>
</body>

</html>

//Make Facebook Feed Responsive 100% Height
$(window).on('resize', function () {
    setTimeout(function () { changeFBPagePlugin(); }, 500);
});

$(window).on('load', function () {
    setTimeout(function () { changeFBPagePlugin(); }, 1500);
});

changeFBPagePlugin = function () {
    var container_width = Number($('.fb-container').width()).toFixed(0);
    var container_height = Number($('.fb-container').height()).toFixed(0);
    if (!isNaN(container_width) && !isNaN(container_height)) {
        $(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
    }
    if (typeof FB !== 'undefined') {
        FB.XFBML.parse();
    }
};