You have probably seen websites using Facebook comments directly on their site. Well, now you can do the same thing with Zap Calendar event pages.  This tutorial will explain how to configure Zap Calendar to allow users to comment on events on your website using their Facebook accounts. There are a couple of advantages with this option:

• Each event can have its own comment stream.
• Users do not need to be logged in or even have an account on your site, they just need to be logged in to their Facebook account.
• This technique is available for ALL versions of Zap Calendar (Basic, Standard and Pro).
• No additional 3rd party add-ons are needed.

There are also some limitations to this implementation:

• A Facebook account is required.
• There is no "recent comments" view showing recent comments from multiple events.
• Users logged into your site cannot comment unless they are also logged in to their Facebook accounts.
• Some customization of Zap Calendar (and possibly your Joomla template) is required.
• This method does not work when using sh404SEF

This tutorial requires Zap Calendar 4.0.14 or higher.

For an example of a Zap Calendar site using Facebook comments, visit http://www.OriolesMagic.com and look at any of the events on the calendar.

If these limitations are a hurdle for you, you may wish to consider the comment plugin included in the Pro version of Zap Calendar.  Also, there is the Joomla extension FBConnect that can synchronize Facebook accounts with accounts on your Joomla website, which can be used in conjunction with Zap Calendar.  Zap Calendar also provides support for JomSocial and Community Builder logins.

If these limitations are not a hurdle, then read on for the tutorial.

Step 1: Create a Facebook App

You will need a Facebook login in order to create a Facebook app for your Zap Calendar site (doesn't everyone have one?).  Once you are logged into Facebook, visit the app page at this URL:

https://developers.facebook.com/apps

From this page, you should see a button in the upper right corner named "Create New App".  Once you have clicked this button, a dialog box will appear to create your app:

Create a name for your app.  The App Namespace is used to create a simplified URL of your app in Facebook.  For example, with this app, we have created the namespace "my_calendar_app", so the Facebook URL will be http://apps.facebook.com/my_calendar_app .

Once you have clicked on the "Create App" button, your app will be created.  You will see an additional page of information you can enter, like your e-mail address and your site's domain name.

You now have created a Facebook app!  You are done with step 1.  Now, on to step 2.

Step 2: Configure Zap Calendar

In this step, we will configure Zap Calendar to support comment streams.  The first step is to get the comment code from Facebook.  This code will be added to the event page.   Fortunately, Facebook has made it easy for us. Visit the social apps Facebook page here:

https://developers.facebook.com/docs/plugins/

Look for the comments app on this page.  Click on the comments app to see more information about it.  On that page is a wizard that helps create the code needed for your website:

From this wizard, enter the URL for your site.  Actually, any URL will work here since we will change it later.   Change the other options if needed and click on the "Get Code" button to see the comments plugin code.

You will have 2 choices to select from.  You can choose the HTML5 plugin code, which is supported by recent browsers, or you can choose the XFBML plugin code, which is supported by both new and older browsers.  The HTML5 plugin is recommended.  For the HTML5 plugin code, there are two sections: the Javascript SDK section and the plugin code section.  For XFBML, there are three sections: the JavaScript SDK section, the XML namespace section and the plugin code section.  The sections below will show where this code is entered on your website.

JavaScript SDK Section (for both HTML5 and XFBML)

This section of code needs to be on the top of every page where comments are displayed. There are two ways to do this.  One way is to manually edit your template's index.php file and add the code right after the <body> tag.  If that sound too squeemish for you, the other option is to create a custom HTML module and place the code in there.  If this is done, put the module near the top of the page and disable the title (since the will display a blank box anyway).  Also, you will need to have your Joomla editor set to text mode to copy this HTML code into the module.  If you don't have a Joomla editor that can do this, then set your default editor to "none" and paste the code that way.  Once the module is saved, you can change your default editor back to its original setting.

XML Namespace Section (for XFBML only)

There is no way around this, you will need to manually edit your template's index.php file.  You will need to edit the <html> tag, which is at the top of the file.  Look at the instructions for further information.

Plugin Code Section (for both HTML5 and XFBML)

This is the code that actually puts the comment box on the event page. Zap Calendar customization allows you to modify the event page without losing your changes after a Zap Calendar upgrade.  The event page will be found in the file "showevent.tpl" found in the "components/com_zapcalendar/forms" folder.  Don't edit this file directly.  Instead, copy it to the filename "showevent.frm" in the same folder and edit that file.  This will allow you to modify the file and not lose the changes after an upgrade (the ".tpl" file will be updated, but not the ".frm" file). Paste this code into this file just above the bottom "</div>" in the file.  You will need to make one change in the code.  Change your hostname next to "data-href" (http://zcontent.net in our screenshot) to "[url]".  So, it will look like this:

data-href="[url]"

This will insert the current event's URL into the comment settings.  This allows each event to have it's own comment section.

If you are adventurous, you can customize the page even further, perhaps placing the comment box in one column of a two column event display. Remember, if you don't like the customization, you can copy the ".tpl" file to a new ".frm" file to start over.

That's it, your site should now display a separate comment box for each of your events.

Step 3: More Options

Now that you have Facebook comments for you events, you may wish to consider installing the Zap Calendar Facebook Like plugin or Social Like plugin.  These plugins, available with Zap Calendar Standard and Pro, places a "Like" button at the top of each event page and complements the Facebook comment box on the same page.