Best Practices when using a theme with multiple widths

Our theme defines multiple templates for page widths (e.g. with and without a sidebar) but we have trouble finding a way to solve the issue that FB comments only store one value for width. What should we do?

  • Niklas

    That doesn't work. Facebook API expects an integer which they then use in the style="" attribute, the iframe src="" attribute of the iframe. With the Like Box I managed to do this with the height (having three columns that should be the same height prompted me to try it):

    ' // Change like box height

    // Save attributes
    var face = $('#central_widget_area').find('.Wdfb_WidgetLikebox iframe');
    var face_src = face.attr('src');
    var face_stl = face.attr('style');
    var face_scr = face.attr('scrolling');
    var face_brd = face.attr('frameborder');
    var face_trp = face.attr('allowtransparency');

    // remove current like box
    face.remove();

    // Append our own new like box
    $('#central_widget_area')
    .find('.Wdfb_WidgetLikebox')
    .append('<iframe class="new_fb">');

    // Add attributes incl the new height to the new iframe
    $('#central_widget_area')
    .find('.Wdfb_WidgetLikebox .new_fb')
    .attr('scrolling', face_scr)
    .attr('allowtransparency', face_trp)
    .attr('frameborder', face_brd)
    .attr('src', face_src.replace(/height=[0-9].*/, "height=" + new_Max))
    .attr('style', face_stl)
    .css({'height': new_Max});
    }'

    Sadly enough it seems like the comments are not fetched from the server (this is probably a design decision on Facebook's part) the same way as the Like box is. So modifying the above code to find the comments, remove them and add new fails.

    Perhaps this is due to the <fb:comments> element that is generated and jQuery refuses to traverse past it?

    I think a possible solution/hack could be if the plugin could be modified to look for a data-wpmudevfb-width="[integer]" attribute in the element that it places the Facebook comments, if the JavaScript finds that data attribute then the data attribute will be used instead of the standard that is supplied from the admin interface.

    …so that would mean that the admin interface would need one field besides the custom hook as an advanced setting, something like "look for specific width in this element" [input type text] (help text: fill in the id of the element containing the specific width).

    I hope there is a simpler solution, but if not I hope that something like this could be achieved.

  • Vladislav

    Hi,

    I believe I understand what you're trying to achieve and if I'm right, I totally feel your pain - getting Facebook-related stuff to cooperate with your width/height changes is notoriously difficult. There's one thing to note about Facebook Comments, and that's that they're called using the "fb:comments" XFBML tag. There's a related jQuery hack/practice when targeting those, you need to escape the colon in the selector string. Perhaps just showing some code that resizes the comments element would be simpler then explaining it with words:

    (function($) {
    $(function () {
    
    function replace_fb_comments () {
    	// Get the fb:comments element
    	var $root = $("fb\\:comments");
    	if (!$root.length) return true;
    
    	// Create a HTML snippet with a new element and apply the old element attributes
    	// Except witdth, or whatever else attribute you want overriden too
    	var html = '<fb:comments ';
    	$.each($root[0].attributes, function (idx, attr) {
    		if ("width" == attr.name.toLowerCase()) html += 'width="300px" '; // Or whatever
    		else html += attr.name + '="' + attr.value + '" ';
    	});
    	html += '></fb:comments>';
    
    	// Now, inject the new snippet right before the old comments
    	$root.before(html);
    	// Remove the old comments box
    	$root.remove();
    
    	// Force re-rendering of XFBML tags
    	FB.XFBML.parse();
    }
    replace_fb_comments();
    
    });
    })(jQuery);

    Of course, this should be enhanced in a number of ways, but I hope it can get you started.

    If you're aiming for window resize sensitive width changes, you'll want to bind the processing function to $(window).resize event too. Note that if you'll be doing that, you may want to add some more code to support IEs - pre-9 IEs may go totally berserk if you just trigger this on each resize. If you start experiencing this sort of issues, you can fix them by editing your processing function so it a) first unbind itself from the resize event for IEs, and b) rebind itself back once all is done, in FB.XFBML.parse() callback argument.