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
- Login to your Facebook page.
- Click the link to Edit Page, found under your picture/logo.
- On the right hand side of the Edit screen, click on the Promote with a Like Box link.
- 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.
- 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).
- Paste this code into a txt file and save to use later.
The Zen Cart Part
- 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.
- 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'); - 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>'); - Save the fanbox_sidebox_defines.php file.
- 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.
- Click Edit next to the Facebook Fan Box Sidebox.
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.
- 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.
- 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>
- 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> - 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.
- Now, take a look at your new Facebook Fan Box Sidebox.
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.
- 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; ?>>
- 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">
- Save the html_header.php file (following the override system if you wish this change to be template-specific).
|
|||||||
#1 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?
#2 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
#3 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…