Facebook Comments

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

This article will provide detailed information on how to add Facebook Comments to your site. In order to add a Facebook Login/Link button to your site see Facebook Login Integration .

Obtaining the plugin code

To insert social media modules into your Business Catalyst site you will first need to complete the following prerequisites:

1. Go to developers.facebook.com  and search for the facebook module that you want to add to your site (Example: Like button/Comments/Feed/Send)

2. Type in your site's URL and then get the appropriate code for the module using the Get Code button


3. From the Plugin Code window that appears copy the contents from both sections 1 and 2.

4. Access the administration console of your Business Catalyst website and go to File Manager > Module Templates > Social Media.  From here, open the FacebookComments folder:

 

5. Within the template folder, you will find a sub folder named Default. Open this folder and then double click container.html. Insert the code you copied from the Facebook plugin code window into this page and select Publish. (Remember to copy over the code from both sections 1 and 2 from the Plugin Code box).

Note: This is a one time operation that you need to set up so that you can use the appropriate facebook module. You are not required to repeat it each time you insert a social media module into one of your layouts/webpages.

6. Change your site's URL with the {tag_url} tag. The code you pasted should look like this:

You should change the site's URL from "http://bcrb.tk" to "{tag_url}", this is what your code should look like:

How to insert social media modules in layouts

You can encourage social media sharing within your community and raise the visibility of site content across the web by adding Social media modules to your site.

You can display the social media features on web pages and templates as well as within modules such as Blogs, Web Apps and Bookings. Inserting these features in all modules is a similar process and for the purpose of this article we will look at Blogs as an example.

From within the admin of your site, navigate to Site Manager > Module Templates. In the page that appears, select the Blog Layouts.

A list of the blog layouts is presented. Select the desired layout; usually the social media button is added to the Blog Post Details Layout, so that it appears when a visitor clicks on a link to view an individual blog post. You can however add the Like button to other layouts, if desired.

Once you have opened the layout you would like to add the button to, simply insert the relevant module. Refer to the sections below for details on specific modules.

Adding Facebook Comments to your site

The first step in adding a Facebook Comments button is to obtain the code for the plugin by using the steps available here.  For step 5 open the FacebookComments folder and customize the container.html file available under it.

The Facebook Comments module will output a Facebook Comments field as shown below:

To add Facebook Comments to your Blog posts, Products or Web Apps open up the relevant layout and then insert the Social Media module from the Toolbox:

The {tag_itemurl_withhost} will use the full URL of the module item, for example http://mysite.com/module-url. The {tag_itemurl_nolink} will generate a relative URL for the module, for example /module-url

This will now allow customers to post comments on your site content using their own profile including the Facebook profile image. This is not integrated with the admin so moderation is not set from within the admin.

For additional information on Facebook Comments, refer to the Facebook Comments FAQ .

Moderating Facebook Comments

To allow front end or admin users to moderate comments, you will need to add the below meta tag in your web page or site-wide templates, inside the <head> tag:

Where FACEBOOK_USER_ID is the actual ID of the Facebook user account. There are two ways in which you can find a Facebook ID:

  1. The URL of the Facebook account will be similar to - http://www.facebook.com/profile.php?id=100000000000 where the numbers preceding the id= will be the actual ID.
  2. The URL of the Facebook account will be similar to - http://www.facebook.com/username. In this case, you will need to copy the username and then enter the following URL in your web browsers - https://graph.facebook.com/username (replace username with the actual Facebook username). Here you will see the ID of this account. Copy this ID and place it within the above meta tag.

To add multiple moderators, separate the IDs by comma without spaces, e.g:

Once moderation is enabled, a moderator can go to the comments list and will have moderation options.

Customizing the Facebook Comments module

The Facebook comments module can be customized by adding parameters to the module, for example:

See below explanation of the available parameters:

Parameter Description Values
moduleTemplateGroup This will specify a module template group, which is a folder located in FTP under /ModuleTemplates/SocialMedia/FacebookComments/. This will default to the Default module template if the parameter is not present (corresponding to FTP folder /ModuleTemplates/SocialMedia/FacebookComments/ Default). Any existing Folder in the /ModuleTemplates/SocialMedia/FacebookLike/ directory
locale This is the language output of the module. If the parameter is not present, this will default to en_US Facebook locales ISO language and country codes combined by an underscore
url This parameter is required and the module will fail without it. Any Valid URL
posts This is used to set the maximum number of posts to display. If the parameter is not present, this will default to 10. Positive integers
width If the parameter is not present, the default value will be 450 Any positive integers
colorScheme If the parameter is not present, the default value will be light light, dark

Module Templates

You can further customize this module by modifying the HTML mark-up using the concept of Module Templates. Module Templates are files found within FTP that can be modified to customize your comments look and feel. These module templates can be found in the /ModuleTemplates/SocialMedia/FacebookComments/Default folder via FTP or the file manager.

Multiple templates can be used for a single button in different areas of the website. This is done by creating sub-folders within the /ModuleTemplates/SocialMedia/FacebookComments/ directory, for example if you wanted to create a second template called 'Side-comments', this will be created as below:

/ModuleTemplates/SocialMedia/FacebookComments/Side-comments/

This folder must contain the same file(s) as that found in the Default folder. The available tags that can be used in the Facebook like module templates are as below:

{tag_locale} Locale
{tag_url} Facebook social plugin comments thread URL
{tag_posts} Facebook social plugin maximum number of posts
{tag_width} Facebook social plugin width
{tag_colorscheme} Facebook social plugin color scheme