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:
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.
Posted on Thu, September 22, 2011
by Tim Wall filed under