Skip Ribbon Commands
Skip to main content

Using Disqus with SharePoint 2013

 

Brian Jones

15/05/2015

​When creating a blogging site for Fuse Collaboration we did not want to use the out of the box SharePoint blog templates for reasons discussed in a later blog.

I decided instead to use a publishing site for blogging with a publishing page per blog post.

I needed to find a solution which would allow vistors to comment on our blogs which was easy to implement, secure and prevented spam. For this solution I turned to Disqus.

https://disqus.com/ 

You can create an account on disqus and connect your blog to disqus. The benefits of this are that disqus prevents spam by requiring users to login using a Disqus, Facebook, Google or Twitter account.

Site administrators can then manage comments from the diqus website.

Disqus provides many other features and tools that I won't go into in this blog.

When disqus is added to your SharePoint page it provides a nice user friendly interface for viewing and adding comments.

Disqus.PNG 

You can also embed your comment count into SharePoint display templates so that you can see the comment count next to posts in your search results.

DisqusComment.PNG 

This blog explains how we added Disqus to our blog site and will hopefully help you achieve the same results.

The Blog Post Page

The first thing you want to do is create a Disqus account, log in and register your site. Once you have done that click on the cog in the top right hand corner and select Admin, click on the Settings tab and click on the Install link which is in the top right.

On the Choose your platform page select Universal Code, you will need this code so keep this page open.

Return to your SharePoint site. 

To add the disqus to your blog post page you have a couple of options. You can either put the code within your Page Layout as I did or you can use a content editor webpart.

 Locate the code in Step 1 and copy/paste that into the script editor in the cotent query webpart.

Thats it!

The comments window will now appear on your page and can be used.

 

The Display Template

Adding the comments count to the display template was a little more difficult than adding the comment box to the blog post page.

Open your display template in a text editor and where you want the comment count to appear add the following line.

<a href="_#= ctx.CurrentItem.Path =#_#disqus_thread"></a>

 

Save and publish the display template

On the page where you will be using this display template add a content editor webpart and edit the HTML source. In the HTML source window add the following script, replacing websiteshortname with the shortname of your site as shown on the disqus web site.

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'websiteshortname';
   
    /* * * DON'T EDIT BELOW THIS LINE * * */
    window.onload = function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    };
</script>

This script is a slight amendment to the script provided in step 1 of the how to display comment count section of the disqus page you should have open in another tab/window. For this reason you could copy that code and amend it slightly adding the windows.onload = and removing the extra ().

If you have any questions or require more details then feel free to leave a comment.

 

 


 About us

Fuse Collaboration Services is a Cloud Solution Provider and Microsoft Gold Partner specialising in delivering SharePoint, Skype for Business, and Azure cloud-based solutions. Based in Northampton, UK.

Microsoft Gold Partner Logo showing 5 competencies

Read more

 Latest Tweets

 Latest Blog

 

 

Get single sign-on for all apps3995<p class="lead">​​​Are you looking for an identity-as-a-service (IDaaS) solution that solves your biggest IT challenges without compromising user experience?</p><p class="lead">With Azure Active Directory, the Microsoft IDaaS solution, you can streamline the employee experience with single sign-on capabilities and reduce the complexity of managing identity, security, and access to your company’s critical data. You get a proven solution that allows you to&#58;​</p><hr />​ <div class="lead"><div class="row"><div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image004.png" alt="" />​ ​ <div class="media-body">​​Quickly adopt cloud services​</div></div></div>​ <div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image006.png" alt="" /> <div class="media-body">Improve application security</div></div></div>​ ​</div>​ <div class="row"><div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image008.png" alt="" /> <div class="media-body">Empower employees with access to world-class cloud apps</div></div></div><div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image010.png" alt="" /> <div class="media-body">Monitor application usage and protect your business</div></div></div></div>​ <div class="row"><div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image012.png" alt="" /> <div class="media-body">Easily and securely manage employee and vendor access</div></div></div><div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image014.png" alt="" /> <div class="media-body">Secure remote, mobile access to on-premises apps</div></div></div>​ </div><div class="row"><div class="col-md-6">​ <div class="media"> <img class="img-responsive pull-left" src="/ourblog/Blog%20Site%20Images/image016.png" alt="" /> <div class="media-body">Implement consistent, self-service application access management</div></div></div>​​​ </div></div><hr /><p class="lead"><a href="/_layouts/15/FIXUPREDIRECT.ASPX?WebId=4fc45909-2b6d-48b9-bcf9-a446e9d472d6&amp;TermSetId=c98895cd-d37f-4406-9cff-5480b4f829b6&amp;TermId=218eb0be-10f6-490a-82a7-a7fd47c8de90">Contact Fuse</a> to discuss how we can help implement IDaaS within your organisation, using our expertise and experience to reduce risk and project length.​</p> <div class="well well-lg"><p class="lead">Are you curious about how Azure Active Directory can work for you? <a href="/_layouts/15/FIXUPREDIRECT.ASPX?WebId=4fc45909-2b6d-48b9-bcf9-a446e9d472d6&amp;TermSetId=c98895cd-d37f-4406-9cff-5480b4f829b6&amp;TermId=721159e3-34c0-40dc-8028-ae2e2f2e79e4">Let us show you how​</a>!​</p></div>​​a.walman@fusecollaboration.com | Andrew Walman | 693A30232E777C6675736563735C612E77616C6D616E i:0#.w|fusecs\a.walman17/01/2018 00:00:002018-01-17T00:00:00Zno matter where they liveAzure Active Directory, the Microsoft IDaaS solution22/02/2018 00:16:142680htmlFalseaspx

 Contact us

Our address
12 Brookfield, Duncan Close
Moulton Park, Northampton
NN3 6WL
P: +44(0)1604 797979
Contact Us