Using Facebook Comments with LightCMS

Most of you likely already know that Facebook offers a handful of social plugins which can be used to integrate Facebook's functionality with your own website. One of the most intriguing of these plugins is the Facebook Comments Plugin. With Facebook Comments your site visitors can leave comments on your website just as if they were commenting on Facebook.

There are a host of pros and cons for using Facebook Comments and we're not going to debate them all here today. I will just say that, in my opinion, the biggest thing Facebook Comments has going for it is the fact that when users leave comments on your site, those comments are, by default, posted back to their Facebook profiles. This means those users' friends will see stories in their news feeds with their friends' comments and links to the posts on which they left the comments. Plus, if their friends leave comment replies within Facebook, those comments are cross-posted back to your blog as well. This feature alone creates the potential to greatly expand the reach of your blog posts and the interactions that happen on your blog.

Integrating Facebook Comments with LightCMS

Facebook provides many tools for developers to use when integrating their social plugins. For the purposes of this tutorial, we are going to cover the most basic approach to integrating Facebook Comments with LightCMS.

Set Up a Blog Detail Page

You will want to create a page on your site to function as your blog's detail page. This should be a hidden page and its only purpose will be to serve as the "framework" onto which the system will display your blog posts. You will then want to create a separate blog detail template that you will apply to this page.

Set Your Blog Element to Use Your Blog Detail Page

Once your blog detail page is set up with your blog detail template applied, you need to tell your blog element to use this blog detail page for blog post display. You do this by visiting the blog element settings -> advanced tab and looking for the "Detail Page" selector. Choose the page you just set up and save your changes.

Once this is complete, any changes you make to your blog detail template should be reflected on the detail pages of every blog post.

Disable Built-In Comments on Your Blog Element

While you're editing the settings for your blog element, go ahead and visit the "Basic" tab and uncheck the box that says "Let people comment on my posts." This will turn off the built-in comment system. You can technically still use the built-in comment system in addition to Facebook comments, but in most cases, disabling the built-in comments is probably a good idea.

Add the Facebook Comments Code To Your Blog Detail Template

The final step is adding the Facebook Comments code to your blog detail template. You'll most likely want to add this code directly below the MainContent region. To get the code you need, you can visit Facebook's reference page for the Comments social plugin. There you can enter the URL to comment on (see more on this below), the number of posts to show at once, the width of the plugin and the color scheme (you have a choice of "light" or "dark"). Facebook will then provide you with a snippet of code you can paste right into your template where you want the plugin to appear.

Replace the URL with LightCMS's URL Token

One little tweak to Facebook's generated code is needed. In order to be able to use the plugin code across multiple blog posts and/or pages, you need to replace the URL used in the code with LightCMS's dynamic URL token. 

Look in the code Facebook provided you for the following:
data-href="example.com" 

and change it to:
data-href="<$url stripQueryString="true" /$>"

The "stripQueryString" attribute is needed because Facebook treats every URL, even URLs with different query strings, as separate entities. So, comments left on http://example.com would be separate from comments left on http://example.com?x=1 and the like. To ensure all comments left on your post are grouped together and visible whether query strings are used or not, our URL token provides the option to remove all query strings when outputting the current page's URL.

Taking It Further

The above is all that is necessary to get comments running on your site, but there are a lot more settings and features you can play with as well. Continue reading down Facebook's reference page and you'll find information about how to set yourself up for moderating comments and controlling other aspects of the plugin.

Also, you might want to look into implementing open graph tags on your blog pages as well. These tags can shape and improve the way your content is rendered on Facebook when your pages are shared or commented upon. For details on how to do this, see Facebook's Open Graph Protocol reference page.

I hope this brief tutorial gives you an idea of how you can integrate Facebook comments with LightCMS. If you have experience using Facebook comments, please share your thoughts in our comments section below.


3 comments (Add your own)

1. Dustin wrote:
Open Graphs are a great idea; however, it's difficult to control the "images" when using LightCMS. For example, the image it is pulling from one of my "Event Listings" is a "spacer" line image instead of the actual image to promote the event. This can't be controlled because the event detail page can not be edited to contain it's own Open Graph tags and there is no token that I know of that can directly specify what image from that particular page should be shown. Any suggestions?

Tue, October 11, 2011 @ 8:55 PM

2. Tim wrote:
Dustin, you are right, and we are looking into to creating a solution for specifying a unique open graph image for each blog post or calendar event or store product. On our own blog, we generally have good success with Facebook grabbing the primary image in our blog post. However, if Facebook is grabbing an image you don't like you can at least tell Facebook what image(s) you want to use for all of your blog posts by including open graph tags in your blog's detail page template. Facebook allows you to specify multiple open graph images that will then be available to the user to select from. It's not an ideal solution but it will at least keep Facebook from using spacers or other unintended images.

Wed, October 12, 2011 @ 10:19 AM

3. Keith Storm wrote:
Cool tutorial. I followed the basic principal and set it up with Disqus instead. Users can use a bunch of networks on there. (http://disqus.com).

Wed, February 8, 2012 @ 3:33 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free