Add a Facebook Page Fan Box to your Zen Cart store


A Facebook Page Fan Box can be a great way to integrate your Facebook Page and Zen Cart store.  Here are the step-by-step instructions to create a new sidebox and add the Facebook Page Fan Box code.

The Facebook Part

  1. Login to your Facebook page.
  2. Click the link to Edit Page, found under your picture/logo.
    image
  3. On the right hand side of the Edit screen, click on the Promote with a Like Box link. Facebook - Promote with a Like Box
  4. Enter your Facebook Page ID.  The Like Box (or Fan Box) can be customised to suit the width of your Zen Cart column.  You can also choose whether or not to show the Stream (your feed) and the Header as part of your Fan Box.
    Customise Facebook Like Box
  5. When you have your preferred settings, click the Get Code button.  On the next screen you will see that there are two code boxes.  In this example we are going to use the code from the second XFBML box.  Highlight the contents of this box and select Ctrl-C to copy (or right-click and select Copy).
    Facebook Fan Box Code
  6. Paste this code into a txt file and save to use later.

The Zen Cart Part

  1. We will be using the Blank Sidebox Add-on for Zen Cart as a basis for our Facebook Fan Box.  Download my Facebook Fan Box Sidebox and unzip the file ready to edit.
  2. Open the fanbox_sidebox_defines.php file (in includes\languages\english\extra_definitions) in your favourite Text Editor and locate this line of code:
    define('TEXT_FANBOX_SIDEBOX', 'Add Facebook XFBML Code here');
  3. and replace the section between the single quotes with your code saved from Facebook.  It will look something like this:
    define('TEXT_FANBOX_SIDEBOX', '<fb:like-box profile_id="196744630780" width="140" connections="4" stream="false" header="false"></fb:like-box>');
  4. Save the fanbox_sidebox_defines.php file.
  5. Using your favourite FTP program, upload the Facebook Fan Box Sidebox add-on files to your Zen Cart store.
  6. Log in to your store’s Zen Cart Admin.
  7. From the Tools menu, select Layout Boxes Controller.  You will notice at the top of the screen an informational message.
    New Sidebox
  8. Click Edit next to the Facebook Fan Box Sidebox.
    Facebook Fan Box Sidebox in Zen Cart
    Select ON for Left/Right Column Status and the add your preferred location (left or right) and sort order.  Click on the Update button to save your settings.
    Edit Box - Zen Cart
  9. You will notice that the sidebox now appears, however it is currently blank.  We have one more step to go.  The Facebook XFBML requires additional code in the footer of your page.
    image
  10. Open up the tpl_main_page.php file from includes/templates/template_default/common.  Scroll to the end of the file – the last line will be:
    </body>
  11. Just before this last line, add the following code:
    <div id="fb-root"></div>
    <script>
     window.fbAsyncInit = function() {
     FB.init({appId: 'your app id', status: true, cookie: true,
     xfbml: true});
     };
     (function() {
     var e = document.createElement('script'); e.async = true;
     e.src = document.location.protocol +
     '//connect.facebook.net/en_US/all.js';
     document.getElementById('fb-root').appendChild(e);
     }());
    </script>
  12. Save the modified tpl_main_page.php file to your override folder.  This will be /includes/templates/CUSTOM/ where CUSTOM represents the name of your current template folder.
  13. Now, take a look at your new Facebook Fan Box Sidebox.
    Facebook Fan Box Sidebox in Zen Cart

And, of course, come and visit me on Facebook especially if you ‘Like’ this tutorial :)

Update

If you are having problems with your Facebook Like Box not appearing in Internet Explorer, try the following edit in the Zen Cart HTML header file.

  1. Open the html_header.php file (in includes/templates/template_default/common) in your favourite Text Editor and locate this line of code (on line 43 for me):
    <html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>
  2. and update it to the following:
    <html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?> xmlns:og="http://opengraphprotocol.org/schema/"
     xmlns:fb="http://www.facebook.com/2008/fbml">
  3. Save the html_header.php file (following the override system if you wish this change to be template-specific).
     
   
     

