Blog

Posts written in July 2011.

  • Published on
    -
    3 min read

    BlogEngine Disqus Comment Count Fix

    For those of you that have decided to opt out of using BlogEngine’s default commenting system and instead, use Disqus platform will probably encounter a minor issue. The minor issue being the fact that the comment count displayed in within post view doesn’t actually work.

    I needed to make a few modifications to the way Disqus is used within BlogEngine. I have to say that I wasn’t exactly impressed with the way Disqus was setup within the JavaScript code (maybe over-exaggerating). You’ll see what I mean from the Disqus JavaScript code found in “post.aspx” and “page.aspx”:

    <script type="text/javascript">
        var disqus_url = '<%= Post.PermaLink %>';
        var disqus_developer = '<%= BlogEngine.Core.BlogSettings.Instance.DisqusDevMode ? 1 : 0 %>';
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://<%=BlogEngine.Core.BlogSettings.Instance.DisqusWebsiteName %>.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    

    I believe that additional Disqus variable’s should be used, such as:

    • disqus_title - Tells the Disqus service the title of the current page.
    • disqus_identifier -  If this variable is undefined, the page's URL will be used. The URL can be unreliable, such as when renaming an article slug or changing domains, so its recommended using your own unique way of identifying a thread.

    After you have made this change, your JavaScript should look like this:

    <script type="text/javascript">
        var disqus_title = '<%=Post.Title %>';
        var disqus_identifier = '<%= Post.Id.ToString() %>';
        var disqus_url = '<%= Post.AbsoluteLink %>';
        var disqus_developer = '<%= BlogEngine.Core.BlogSettings.Instance.DisqusDevMode ? 1 : 0 %>';
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://<%=BlogEngine.Core.BlogSettings.Instance.DisqusWebsiteName %>.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    

    You may or may not have noticed the “disqus_url” is getting assigned the Post.AbsoluteLink rather than Post.PermaLink. I prefer using the AbsoluteLink since it will output a nice clean friendly URL.

    The next thing we need to do is modify the “PostView.ascx” file found in your themes folder. The line we are looking for is where the Disqus comments link is set.

    <% if (BlogEngine.Core.BlogSettings.Instance.ModerationType == BlogEngine.Core.BlogSettings.Moderation.Disqus)
    { %>
        <a rel="nofollow" href="<%=Post.PermaLink %>#disqus_thread"><%=Resources.labels.comments %></a>
    <%}
        else
    { %>
        <a rel="bookmark" href="<%=Post.PermaLink %>" title="<%=Server.HtmlEncode(Post.Title) %>">Permalink</a> |
        <a rel="nofollow" href="<%=Post.RelativeLink %>#comment"><%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</a>   
    <%} %>
    

    We need to make two changes to the current comments code. Firstly, we need to add an important missing attribute to the anchor tag. The missing tag is the “data-disqus-identifier”. This is recommended practice by the Disqus Developer guide. Secondly, we need to change the “href” attribute to use an AbsoluteLink instead of a PermaLink. The code should now look like this:

    <% if (BlogEngine.Core.BlogSettings.Instance.ModerationType == BlogEngine.Core.BlogSettings.Moderation.Disqus)
    { %>
        <a rel="nofollow" href="<%=Post.AbsoluteLink %>#disqus_thread" identifier="<%= Post.Id.ToString() %>"><%=Resources.labels.comments %></a>
    <%}
        else
    { %>
        <a rel="nofollow" href="<%=Post.RelativeLink %>#comment"><%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</a>   
    <%} %>
    

    From personal experience, I believe it is best to carry out the “post.aspx” and “page.aspx” code changes before moving onto the Disqus platform. If you currently have comments that need to be exported to Disqus, I found this exporter tool really useful. Be prepared to carry out a few Disqus imports to get things exactly right.

  • I needed to implement a message board for users to comment on individual articles stored within my Kentico site. To achieve this, I decided to use a message board. Initially, what I found when I implemented the message board web part to my article template was that submitted comments for individual articles were getting displayed on all other articles.

    In my page I am using two Kentico controls: MessageBoardViewer to output the list of comments and MessageBoard for the comments form.

    <%@ Register Src="/CMSWebParts/MessageBoards/MessageBoard.ascx" TagName="MessageBoard" TagPrefix="cms" %>
    <%@ Register Src="/CMSWebParts/MessageBoards/MessageBoardViewer.ascx" TagName="MessageBoardViewer" TagPrefix="cms" %>
    
    <cms:MessageBoardViewer ID="MessageBoardViewer1" runat="server" Enabled="true" HideControlForZeroRows="false" DisplayOnlyApproved="true" DisplayToRoles="Registered;Paid" ShowForDocumentTypes="NewsSite.News" ZeroRowsText="No Messages in viewer" TransformationName="Community.Transformations.MessageBoard" AlternatingItemTransformationName="Community.Transformations.MessageBoard"></cms:MessageBoardViewer>
    <cms:MessageBoard ID="MessageBoard1" BoardModerated="true" runat="server" BoardUseCaptcha="false" BoardAccess="AllUsers" DisplayToRoles="Paid" BoardOpened="true" BoardRequireEmails="false"  BoardEnableSubscriptions="true" ></cms:MessageBoard>
    

    I came across a fix on the (very informative) Kentico forums whereby a user carried out a where condition on the MessageBoardViewer control to retrieve article comments through the “BoardDisplayName” field:

    MessageBoardViewer1.WhereCondition = 
        String.Concat("BoardDisplayName = '", 
                        CMSContext.CurrentDocument.GetValue("Title"), " (", 
                        CMSContext.CurrentDocument.DocumentNamePath, 
                      ")'"); 
    

    Some of you may not know, the Board Display Name field is also used in the Message board section within CMS Desk.

    Kentico Message Board Admin

    Retrieving comments based on the Board Display Name is in my opinion not the best way. As you can see from the title of my document (above) contains single quotes. This would cause an SQL syntax error (which I did experience).

    To get around this, it is best to query the MessageBoardViewer control using the “BoardDocumentID” field. So the code will be as follows:

    MessageBoardViewer1.WhereCondition = 
        String.Concat("BoardDocumentID = ", 
                        CMSContext.CurrentDocument.DocumentID); 
    

    If anyone knows of a better way of achieving the same thing. Please leave a comment. I am relatively new to Kentico and probably missed a trick!