There's a confusing array of comment or discussion modules available for Drupal. While the core Comment module is functional for a basic website, it does require further work to prevent spam, apply your design style, and adapt for mobile use. This can be avoided by using one of the many social media based comment modules. These modules allow integration of Drupal comments with an existing social media platform. One of the most popular is, of course, Facebook. It's fairly straightforward to setup Facebook Comments on a Drupal website.
Why use Facebook Comments on a Drupal website?
We like the Disqus module integration for comments on Drupal websites at Daymuse. However, it lacks a key value proposition that Facebook Comments offer and that's sharing. Facebook Comments allow (and set by default) users to share their website comments with their friends.
Unless the commenter alters the default setting, any comment on a website will be shared with the commenter's friends along with a link to the relevant page. Their comment and your website may appear in their friend's News Feed. That's a big boon for increasing your website's reach if you have an active audience.
The downside is of course that if you solely use Facebook Comments as your discussion platform on your website (and it may be awkward to use multiple commenting systems), you'll limit your commenting audience to Facebook members. While most internet users do have Facebook accounts—limiting the downside to this requirement—only a subset will willingly comment using their personal identities on public websites. This is the cost of using Facebook as your Drupal website commenting system.
Drupal Facebook Comments Social Plugin Module
Facebook allows developers to integrate a comment discussion thread on webpages by way of the Comments Plugin. The plugin allows Facebook users to comment on webpages using their Facebook account. In addition, the plugin allows the comment (and webpage which was commented on) to be shared to their friends' News Feed.
Facebook's Comments Plugin also contains moderation tools that can be utilized through the Facebook site. There's some customization of how the Comments Plugin will appear on your webpages, too.
This Comments Plugin can be integrated with Drupal by way of a few different Drupal modules. I've tested these modules over the years and have settled on the Facebook Comments Social Plugin module as my go-to solution for Facebook comments in Drupal. The Facebook Comments Plugin and Facebook's APIs change frequently which means ideally Drupal would have a module available that kept pace with the updates. Unfortunately, the Drupal Facebook-related modules tend to be rarely updated. Still, the Facebook Comments Social Plugin module tics the necessary boxes to get Facebook comments running on your site. It will integrate comments with certain Content Types, allow configuration changes, and adjust the appearance of the comments. It provides a basic Facebook commenting solution.
Facebook Comments Social Plugin module configuration
Let's look at the install and setup process for the Facebook Comments Social Plugin Drupal module.
Download and install the module from the Drupal project page for Facebook Comments Social Plugin. There are no dependency modules. In order to create mobile friendly, responsive design comment threads, I'm using the dev version of the module. If you need responsive comment threads, be sure to use the dev version. The stable/suggested version, as of the time of writing, doesn't yet correctly support responsive design or mobile friendly comment threads.
Here's a one-liner for Drush to grab the stable/suggested version:
drush en facebook_comments -yThe dev version I am using in this tutorial is 7.x-1.0-beta2+6-dev. After installing, head to the config page (/admin/config/content/facebook-comments).
Reconfigure the settings options to match your use case. Let's review some of the options and what they mean along with some advice for each.
Color Scheme
The color scheme option allows you to align the display of the comments with the general colors of your Drupal theme.
Light Color Scheme
Most folks are going to stick with the Light color scheme. It looks like the comment threads you've most likely seen. It's primarily white based with a light gray box and a dash of Facebook's blue.
Dark Color Scheme
The dark color scheme is more rarely used—I've yet to run across it on a production Drupal site. A bit of a tangent, but it's a shame that so many websites focus on white color schemes as it's so harsh on the eyes at night. The module's Dark color scheme is great if you offer an inverse or nighttime mode on your site. You could activate the color scheme through some JavaScript alongside your normal nighttime mode activation process.
View mode
The View mode option allows you to set where or when the Facebook comments will display. Most likely you'll want this set to "Full node". This means that the Facebook comments will only display on a full node page (e.g. /node/23). You can also display the comments on Teaser view modes or both Teasers and Full nodes. Rarely do you want to display comments on something like a listing page that has a several node teasers, but it's an option.
Facebook comment plugin width (nodes)
If you've opted for the dev version of the module, now is the time to setup a fluid width to support your responsive design. Despite the help text suggesting a pixel-based width, enter "100%". You'll also want to tic the checkbox just below the width entry: "Fluid Facebook comment plugin width (nodes)".
If you need the comments box to be a static width, set the total pixel width desired for the comment thread area.
Facebook comment plugin width (block)
Follow the same process as you did for the nodes width above for the blocks. This is only relevant if you intend to show Facebook comments within blocks. Leave the default setting if you're not.
Be sure to set the total comment count to display in the block with the "Amount of comments to display (block)" option directly below, too.
If you intend to have mobile friendly Facebook comments through responsive design, you will have trouble displaying them on individual node pages by way of a block. Instead, use the nodes option above.
Facebook App ID
This step is unnecessary if you just want to get started with integrating Facebook comments in Drupal. Later, you can create a Facebook App and then set the App ID here in order to group moderate comments through Facebook itself. Without doing so, comment moderation within Facebook will be more manual and slower, but it's one less thing to get bogged down with while you're just trying to get started.
If you really want to create a Facebook App, you can get started with a Facebook website app (www App). You'll just need the App ID after creation.
Facebook comment default Content Types
Presumably you're adding comments to an existing Drupal website with existing Content Types. Tic each Content Type you wish to have Facebook Comments appear with.
Important: in order for Facebook Comments to appear on existing content, be sure to tic the "Enable Facebook comments on existing content for the selected content types" option. This will process some database updates on save to apply the comments on existing content. The box itself will not remain checked when you revisit the config page.
Enable Facebook Comments Display on Nodes or Blocks
Once you've sorted out your config options, hit save.
Navigate to each content type you've enabled Facebook comments on and their Manage Display option. Be sure the Facebook comments field appears visible for the Content Type.
If you're using Facebook comments in blocks, be sure to navigate to the block configuration page. Set the now accessible block display into a region of your theme.
Similarly, if you're using the Context module to administer block display, be sure to add the newly available Facebook Comments block to the applicable Context display.
Facebook Comments Testing
If you've added comments to existing nodes, navigate to a node of a Content Type you've enabled and verify the comment thread is appearing. If they're not, double check your settings.
Sometimes clearing your Drupal site's cache is needed. If you're still having trouble, we do offer Drupal consulting services.
Facebook Comments in Templates (TPL Files) and Theme
You can control Facebook comments on nodes within a node.tpl.php file. Depending on your theme, the process will vary a bit but generally you control the output of the comments so as to manually display them within a particular section of your node.tpl.php template. Facebook comment styling can also be controlled, somewhat, through your CSS.
If you want to control the output of the Facebook Comments section with your node.tpl.php you can use this code:
<?php if (isset($content['facebook_comments'])): ?>
<div class="clearfix facebook-comment-wrapper">
<?php print render($content['facebook_comments']); ?>
</div>
<?php endif; ?>
This PHP code will give you a good baseline to get started with more advanced control of the Facebook Comments integration on nodes through your template. I've added two unnecessary CSS classes to the wrapping element: clearfix and facebook-comment-wrapper. If your theme has a clearfix class (and most modern ones do, we love Omega for responsive design), this will help set your comments in the right position relative to your content and prevent overlapping sections. Feel free to experiment with removing it. You can use the facebook-comment-wrapper class to apply relevant CSS to the container. Both of these classes are technically unnecessary.
This code will first check to see if the Facebook Comments array value is set and then render them if they are. This should be added to your node.tpl.php if you're manually outputting your fields on your nodes with a template file. Otherwise, the Manage Display field option mentioned earlier should handle the output of Facebook Comments on nodes.
Facebook Comments alternative Drupal Modules
There's more than just the Facebook Comments Social Plugin module to integrate Drupal with Facebook Comments. The Facebook Comments Box module provides similar functionality. However, I ran into some integration issues. Unfortunately, both of the two major Facebook Comments modules for Drupal haven't been update in a long while.
Drupal Facebook Integration Tutorial Series
Integrating Facebook comments on your site can offer great value to your users: if they're already logged in to Facebook, they can quickly comment on your articles and pages. If they wish, they can share the comment (and your page) to their friends, which can help share your content and generate traffic. The downside is of course that it requires your readers to have a Facebook account in order to comment.
Remember, commenting is primarily to help build a community and a running discussion on your website. Think about your users and the type of platforms they're likely on before opting to integrate comments. Facebook comments are best integrated on website that cater to a casual, friendly audience where individual personalities can shine through.
This post is the first in a series on integrating Facebook with your Drupal website. We'll also be working through:
- Drupal Facebook Comments
- Drupal Facebook Login
- Drupal Facebook Feed
- Drupal Facebook Like
Stay tuned for more!
If you're interested in thoroughly integrating Facebook with your Drupal website strategy through professional services, reach out. Think this tutorial is useful? Don't forget to share!