Tutorial: Using a Facebook Comment Box for Events
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.
- Zap Calendar's AJAX mode is not supported, you must use the non-AJAX mode for calendar views using Facebook comments.
- 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.
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.
Note: You must be running Zap Calendar version 3.0.21 or higher to use Facebook comments.
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:
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 "Continue" 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. First, make sure your calendar view in Zap Calendar is set to "Non Ajax" mode (this is a requirement). The next step is to get the comment code from Facebook. Fortunately, Facebook has made it easy for us. Visit the social apps Facebook page here:
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 one of the events on your site (if you have multiple views where you want to include comments, then you would need to run this wizard for each view). At the end of the URL, replace the eid # (event id) with the text "[eid]". This text will be replaced later by Zap Calendar with the actual event id. Change the other options if needed and click on the "Get Code" button to see the comments plugin code.
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.
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. 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 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. This plugin, 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.
If you have repeating events, each event in the repeating series will have a different stream of comments. If you prefer having each event in the repeating series display the same stream of comments, simply modify the URL in the plugin code section by changing the text "[eid]" to "[uid]". The event id, or eid, will be different for each event. The unique identifier, or uid, will be the same for events in the same repeating event series. Zap Calendar will replace the [eid] or [uid] in the code with the appropriate value when displaying the event.