jquery - fb-comment fluid with wrapper container 通过 jquery

Question

我正在将 fb-comment 安装到我的 wordpress，由于需要管理评论，我找到了下面的代码。它运行良好，但问题是固定宽度。

需要注意的几点:

• 我设置了空白宽度，默认为 550px(合适)
• 所以我删除了 php 中的 data-width='"+width+"'，仍然是那个宽度
• 尝试了很多css方案，宽度依旧

所以我正在考虑一种直接的方法来通过 jquery 将宽度值绑定(bind)到 warpper 容器 div。这是我的问题。

(function () {
        var admins = 614590779, // admin ID
        app_id = 291027061045087, // app ID

        width = "", // width

        numposts = 5, // comment to show
        fbLocation = ".comments", // where to place the fb-comment 
        color = "light", // theme
        postUrl = "<data:blog.canonicalUrl/>";
        //<![CDATA[
        var cb=function(){postUrl=(postUrl.search("http")<0)?"http://"+location.hostname+location.pathname:postUrl;jQuery("head").prepend("<meta content='"+admins+"' property='fb:admins'></meta><meta content='"+app_id+"' property='fb:app_id'></meta>");jQuery(function(){jQuery("body").prepend("<div id='fb-root'></div><sc"+"ript>(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 = 'http://connect.facebook.net/zh_TW/all.js#xfbml=1&appId="+app_id+"'; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</sc"+"ript>");jQuery(fbLocation).prepend("<div class='fb-comments' data-colorscheme='"+color+"' data-numposts='"+numposts+"' data-width='"+width+"' href='"+postUrl+"'></div>");FB.XFBML.parse()})};var getScript=function(url,cb){var script=document.createElement("script");if(script.readyState){script.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;if(cb){cb()}}}}else{script.onload=function(){if(cb){cb()}}}script.src=url;document.documentElement.firstChild.appendChild(script)};if(typeof jQuery==="undefined"){getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",cb)}else{cb()};
        //]]>
        } )();

Answer 1

我无法在缩小窗口时调整它的大小，但我可以在加载时将其设置为页面的宽度:

<script>
$(document).ready(function()
{
    var width = $('div.container').width();
    $('div.fb-comments').attr('data-width', width);
});
</script>

希望对您有所帮助。