Responsive Facebook Comments

Introduction

Responsive Facebook Comments is a complete Joomla extension package that includes two plugins for integrating Facebook's official Comments widget into your Joomla website. This package provides both automatic display on articles and flexible shortcode-based placement, giving you complete control over Facebook Comments integration.

Content Plugin: Automatically displays Facebook Comments after article content. Perfect for blogs, news sites, and content-driven websites.

System Plugin: Insert Facebook Comments anywhere using shortcodes {rfbcomment}width{end-rfbcomment}. Perfect for custom layouts, modules, or specific placement needs.

Both plugins work together seamlessly and share the same Facebook SDK, ensuring optimal performance. This documentation covers installation, configuration, and usage of both plugins.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: plg_rfbcomment.zip

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete. The package includes both plugins:

• Content - Responsive Facebook Comments: Automatically displays comments on articles
• System - Responsive Facebook Comments: Shortcode-based comments placement

Enabling the Plugins

After installation, navigate to Extensions > Plugins:

• Search for Content - Responsive Facebook Comments and enable it for automatic article comments
• Search for System - Responsive Facebook Comments and enable it for shortcode support

You can use both plugins together or choose the one that best fits your needs.

Content Plugin Settings

Content Plugin Configuration

The Content Plugin automatically displays Facebook Comments after article content. Configure it by navigating to Extensions > Plugins > Content - Responsive Facebook Comments.

Moderator Settings

• Number of Posts: Set how many comments to display by default (1-100).
• Moderating Using: Choose between User ID or App ID moderation.
  • User ID: Use Facebook User IDs for moderation (one per line, numeric only)
  • App ID: Use Facebook App ID for app-based moderation
• App ID: Enter your Facebook Application ID (numeric only, visible when App ID is selected).
• User ID: Enter Facebook User IDs (one per line, numeric only, visible when User ID is selected).

Manage Contents

• Excluded Categories: Select categories where comments should NOT appear.
• Exclude Views: Select views to exclude (Featured, Blog, Category).
• Exclude Article ID(s): Enter article IDs to exclude (one per line).
• Padding: Set padding around comments widget (default: 10px 0).
• Margin: Set margin around comments widget (default: 0 0).
• Width: Set width of comments widget (default: 100%).

System Plugin Settings

System Plugin Configuration

The System Plugin allows you to insert Facebook Comments anywhere using shortcodes. Configure it by navigating to Extensions > Plugins > System - Responsive Facebook Comments.

Plugin Settings

• Number of Posts: Set how many comments to display by default (1-100).
• Padding: Set padding around comments widget (default: 0px 0px 0px 0px).
• Margin: Set margin around comments widget (default: 10px 0).

Moderator Settings

• App ID: Enter your Facebook Application ID (numeric only) for app-based moderation.

Using Shortcodes

Insert Facebook Comments anywhere using the shortcode syntax:

{rfbcomment}width{end-rfbcomment}

Shortcode Examples

• Full Width: {rfbcomment}100%{end-rfbcomment}
• Fixed Width: {rfbcomment}800px{end-rfbcomment}
• Default Width: {rfbcomment}{end-rfbcomment} (uses 100% if empty)

Where to Use Shortcodes

• Articles: Add in article content (HTML view)
• Modules: Add in Custom HTML modules
• Custom HTML: Use in any content area
• Templates: Add in template overrides

Note: You can add multiple shortcodes on the same page with different widths. The SDK will only load once.

Facebook App Setup

Creating a Facebook App

To use Facebook Comments with moderation features, you need to create a Facebook App:

1. Go to https://developers.facebook.com/apps/
2. Click "Create App"
3. Choose "Business" as the app type
4. Fill in your app details
5. Add "Facebook Login" product
6. Configure OAuth Redirect URIs with your website URL
7. Copy your App ID from the dashboard

Getting Your Facebook User ID

To use User ID moderation (Content Plugin only):

1. Visit: https://www.facebook.com/help/contact/571927962448809
2. Or use Facebook's Graph API Explorer
3. Your User ID is a numeric string

