像盒子一样的液体? [英] Fluid like box?

问题描述

我正在制作一个响应式网站，需要为客户的 Facebook 粉丝专页添加 Facebook Like-Box.like-box 的开发者页面 有一个用于自定义的小部件，但它没有允许您以百分比设置宽度.

I'm making a responsive site and need to include a Facebook Like-Box for the client's Facebook fanpage. The developer page for the like-box has a widget for customization, but it doesn't allow you to set a width in percentages.

我四处寻找，最接近的是这个页面 来自 2010 年，它指的是一个 fb:fan 小部件，它允许您链接自定义 CSS.我试图让本教程工作，但失败并出现此错误:

I've searched around and the closest I've got was this page from 2010, which refers to a fb:fan widget that allows you to link custom CSS. I tried to get this tutorial to work but it fails with this error:

<fb:fan> requires one of the "id" or "name" attributes.

所以，总结一下，我需要一个 Facebook Like Box，我可以将它设置为流畅，或者允许我将自定义 CSS 传递给它生成的 iFrame.任何人都可以指出我正确的方向?

So, to recap, I need a Facebook Like Box that I can either set up to be fluid, or which allows me to pass custom CSS to the iFrame it generates. Anyone able to point me in the right direction?

推荐答案

您认为这无法完成?啊哈！对付你，Facebook 和你邪恶的固定宽度方式:我写了一个 JQuery 脚本来消除你所有的邪恶！

You thought it couldn't be done? AHA! Have at you, Facebook and your wicked fixed-width ways: I wrote a JQuery script to undo all your evil!

$(document).ready(function(){   
    var fbWidth;

    function attachFluidLikeBox(){
        // the FBML markup: WIDTH is a placeholder where we'll insert our calculated width
        var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString();

        // the containing element in which the Likebox resides
        var container = $('#likebox');  

        // we should only redraw if the width of the container has changed
        if(fbWidth != container.width()){
            container.empty(); // we remove any previously generated markup

            fbWidth = container.width(); // store the width for later comparison

            fbml = fbml.split('WIDTH').join(fbWidth.toString());    // insert correct width in pixels

            container.html(fbml);   // insert the FBML inside the container

            try{
                FB.XFBML.parse();   // parses all FBML in the DOM.
            }catch(err){
                // should Facebook's API crap out - wouldn't be the first time
            }
        }
    }

    var resizeTimeout;

    // Resize event handler
    function onResize(){
        if(resizeTimeout){
            clearTimeout(resizeTimeout);
        }

        resizeTimeout = setTimeout(attachFluidLikeBox, 200);    // performance: we don't want to redraw/recalculate as the user is dragging the window
    }

    // Resize listener
    $(window).resize(onResize);

    // first time we trigger the event manually
    onResize();
});

它的作用是为窗口的调整大小事件添加一个监听器.当它调整大小时，我们检查 Likebox 包含元素的宽度，生成具有正确宽度的新 XFBML 代码，用所述 XFBML 替换包含元素的子元素，然后触发 Facebook API 再次解析 XFBML.我添加了一些超时和检查以确保它不会做任何愚蠢的事情并且只在需要时运行.

What is does is it adds a listener to the window's resize event. When it resizes, we check the width of the Likebox' containing element, generates new XFBML code with the correct width, replaces the containing element's children with said XFBML and then trigger the Facebook API to parse the XFBML again. I added some timeouts and checks to make sure it doesn't do anything stupid and only runs when it needs to.

这篇关于像盒子一样的液体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！