How do I centre the Facebook Fan Box within the Zen Cart sidebox?


Rating: +0

Positive Negative

Hi,

Thanks for the Facebook Fan Sidebox tutorial for zen cart, it's great! One slight problem though, I've done it to the T and the FB is imbedded but not centred in the sidebox...any ideas on fixing this? Link = www.cranbrookconserves.co.uk

Hi, thank you for your question.

I have had a look at your site (your chutneys sound delicious, by the way) and I think you are referring to centering the fan box vertically within the sidebox. This may be due to an empty paragraph in the sidebox php file.

Check in the sidebox template file (includes/templates/template_default/sideboxes/tpl_fanbox_sidebox.php) and make sure you only have one line of content. For example:

$content .= '

' . TEXT_FANBOX_SIDEBOX . '

';
$content .= '';

Or, as the sidebox includes a paragraph tag, you may need to look at your stylesheet for extra padding set for this tag.

Hope this helps,
Kerrin

PS When viewing your site without being logged on to Facebook, the fan box has the message "This public profile is not visible".

In Facebook, set the "Age Restrictions" in the Page "Settings" to "Anyone +13" if you would like to show the fan box contents without your store visitors needing to be logged into Facebook.

     
   
     
  1. #1 by Bert on 26 June, 2010 - 8:21 pm

    Thanks for that worked a treat, I already had the restrictions to Anyone +13 though, perhaps the UK country restriction caused it? I’ve removed that now.

    One other thing is mixed success in different browsers:

    Chome: Perfect
    IE6: Empty sidebox – no FB
    IE7: ” ”
    IE8: Untested
    Firefox: Untested

  2. #2 by Bert on 26 June, 2010 - 8:26 pm

    Update:

    It’s an IE issue, the FB sidebox works fine in Chrome/Firefox all versions, but not in any version of Internet Explorer.

  3. #3 by kerrin hardy on 26 June, 2010 - 10:30 pm

    Hi Bert

    It looks like it was the UK country restriction then as I can now see your profile.

    You are right though, it is working fine in Firefox and Safari for me but not in IE8. I tested this again in my demo store and had the same problem. There now needs to be an additional change in the includes/templates/CUSTOM/common/html_header.php file.

    Around line 43, edit the line to

    <html xmlns="http://www.w3.org/1999/xhtml&quot; <?php echo HTML_PARAMS; ?> xmlns:og="http://opengraphprotocol.org/schema/&quot;
          xmlns:fb="http://www.facebook.com/2008/fbml">

    I will update the instructions to include this additional step now.

    Hope this helps,
    Kerrin

  4. #4 by Bert on 26 June, 2010 - 10:43 pm

    Hi Kerrin,

    This is getting interesting! It now works in IE6, but the layout is a bit messed up, the bottom of the FB content is chopped in half…intriguing!

  5. #5 by kerrin hardy on 26 June, 2010 - 11:03 pm

    It looks good in IE8 here!

    Looks like IE6 is going to be a bit harder to resolve as apparently it has issues rendering Facebook pages at all.

    I don’t have access to IE6 at the moment but will check early next week.

  6. #6 by Bert on 27 June, 2010 - 1:50 am

    Ah ok so long as it works in IE8, that’s all I really need. If you ever want IE6 on XP just go Start > Run > iexplore.exe

    And IE6 pops up, it’s hidden/un-uninstall-able in XP!

(will not be published)

Notify me of followup comments via e-mail. You can also subscribe without commenting.