, , , ,

  1. #1 by comment on 12 July, 2010 - 3:14 am

    why does the sitebox does not appear when i browse my site using Internet Explorer

  2. #2 by kerrin hardy on 12 July, 2010 - 7:59 am

    Take a look at this: http://www.kerrinhardy.com/faq/zen-cart-sideboxes-faq/how-do-i-centre-the-facebook-fan-box-within-the-zen-cart-sidebox/#comment-1364

    There is now an additional step that is required to ensure Facebook apps work in Internet Explorer.

  3. #3 by Allard on 31 July, 2010 - 4:27 am

    Hi kerrin,

    First of all, thanks for this posting.
    I am having the same trouble asthe nr1 posting.
    Its not working in IE. I have rea the comment (nr2 link). What exactly do you mean about aroun line 43? Could you be more specific? I have this around 43

    /**
    * load all template-specific stylesheets, named like “style*.css”, alphabetically
    */
    $directory_array = $template->get_template_part($template->get_template_dir(‘.css’,DIR_WS_TEMPLATE, $current_page_base,’css’), ‘/^style/’, ‘.css’);
    while(list ($key, $value) = each($directory_array)) {
    echo ‘get_template_dir(‘.css’,DIR_WS_TEMPLATE, $current_page_base,’css’) . ‘/’ . $value . ‘” />’.”\n”;
    }

    thanks,

    Al

  4. #4 by kerrin hardy on 7 August, 2010 - 7:57 pm

    Allard, double check you are looking at the html_header.php file. I’m just checking that you have the right file as I can’t tell at this stage due to the custom code you have pasted in (not from a default Zen Cart install).

    I’ve updated this post now to include the change in the html_header.php file.

    Hope this helps,
    Kerrin

  5. #5 by mark on 14 August, 2010 - 6:19 pm

    hi kerrin. great site :)
    im finding your tutorials and advice very useful however i’m a full on noob with ZC and site creation in general, so i hope you wil excuse the apparent dumbness of this question.
    what is it i have to upload and where to?
    1. do i upload the whole ‘Facebook Fan Box…’ folder?
    2. or do i upload the ‘includes’ folder?
    3. or do i upload only the three folders inside ‘includes’?
    again, most important, where do i place them within the file structure on my server?

  6. #6 by kerrin hardy on 14 August, 2010 - 10:47 pm

    Thanks Mark! And no such thing as a dumb question :)

    Firstly, unzip the Facebook Fan Box folder. Then,I’m assuming you are using a FTP program such as FileZilla, navigate to the unzipped folder on the local (left) side and double-click the Facebook_Fan_Box_Sidebox folder so that you can see the includes folder.

    Next navigate to your store’s root folder on the remote (right) side – you should see the includes folder there too.

    Now, it’s just a matter of uploading the includes folder. The files will be uploaded to the correct locations.

    Hope this helps. Let me know how you get on.

    Cheers
    Kerrin

  7. #7 by mark on 15 August, 2010 - 10:27 pm

    hi kerrin. im so close i can almost smell it :)
    however, i am having a problem. i’ve followed your steps to the letter but all that displays is the blank box with ‘are you a fan yet’ written in it.
    im using a template called tvzen_jellyfish and so i have saved the amended tpl_main_page.php file in this directory;
    /public_html/includes/templates/tvzen_jellyfish.
    is this correct?
    also, i left the line;

    FB.init({appId: ‘your app id’, status: true, cookie: true,
    xfbml: true});

    as is. should i change ‘your app id’ to my facebook profile id number so it reads;

    FB.init({appId: ’185550966896′, status: true, cookie: true,
    xfbml: true});
    am v confused and any help here would be greatly appreciated

  8. #8 by kerrin hardy on 15 August, 2010 - 10:42 pm

    Hi Mark

    Firstly, I just wanted to check that you have saved the amended tpl_main_page.php in the correct override folder: includes/templates/tvzen_jellyfish/common/tpl_main_page.php.

    Secondly, you don’t need to change the code for this file. Use it as is.

    Lastly, don’t forget to make the change to the html_header.php file too (in the update).

    Your store looks great – it’s a very nice design.

    Cheers
    Kerrin

  9. #9 by mark on 16 August, 2010 - 3:16 am

    success! thank you very much kerrin (and for the nice comment about the site:) )

    i’ve still got one small problem though.
    as you will see if you take a quick look at the site, the header and footer no longer span the whole page now as they did before, and unfortunately this effect persists even after i switch off the new facebook box.

    any thoughts as to what might be causing this and, even better, how to fix it?

  10. #10 by mark on 16 August, 2010 - 3:21 am

    and (just noticed) i also seem to have picked up a sideways scroll bar

  11. #11 by kerrin hardy on 16 August, 2010 - 8:13 am

    Did you resize the Facebook box to suit the width of your Zen Cart column? The width needs to be adjusted before you generate the code on the Facebook page.

    I’ll have a quick look tonight to see if you have enabled the Facebook box again so I can see the effect.

    Cheers
    Kerrin

  12. #12 by Evie on 16 August, 2010 - 12:22 pm

    HI, Kerrin
    I read all the replies and i am pretty sure I modified the right pages, uploaded to the right places.
    However I can only see a blank side box in Safari.

    Do you know why?
    I modified the html_header.php
    Thanks

  13. #13 by Evie on 16 August, 2010 - 12:25 pm

    Hi, Kerrin
    I have read all the replies and i am pretty sure i modified the right files, uploaded to the right places,
    adjusted the width of the fb plugin, but i still just see a blank box in my website, through safari.

    Do you know why?
    thanks

    Evie

  14. #14 by Evie on 16 August, 2010 - 12:52 pm

    hi Kerrin,
    Looks like i got it working . thank you very much for the tutorial

  15. #15 by kerrin hardy on 16 August, 2010 - 2:15 pm

    Evie, that’s great.
    I’m just putting together a tutorial on styling the Facebook Like Box so that you can modify the colours to suit a dark background, like in your case. I’ll add another comment here when it’s posted.
    Cheers
    Kerrin

  16. #16 by mark on 16 August, 2010 - 9:11 pm

    hi kerrin. yes i did resize the facebook box. i started again this morning and made a facebook box 100px wide. my left column is 220px wide. i am using Firefox but it does the same thing on IE.
    as you can see, the very top grey bar and the footer do not span the full width of the page and there is a sideways scroll bar added to the bottom of the browser.
    i hope you can help. it’s quite disheartening to be so close and yet denied :(

  17. #17 by kerrin hardy on 16 August, 2010 - 10:27 pm

    Mark I’m not seeing a horizontal scroll bar in either IE or FF. The grey bar in the header is the background in #menu_wrap. It is not spanning the full width of the page as the #menu_wrap sits inside the #mainWrapper and that has a width set of 830px.

    Other than it being quite skinny now, it’s all looking good to me.

  18. #18 by mark on 17 August, 2010 - 1:17 am

    yes. sorry. should have let you know. i managed to get rid of the horizontal scroll between the time of my message and your reply (no idea how i did it. just seemed to disappear as i was experimenting!)

    i admit that it does look ok but it isnt as it was, before the FB box was added.
    im only using this site as a practice area. i have been asked to put a Facebook box on a real live ZC site for someone and i cant afford to have their site change even a little. is there a way i can change the width of the #mainWrapper and the footer so they span the full width again, or better yet, stop this happening in the first place?

    sorry if i’m starting to become a pain, that’s the last thing i want to do. if it was for my site alone i could live with the change. but unfortunately for me that’s not the case.

  19. #19 by mark on 17 August, 2010 - 3:45 am

    ok, so, a little more info for you kerrin.
    i’ve reverted to a backed up state when everything is as it should be.
    if you take a look, you can see the top grey bar happily spanning the whole page along with the header (brown gradient).
    the footer is in a similar state.
    this holds true from 800×600 right up to 1600×1200 and all resolutions between.
    i add the blank fanbox and everything stays as is.
    lovely so far. :)
    but as soon as i add the code to tpl_main_page.php, upload it then refresh my page so that the FB box appears, it changes the page. thats all i can really tell you dude.

  20. #20 by Evie on 17 August, 2010 - 2:21 pm

    HI,Kerrin

    Yes I was worried about how to change the font of the text within the facebook box and seems there is no scroll bar in it so I am not able to see all top 10 profile pictures. I can only see 4 of them.
    It would be great if you can post new updates to solves these issues.
    Thanks in advance.

    Evie

  21. #21 by Riju on 18 September, 2010 - 4:37 am

    Hi Kerrin,

    Thank you for the great tutorial. I am trying to implement the like box on my site, but I am facing the same issue that mark (comment# 7) was facing.

    I have followed the instructions in your reply to the post, but still getting a blank box.

    I am unable to locate the body tag mentioned in step no. 10 and have put the code in step no. 11 at the bottom of the page. Could this be the problem?

    I also see that there’s a jscript folder under templates folder. Do I need to do something here?

    Thank you for your help!

  22. #22 by kerrin hardy on 18 September, 2010 - 8:57 pm

    Hi Riju

    I think the problem you are seeing is actually due to another issue. Your pages are not loading completely, I think this is due to an issue with one of your sideboxes lower down on the page. As you can see, the footer is not loading at the end of the page. This means that the code the Facebook Like box requires is also not loading.

    Try turning off the sideboxes that are set to appear at the bottom of the page to identify the one that is causing the problem. Most of the time this is due to some missing php code (that was cut/deleted by mistake when modifying the code).

    Hope this helps,
    Kerrin

  23. #23 by Wayne on 21 September, 2010 - 9:51 am

    I had installed the facbook add on and followed everything to the T The sidebox was not showing so I went to the update in html_header.php file but something terrible happened. My side boxes were now on the left and some on the right I ended everything and decided to contact you please can you help me.

  24. #24 by kerrin hardy on 21 September, 2010 - 2:02 pm

    Hi Wayne – happy to help. How have you left it now – have you backed out all the changes?

  25. #25 by Andrea Lee on 2 October, 2010 - 3:56 am

    Hi Kerrin,
    All the files have been uploaded and everything done according to your instructions. when i go on my Giftonista website the fanbox appears with he stream, ONLY as long as i am log into my facebook page. Once i log out of facebook i get a red border box that says the page you are trying to access is restricted or unavailable. I check all my settings in facebook to make it visible to website.. but still not change.. Help please..
    Andrea

  26. #26 by kerrin hardy on 2 October, 2010 - 10:45 am

    Hi Andrea
    It sounds like there may be some settings on your Facebook page that restricts access until the visitor is logged on to Facebook – and then it would depend on whether they match the restrictions set.

    Take a look at my new post that walks through the Facebook page settings for country restrictions, age restrictions, and if you want the page to be publicly visible.

    http://www.kerrinhardy.com/2010/10/02/how-do-i-set-my-facebook-like-box-so-that-it-is-visible-to-everyone/

    Let me know if this helps,
    Kerrin

  27. #27 by Andrea Lee on 2 October, 2010 - 11:31 am

    Hi Kerrin,
    You are the best, it worked! thank you!
    I just have one more question.. the fanbox is streaming he photos from my album on facebook.. I tried the code facebook gives for just using header that way the photos wont display.. but the code still bring the photo box over except empty… right now the fanbox on my cart is too long because of the photos.. any suggestions

  28. #28 by kerrin hardy on 2 October, 2010 - 1:44 pm

    Hi Andrea – it’s looking good now. I’m not sure that there is a way to include the stream but without the images. So the only alternative would be to turning the stream off and using that code – see what you think. I prefer that anyway as the version of the like box with the stream turned on always seems to cut the content off anyway.
    Cheers
    Kerrin

  29. #29 by Andrea Lee on 7 October, 2010 - 4:27 am

    Hi Kerrin – that’s the problem when i try turning the stream off and use that code.. the box still appears but without the images.

  30. #30 by Andrea Lee on 7 October, 2010 - 4:58 am

    Kerrin, the fanbox within facebook after turn off the stream and header comes out looking real nice just show the ppl who like… this is what i really want but for some reason the code is not working… can you help?

  31. #31 by wayne on 8 October, 2010 - 5:15 am

    I removed the installed and followed the procedure all over and it is installed well just one problem. The “Are You A Fan Yet” is not showing. It is showing the BOX_HEADING_FACEBOOK. Can you help me

  32. #32 by Katerina on 14 October, 2010 - 7:57 am

    Hi,
    I came upon this page, while looking for a solution for a problem with Facebook Fanbox.
    I found out that there is a mistake in the code, that gets compiled when you turn the stream off – in the code still the parameter “stream” is true. You have to find the text “stream=true” and replace it by “stream=false”. I don’t know why this is so.
    Hope this helps.

  33. #33 by edu on 5 December, 2010 - 7:34 am

    i´m becoming crazy… i followed all steps months ago and did correct, now, i change my template, follow the steps again and my fan box always it´s in blank. Can be a template incompatibility? Thanks

  34. #34 by tcjay on 10 February, 2011 - 9:47 pm

    Thanks so much for your tutorial. It really set me straight on loading an interface with Facebook.

    Works fantastic. Once I turned on the Facebook side box, it slows down loading the page. It looks like it is trying to connect to Facebook. Is there some way to speed it up. I do not see the delay on other websites.

    TIA

  35. #35 by tcjay on 10 February, 2011 - 10:04 pm

    I did not have the css loaded and that slowed down loading the page.

    Is there a way to increase the size of the images. RIght now they are 50px x 50 px? TIA TOM

  36. #36 by kerrin hardy on 13 February, 2011 - 10:27 pm

    Your site http://www.stitchboutiqueboston.com/ looks great. Well done!

    As far as the Facebook Like Box images – the user thumbnail images – these are set by Facebook and are not customizable at this stage.

  37. #37 by Clinton Loh on 2 March, 2011 - 11:02 am

    Thanks for the template. I followed your instruction but the sidebox did not show on the website at all. Instead, an extra search function (without the containing side box) appeared on the right hand side.

    I then deleted the fanbox as well as all the code in the tpl_mainpage.php. However, the extra search function is still on the site. Can you help?

  38. #38 by BS on 5 March, 2011 - 5:47 am

    Hi Kerrin,

    I followed all your steps, even the Internet Explorer hack. I am still getting a blank in in the fb sidebox on my zen cart site. What am I doing wrong? Would you be kind enough to help.

    Thanks,
    BS

  39. #39 by oqix on 9 March, 2011 - 7:13 am

    Hi kerrin hardy,
    thanks for nice guide. I have little problem. Just done everything on guide but faces from fb did not appeared only sidebox with name: BOX_HEADING_FANBOX_SIDEBOX
    and text inside:
    TEXT_FANBOX_SIDEBOX

  40. #40 by oqix on 9 March, 2011 - 7:38 am

    OK I “fix” it. Problem was in bad language folded. My site dos not using ENG language as default so I just copy files from english to slovak. It works now. Thanks kerrin.

  41. #41 by kerrin hardy on 9 March, 2011 - 8:53 am

    Hi oqix, glad you got it sorted out – it looks good!

    Did you get my reply on the Zen Cart forum about fixing the spacing?

    Cheers
    Kerrin

  42. #42 by oqix on 9 March, 2011 - 9:00 am

    Yes thanks again it’s cool now.

  43. #43 by tuxedo park brewers on 15 March, 2011 - 7:48 am

    Killer, dude! Thanks!

  44. #44 by Linda on 16 March, 2011 - 9:18 pm

    Hi.. Does this works with ssl site? it seems that //connect.facebook in tpl_main_page.php causing the site to be not secured? How do I rectify this? Thank u so much

  45. #45 by kerrin hardy on 17 March, 2011 - 4:30 pm

    Hi Linda
    Try adding the https protocol to the XFBML code you copied in the first step. For example:

    Facebook Like Box over SSL

    There is nothing specific on the Facebook Developers site in relation to the Like Box, however this is the instructions for using Facebook Connect on secure pages. It says “The library will rely on the current page protocol at runtime. The SSL URL is the same, only the protocol is changed.”

    Do you want to give this a try and let me know how you get on?

    Cheers
    Kerrin

  46. #46 by Help me on 19 March, 2011 - 4:25 pm

    I have this same ifrane code but actually want to put it up on our zencart site ABOVE the header at 960 pixels wide. I have the code set and did it but it will not center. It is left justified while yhe shop is centered. HTML center tags dont help.

  47. #47 by kerrin hardy on 3 April, 2011 - 6:04 pm

    Hi there, can you share your store’s URL so we can take a look? It’s a bit hard to work out what could be happening without seeing the problem.
    Cheers
    Kerrin

  48. #48 by Coran McSweeney on 14 June, 2011 - 6:00 am

    Hi Kerrin
    I have installed this brilliant add on, however it seems people that have liked it are appearing twice in the sidebox! Is this a bug? It seems to only affect IE.
    Thanks again
    Coran

  49. #49 by kerrin hardy on 15 June, 2011 - 4:04 pm

    Hi Coran – I believe this tends to happen when there is more space in the box than there is Likes. As your Likes increase, this problem goes away. Have you taken the Like box off now? It was there on my phone, but now I’ve had a look from my machine and it’s not there. I was going to Like your page :)

  50. #50 by Claire Higgins on 12 July, 2011 - 4:29 am

    Hi Kerrin

    Just recently the facebook sidebox on our website has changed its appearence. I was very happy with it beforehand, but now the content within has shifted over to the right (like a hanging indent)to make way for our profile image which was not there before. As a consequence some of the words in our news feed can no longer be seen in full (if you scroll down our news feed you will see the letters missing off words on certain feeds).

    Also there are now big gaps underneath any images that were attached to a facebook posting.

    Is there a fix for this or is it just something I have to put up with?

    Thanks

    Claire

  51. #51 by Jesus on 10 September, 2011 - 5:52 am

    Is it possible to change what is on top of the horizontal line to appear on the bottom, and what appears on the bottom appear on the top first? if so, could you please tell me how to make these edits?

  52. #52 by Carol on 20 September, 2011 - 9:29 pm

    Hi to everyone, firstly thanks for this tutorial, I am following the steps but I have the following problem:

    Using your favourite FTP program, upload the Facebook Fan Box Sidebox add-on files to your Zen Cart store.
    Log in to your store’s Zen Cart Admin.
    From the Tools menu, select Layout Boxes Controller. You will notice at the top of the screen an informational message.

    I upload includes folder inside blank_sidebox_2.0

    but in layout boxes controller, it doesn´t appear any message saying about a new box, why? I uploaded with filezilla, and have done first steps correctly. Help please

  53. #53 by Andy Foster on 16 November, 2011 - 11:08 pm

    Facebook seem to have changed the Get Code boxes so that this guide doesn’t make sense any more! Facebook provides several different boxes of code aimed at HTML websites rather than php ones like zen cart. Any chance of an update to the guide? That would be ace…

  54. #54 by Tara on 17 June, 2012 - 12:59 pm

    Hi Kerrin, I love having the separate fanbox, and wanted to make another one for my forum, so I copied all the files, and changed all the “fanbox” bits to “forum”, turned the new box on, but it isn’t working, any idea why?

(will not be published)

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