Adding Facebook Comments using Razor in DotNetNuke

The other day I posted on how to add the new Facebook Comments to your DotNetNuke website. This worked okay for basic modules that only had one content display, but for a module like DNNSimpleArticle this didn’t work well as the URLs for each article didn’t come across as individual URLs because of the way the Facebook code is formatted. When displaying the Comments I also only wanted to show them on individual articles, not on the main article listing.

There is actually a pretty easy fix though, a number of options, you could write a very simple module to do this, you could embed some of this into your Skin, or the method I chose. I wanted to make this work using Razor with the new Razor Host module in DotNetNuke 5.6.1.

For instructions on how to get the Razor Host module installed you should watch the following Video.

You can also watch a brief video showing you some of the included Razor scripts.

What I wanted to do with a custom Razor script was two fold.

1. I wanted to only show the comments when we were displaying an Article in DNNSimpleArticle, which in this module’s case would mean there was a querystring parameter being passed in the URL (aid)
2. I wanted to have the comments be specific to the article, not to all articles in the module, so I needed to customize the URL for the comments code.

Using Razor this was easy to do. Here’s the code

   1:  @{ 

   2:      object o = this.Request.QueryString["aid"];

   3:      if(o!=null)

   4:      {

   5:          var currentPath = this.Request.Url; 

   6:          <div id="fb-root"><!--</span-->div>

   7:          <script src="http://connect.facebook.net/en_US/all.js#appId=208682599147341&xfbml=1"><!--</span-->script>

   8:          <fb:comments href="@currentPath" num_posts="5" width="600"><!--</span-->fb:comments>

   9:      }

  10:  }

  11:   

The first line starts off the Razor script. Line 2 reads a querystring parameter. Line 3 checks to see if that parameter had a value. Line 4 gets the current URL. Line 6 through 8 writes out the Comment script provided by Facebook with the currentPath argument passed in. Line 9 and 10 close out the if statement and the razor script.

To get this to display I setup the Razor Host module to be visible to all users on the site, but I end up hiding the container for the module. You can see this in action on an article I have posted over on SCCAForums.com

Update: You can find a video of this blog post in the Video Library