How to Add Live Comment Preview for Subtext Blog Comments

If you even wondered how certain subtext blogs are showing a preview pane when you are writing a comment on a blog post, here is how you can implement that feature on your very own subtext blog.

• Open the Skins.config file located in the Admin folder of your subtext installation in Visual Studio or in a Text editor.
• Locate the SkinTemplate section for your blog skin. In this example, I am using a blog skin called gray.
• If there is a Scripts section already, then just add line 3. Otherwise, add lines 2, 3 and 4. Be careful with case sensitivity.

   1:  <SkinTemplate Name="gray" TemplateFolder="gray">

   2:      <Scripts>

   3:          <Script Src="~/Scripts/LiveCommentPreview.js" />

   4:      </Scripts>

   5:      <Styles>

   6:          <Style href="~/skins/_System/csharp.css" />

   7:          <Style href="~/skins/_System/commonstyle.css" />

   8:          <Style href="~/skins/_System/commonlayout.css" />

   9:          <Style href="~/scripts/lightbox.css" />

  10:          <Style href="print.css" media="print" />

  11:      </Styles>

  12:  </SkinTemplate>

• Save and close the Skins.config file.
• Now open the PostComment.ascx file under the controls folder for the skin in Visual Studio or in a Text editor. In my example, it will be under \Skins\gray\Controls
• Scroll down to the bottom of the page, and paste the following line of code at the location you want to display the Live Preview.

   1:  <div class="comment livepreview"></div>

Depending on how the rest of your comment page is laid out, so as to not break the page rendering on the browser, you may need to enclose this DIV tag in a table row or something else as follows.

   1:  <tr>

   2:      <td colSpan="3">Live Preview

   3:          <div class="comment livepreview"></div>

   4:      </td>

   5:  </tr>

• Next, browse to one of your posts, and click the link to for the comments/feedback.
• Start typing a comment, and you should see the comment in realtime in the Live preview pane.

Troubleshooting the Live Preview Comments implementation.

If you don’t see the live preview, first ensure that the javascript has been included.

• Right click the blog post page, and click View Source.
• Search for LiveCommentPreview.js.
• Copy the full URL for LiveCommentPreview.js file and paste it in the address bar of a new browser window and press enter.
• The LiveCommentPreview.js file should be opened.
• If you get a file not found error, then look closely at the full path to LiveCommentPreview.js and correct it in the location in Skins.config file and try again.