Adding Disqus comments on pages

There are several ways to add Disqus comments on pages:

Disqus comments as a shared block
Disqus comments as a dynamic content
Adding Disqus comments in rendering areas
Disqus comments block as a content property

Disqus comments as a shared block

New shared block called Disqus comments is created automatically in the root of global block folder when add-ons are installed on a site. Select a page where you want to enable comments. This page should has content area or XHTML property where comments can be added. Drag comments block and drop it on content area or in XHTML editor on the page. Publish the page when you are done.

EPiServer 7.1 CMS allows blocks personalization and you can define whether comments should be available for everyone or for certain visitor groups.

Disqus comments as a dynamic content

Dynamic content is supported only in EPiServer 7. Use blocks on later EPiServer versions.

Click on Dynamic content button when editing a content in rich text editor. Select “Disqus comments” in the list of available dynamic content types.

Note that you can use visitor groups to decide who should see comments added as dynamic content. Click Ok to add dynamic content and publish.

Adding Disqus comments in rendering areas

Placing Disqus as shared block or dynamic content works fine when you need to add discussions on individual pages. However, you probably need more convenient way to enable comments on certain page set. For example, you may want to enable comments on all posts in your corporate blog.

It can be achieved by listing certain rendering areas that are defined in your templates. Disqus comments will be rendered in these areas automatically.

This is a recommended way if you as a developer need full control of discussion rendering. Just use rendering areas as placeholders. In the same time, it does not require referencing add-on assembly in your project.

In order to enable discussions on all blog posts you need to add rendering area in blog post template, most probably after rendering the main post content.

MVC example

@Html.Raw(Html.RequiredClientResources("BlogPostComments"))

Web Forms example

<EPiServer:RequiredClientResources RenderingArea=" BlogPostComments" runat="server" />

The name of this rendering area should be listed in Disqus settings.

Adding Disqus comments in rendering areas

Disqus comments block as a content property

You can use Disqus comments block as a property in your content types and render it in the template explicitly.

Install Duk.EPiServer.Disqus package from Visual Studio if you are running EPiServer 8 or later version.

Reference Duk.EPiServer.Disqus assembly in your project if you are running EPiServer 7.x

Add CommentsBlock as a property in the content type.

using EPiServer.Core;
using EPiServer.DataAnnotations;
using Duk.EPiServer.Disqus.Models;

namespace EPiServer.Templates.Alloy.Models.Pages
{
    [ContentType(GUID = "D68452FF-7F22-4F48-ADBF-D5BA9F9F8C58")]
    public class CommentPage : SitePageData
    {
        [CultureSpecific]
        public virtual XhtmlString MainBody { get; set; }

        public virtual CommentsBlock CommentsBlock { get; set; }
    }
}

Render this property in corresponding content template.

MVC template

@using EPiServer.Templates.Alloy
@model PageViewModel<CommentsPage>

@{ Layout = "~/Views/Shared/Layouts/_LeftNavigation.cshtml"; }

<h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1>
<div class="row">
    <div class="span8 clearfix" @Html.EditAttributes(x => x.CurrentPage.MainBody)>
        @Html.DisplayFor(m => m.CurrentPage.MainBody)
    </div>
    @Html.PropertyFor(x => x.CurrentPage.CommentsBlock)
</div>

Web Forms template

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/MasterPages/LeftNavigation.Master" AutoEventWireup="false" CodeBehind="CommentPageTemplate.aspx.cs" Inherits="EPiServer.Templates.Alloy.Views.Pages.CommentPageTemplate" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server"> 

    <EPiServer:Property CustomTagName="h1" PropertyName="PageName" runat="server" />

    <div class="row">
        <EPiServer:Property PropertyName="MainBody" CustomTagName="div" CssClass="span8 clearfix" runat="server" />
    </div>   

    <EPiServer:Property PropertyName="CommentsBlock" runat="server" />

</asp:Content>

Result looks like this:

Dmytro Duk