Add a Facebook Like Box to Zen Cart

If you are not already aggressively marketing your business on Facebook you should be. According to Digitaltrends.com Facebook has over 25% of internet traffic in the U.S. and is the most downloaded app of all time. In this tutorial, I will show you step by step how to install your Facebook fan box into a sidebox on your zen cart. For demo purposes I will be adding the box to my Andover Modern free zen cart template which you can download here.

Preparation

Before making any changes to your zen cart, ALWAYS back up your site files and database. Read the beginning of this post for a really easy method, explained step by step for backing up your site’s files and database.

Install the Sidebox

1. Click Here to download the Editable Sidebox contribution from the zen cart web site.

Move the .zip file to a temp directory on your computer and unzip (extract the contents of the file).

Open Editable_Sidebox_1.0/includes/languages/english/extra_definitions/editable_sidebox_defines.php in your favorite plain text editor.

On or around line 15 you will see:

define('BOX_HEADING_EDITABLE_SIDEBOX', 'Your header in Here');

Replace the ‘Your header in Here” with your desired Side box header text:

define('BOX_HEADING_EDITABLE_SIDEBOX', 'Facebook');

***This is a php file and MUST be edited in a plain text editor. If you try to edit this file in any type of wysiwyg editor, the code will be corrupted and when you insert the file back into your zen cart it will break your entire site.***

Save the file to your zen cart template override directory. In this case it is Editable_Sidebox_1.0/includes/languages/english/extra_definitions/andover_modern

2. Copy the file Editable_Sidebox_1.0/includes/templates/template_default/sideboxes/tpl_editable_sidebox.php to your zen cart template override directory Editable_Sidebox_1.0/includes/templates/andover_modern/sideboxes/tpl_editable_sidebox.php

3. Upload the includes directory of the module package to your server.

A. Connect to your web host via ftp using Filezilla. Enter the address of the server, your username, password, and port if needed into the host field of the Quickconnect bar.

filezilla Zen Cart Tutorial:  How to Add a Facebook Page Fan Box to Zen Cart

B. Once you are connected find the directory on your local machine where you unzipped the module package in the right side of window and find your store root directory on your web host in the left side of the window .

filezilla 1 Zen Cart Tutorial:  How to Add a Facebook Page Fan Box to Zen Cart

C. Drag the includes directory and drop it in the folder above the includes folder of your store root directory.

filezilla 2 Zen Cart Tutorial:  How to Add a Facebook Page Fan Box to Zen Cart

You have successfully uploaded the module package files!

4. Log into your zen cart admin and go to Admin -> Tools -> Layout Boxes Controller.

If you have installed the sidebox package properly you will see this warning:

Find the sidebox in the list and click on the green “e”.

Click on Left/Right Column Status: “On”, Location: (Single Column ignores this setting) “Left”, enter your Left/Right Column Sort Order , and then click on “Update”.

Get the Facebook Code

1. Log into your Facebook account and go to your Facebook Fan Page. Click on “Edit”.

2. Click on “Marketing” in the left hand navigation. “Click on Add a Like Box to your Website”.

3. Enter the url for your Facebook Fan Page, the width of your sidebox, and then click “Get Code”.

4. In the pop up window, copy the iframe code (the top box) and click on “Okay”.

Back to Your Zen Cart Admin

Log into your zen cart admin and go to Admin -> Tools -> Define Pages Editor.

Select the define_editable_sidebox_content.php from the pull down menu. Make sure that plain text is selected in the editor pull down.

Delete everything that is in the box and paste the code that you copied from the Facebook site, then click on “Save”.

All finished!

This is one in a series of planned tutorials about customizing the look of your zen cart store.

If you need help customizing your zen cart template, please contact us for a quote.

equation Zen Cart Tutorial:  How to Add a Facebook Like Box to Zen Cart