Question

Facebook声称其嵌入式帖子会根据屏幕尺寸自动调整。

请参阅以下链接我可以自定义嵌入帖子的宽度吗？部分。

https://developers.facebook.com/docs/plugins/embedded-posts

然而，嵌入似乎没有响应。请在这里查看我的测试，

除了让它响应之外，我还有什么需要做的吗？

Answer 1

您必须使用javascript / jquery来获得所需的结果。我从responsive function获得了帮助，并创建了几乎适用于所有宽度的以下内容。

(function ($) {

    jQuery.fn.autoResizeFbPost = function () {

        var fixWidth = function ($container, $clonedContainer, doParse) {
            // default parameter. 
            doParse = typeof doParse == 'undefined' ? true : doParse;
            var updatedWidth = $container.width();
            // update all div.fb-post with correct width of container
            var isMobile = window.matchMedia("only screen and (max-width: 600px)");

            if (isMobile.matches) {
                //Conditional script here  
                if (window.matchMedia("(orientation: portrait)").matches) {
                    // you're in PORTRAIT mode
                    updatedWidth = $(window).width();
                }

                if (window.matchMedia("(orientation: landscape)").matches) {
                    // you're in LANDSCAPE mode
                    updatedWidth = $(window).height();
                }
            }

            $clonedContainer
                .find('div.fb-post')
                .each(function () {
                    $(this).attr('data-width', updatedWidth);
                });
            $('div.embedded', $clonedContainer).each(function () {
                $(this).attr('max-width', updatedWidth);
            });
            // update page with adjusted markup
            $container.html($clonedContainer.html());

            //should we call FB.XFBML.parse? we don't want to do this at page load because it will happen automatically
            if (doParse && FB && FB.XFBML && FB.XFBML.parse)
                FB.XFBML.parse();
        };

        return this.each(function () {

            var $container = $(this),
             $clonedContainer = $container.clone();

            // make sure there is a .fb-post element before we do anything.
            if (!$container.find('div.fb-post').length) {
                return false;
            }

            // execute once (document.ready) and do not call FB.XFBML.parse()
            fixWidth($container, $clonedContainer, false);

            $(window).bind('resize', function () {
                fixWidth($container, $clonedContainer);
            }).trigger('resize');
       });
    };

})(jQuery);

(function ($) {
    $(document).ready(function () {
        $('#post').autoResizeFbPost();
    });
})(jQuery);

您的HTML应该像

<div style="background-color: white;" id="post">
  <div class="fb-post" data-href="your-facebook-post-url" mobile="false"></div>

希望这会对你有所帮助。随意发表您的意见。

嵌入Facebook帖子响应

1 个答案: