How do I implement Disqus in ASP.NET MVC?

I'm in the middle of specifying the build/buy trade-offs for a public website and have hit a rather interesting avenue.

Background

Part of the design of the website is to incorporate comments against a set of different 'items' which obviously have their own IDss. (i.e. /recipes/23 or equipment/16 etc, etc).

Initially, i had specified a comments system with tags. However, the project sponsor has come back and asked if it would be easy to incorporate Disqus into the mix. I've used this before with Joomla (never in .NET) and think that it'll be a great idea as the comments are automatically distrubuted via the usual social network mediums by default.

Qu开发者_高级运维estion

Is it fairly painless to set up an implementation of Disqus on ASP.NET MVC that works seamlessly? Are there tutorials or examples of a working Disqus solution in ASP.NET MVC? I've seen this example and have read the documentation so far.

---

Aparrently there is a wonderful nuget package for Disqus.

Install-Package Disqus.Helper

And then it's as easy as sticking this in your view, section, or partial view somewhere...

@Disqus {
     Disqus.Initialize("YourForumShortName")
}
@Discus.ShowComments("PageIdentifierOfYourChoice")

http://disqusforwebpages.codeplex.com/documentation

---

I'm electing to use the async JavaScript load approach (as opposed to using the fullblown API methods). here's how simple it is using this in ASPNET MVC (It also works for ASP.NET):

From the documentation:

<!-- add the div to receive the comments via ajax -->
<div id="disqus_thread"></div>

<!-- the required javascript link to disqus -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'mydisqusname';

    // Question pour XWiki : ici il faut que je configure un identifier
    // c'est comme un sujet de Mail. Il faudrait que je mette par exemple
    // l'url de la page XWiki afin que les commentaires soient regroupes

    // ensemble par article. Bref est ce que vous pouvez me mettre un ID ?

    var disqus_identifier = 'comments-league-<%= Html.Encode(Model.ID) %>';
    var disqus_url = '<%= HttpContext.Current.Request.Url %>';
    // using disqus_developer = 1 helps to debug to localhost etc..
    var disqus_developer = 1;


    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';

        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

That's all there is to it.

---

If you are OK with having the disqus branding, the javascript API call is the way to go. If you need to have a deeper integration -- or need to do things like ensure your comments stay with your site -- you might want to check out the little library I wrote called disqussharp -- its a fairly complete wrapper around v 1.1 of the disqus API and can be used for lots of things.

---

Here's a copule of extesion methods that target both Disqus and IntenseDebate:

firstly, the Disqus helper (with a nod to PieterG):

/// <summary>
/// Display Comments for Post
/// </summary>
/// <param name="html"></param>
/// <param name="postIdentifier"></param>
/// <returns></returns>
public static MvcHtmlString DisqusScript(this HtmlHelper html, string postIdentifier)
{
    var commentsBuilder = new StringBuilder();
    var id = Config.DisqusId; // get the Disqus id from config file
    var devMode = Config.DevMode; // get the devmode ('0' or '1') from config file

    commentsBuilder.Append("<div id=\"disqus_thread\"></div>");

    commentsBuilder.Append("<script type=\"text/javascript\">");
    commentsBuilder.Append("var disqus_shortname = '" + id + "';");
    commentsBuilder.Append("var disqus_identifier = '" + postIdentifier + "';");
    commentsBuilder.Append("var disqus_url = '" + HttpContext.Current.Request.Url + "';");
    commentsBuilder.Append("var disqus_developer = '" + devMode + "';");

    /* * * DON'T EDIT BELOW THIS LINE * * */
    commentsBuilder.Append("(function () {");
    commentsBuilder.Append("var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;");
    commentsBuilder.Append("dsq.src = 'http://" + id + ".disqus.com/embed.js';");

    commentsBuilder.Append("(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);");
    commentsBuilder.Append("})();");
    commentsBuilder.Append("</script>");

    commentsBuilder.Append("<noscript>");
    commentsBuilder.Append("Please enable JavaScript to view the <a href=\"http://disqus.com/?ref_noscript\">comments");
    commentsBuilder.Append("powered by Disqus.</a>");
    commentsBuilder.Append("</noscript>");
    return MvcHtmlString.Create(commentsBuilder.ToString());
}

and then the intensedebate version:

/// <summary>
/// Display Comments for Post
/// </summary>
/// <param name="html"></param>
/// <param name="postIdentifier"></param>
/// <returns></returns>
public static MvcHtmlString IntenseDebateScript(this HtmlHelper html, string postIdentifier)
{
    var commentsBuilder = new StringBuilder();
    var id = Config.IntenseDebateId; // get the IntenseDebate id from config file

    // js variables for embedded wrapper script
    commentsBuilder.Append("<script type=\"text/javascript\">");
    commentsBuilder.Append("var idcomments_acct = '" + id + "';");
    commentsBuilder.Append("var idcomments_post_id = '" + postIdentifier + "';");
    commentsBuilder.Append("var idcomments_post_url = '" + HttpContext.Current.Request.Url + "';");
    commentsBuilder.Append("</script>");

    /* * * DON'T EDIT BELOW THIS LINE * * */
    commentsBuilder.Append("<script type=\"text/javascript\" ");
    commentsBuilder.Append("src = 'http://www.intensedebate.com/js/genericCommentWrapperV2.js'>");
    commentsBuilder.Append("</script>");

    // add the target span for the comments
    commentsBuilder.Append("<span id='IDCommentsPostTitle' style='display:none'></span>");

    commentsBuilder.Append("<noscript>");
    commentsBuilder.Append("Please enable JavaScript to view the IntenseDebate comments");
    commentsBuilder.Append("</noscript>");
    return MvcHtmlString.Create(commentsBuilder.ToString());
}

usage in either case:

// for intensedebate
<%=Html.IntenseDebateScript("comments-id-that-i-can-use") %>

//and for disqus
<%=Html.DisqusScript("another-comments-id-that-i-can-use") %>

enjoy...