Configuring App Settings

• Add your website domain to "App Domains"
• Add your website URL to "Website" field
• Configure privacy policy and terms of service URLs
• Submit your app for review if needed

Accessing Moderation Dashboard

Once configured with App ID, access Facebook's moderation tool:

• App-based: Go to https://developers.facebook.com/tools/comments
• Page-based: Click the "Moderation Tool" link next to the comments box

Features

Key Features

Two Integration Methods

• Content Plugin: Automatically displays comments after article content
• System Plugin: Insert comments anywhere using shortcodes
• Use both together or choose the one that fits your needs

Facebook Comments Integration

• Native Facebook Comments widget with Facebook SDK v18.0
• Fully responsive design that adapts to all screen sizes
• Real-time comment synchronization with Facebook
• Proper FB.init() and FB.XFBML.parse() implementation

Moderation Control

• App ID moderation for app-based moderation dashboard
• User ID moderation for direct moderator assignment (Content Plugin)
• Support for multiple User IDs for team-based moderation
• Access to Facebook's built-in moderation tools

Customizable Display

• Control number of posts displayed (1-100)
• Custom width settings (pixels or percentage)
• Padding and margin customization
• Light and dark color schemes

Advanced Features

• Category and article exclusion (Content Plugin)
• View exclusion controls (Featured, Blog, Category)
• Shortcode flexibility (System Plugin)
• Multiple instances support (System Plugin)
• SEO friendly with proper Open Graph meta tags
• Security enhanced with XSS prevention and input validation
• Performance optimized with single SDK load
• Joomla 4, 5 & 6 compatible

FAQ

• What's the difference between Content Plugin and System Plugin?

  • Content Plugin automatically displays comments after article content. System Plugin uses shortcodes to place comments anywhere you want.

• Can I use both plugins together?

  • Yes, both plugins can be used together. They share the same Facebook SDK, so there's no performance penalty.

• How do I get a Facebook App ID?

  • Create an app at https://developers.facebook.com/apps/ and copy the App ID from the dashboard.

• What's the difference between App ID and User ID moderation?

  • App ID moderation allows multiple moderators through Facebook's app dashboard. User ID moderation assigns specific Facebook users as moderators (Content Plugin only).

• How do I use shortcodes?

  • Add {rfbcomment}width{end-rfbcomment} where you want comments. Replace 'width' with your desired width (e.g., 100%, 800px).

• Can I exclude specific articles from showing comments?

  • Yes, use the "Exclude Article ID(s)" setting in Content Plugin and enter article IDs one per line.

• Why aren't comments appearing?

  • Check that the plugin is enabled, verify exclusion settings, ensure you're viewing the correct page/article, and check browser console for errors.

Troubleshooting

• Comments Not Displaying: Ensure the plugin is enabled, check exclusion settings (Content Plugin), verify shortcode syntax (System Plugin), ensure you're viewing the page (not editing), check browser console for JavaScript errors, and verify Facebook SDK is loading properly.
• Shortcode Not Working: Check that you're using the exact syntax {rfbcomment}width{end-rfbcomment}, ensure you're in HTML view (not WYSIWYG editor), verify System Plugin is enabled, and check for typos in the shortcode.
• Moderation Not Working: Verify your App ID or User ID is correct (numeric only), ensure your Facebook app is properly configured, and check Facebook's moderation dashboard.
• Styling Issues: Check padding, margin, and width settings. Verify CSS values are valid (e.g., '10px', '100%').
• SDK Loading Errors: Check browser console for errors, verify internet connection, ensure Facebook's servers are accessible, and check for ad blockers that might block Facebook scripts.
• Comments Not Syncing: Facebook Comments sync automatically. If comments don't appear, wait a few moments and refresh. Ensure your website URL matches your Facebook app configuration.
• Multiple Shortcodes: All shortcodes on the same page use the same plugin settings (posts count, padding, margin). Each can have a different width specified in the shortcode.