Blog

Read About What We Love: Web Development & Technologies

How to Install and use Page Comments Plugin for Umbraco

We recently launched the first-of-its-kind Page Comments Plugin that allows comments on any of the webpages or blogs of your website without the security risk of third party vendors. This easy-to-use tool also lets you moderate and manage all online comments to your website – giving you the power to delete, flag, approve, disapprove as well as auto-approve comments at one go as bulk.

Download this easy and useful plugin we’ve developed from here. Follow the simple instructions below and you’ll be all set to manage the internet’s never ending discussions without compromising any user information.   

  1. If you haven’t already, download our plugin, right now!  
  2. Log in to Umbraco’s back office
  3. Click on the 'Developer' menu, then choose 'Install local package' as shown in the screen shot below. 

    install page comments plugin step1

  4. Tick the check box to agreeing risks associated with local packages
  5. Browse the package .zip file and click on the 'load package' button as shown in screen shot below

    install page comments plugin step 2

  6.  Tick on ‘Accept License’ and click on 'Install Package' button as shown in screen shot below.

    install page comments plugin step3

  7. Wait till package is installed. Do not refresh the page when package is being installed.
  8. Once the package is installed, you will see the message displayed as in the screen shot below.

    install page comments plugin step4

  9. After installing the plugin, click on 'Settings' menu and expand 'Document Types' tree as shown in the screen shot below.

    configure Page Comment plugin step1

  10. Edit document type of the page for which you need comments and click 'permissions' icon and 'Add child' as shown in the screen shot below.

    configure Page Comment plugin step2
  11. Select the comments document type as shown in the screen shot below. And save document type edited.

    configure Page Comment plugin step3

  12. Edit the template used by the document type, used in the above steps and add the below line of code where you would like to see the comments section.

    @Html.Partial("PageComments", new PageComment.Comments.Comment())

    As show in in the screen shot below.

    configure Page Comment plugin step4

  13. Edit the document type where you would like to see the dashboard to approve and delete comments. Eg: Home page document type
  14. Add a new tab and new property, select a data type of 'List Comments' as shown in the screen shot below

    configure Page Comment plugin step5

  15. Just after installing and configuring the plugin, the dashboard will look as below

    configure Page Comment plugin step6

    Using Dashboard Approve or Delete the selected comments. If you would like to ‘Auto Approve’ all the comments as soon as posted, set ‘Auto Approve’ comments field to ‘Yes’. The plugin will also send notification emails as soon as a new comment is posted. Enter the email ID to which you would like to receive all new comments information in the ‘Moderator Email’ and enter the email ID used to send all notification emails in the ‘Site Admin Email’ field as well. Once ‘Notification Email IDs’ and ‘Auto Approve Comments’ settings are changed save the changes by clicking ‘Save’ button. SMTP credentials for sending emails should be provided in the web.config file. Sample code is given below

    <system.net>  
       <mailSettings>    
       <smtp>    <networkhost="smtp.gmail.com"userName="username"password="password"port="587"enableSsl="true" />     
      </smtp>  
       </mailSettings>  
    </system.net>

  16. The front-end part of the comments plugin is built for multilingual sites. Plugin identifies the language based on site’s ‘Culture and Hostname’ language settings. By default, plugin comes with French and English version of resource files, if you would like to extend the plugin for any additional languages add a resource file for the language under ‘App GlobalResources’ folder.
  17. To avoid spamming of the website we implemented a google reCAPTCHA 2.0. Generate Site key for your domain using URL  http://www.google.com/recaptcha/admin. Update the Umbraco Dictionary Item ‘Google Captcha Site Key’ with google captcha site key generated for your domain as shown in screen shot below.

     configure Page Comment plugin step7

    Update the Umbraco Dictionary Item ‘Google Captcha Secret Key’ with google captcha Secret key generated for your domain as shown in screen shot below.

    configure Page Comment plugin step8

  18. This package comes with the complete source code and you can extend the functionality of the plugin as per your requirement

 You are all set to enable comments on your pages and manage your comments, saving you time and effort!

Aix-en-Provence – Bangalore – Montreal

We love diversity and we work out of 3 fabulous cities, on 3 continents, and 3 time zones.


Contact us
We’ll get in touch with you ASAP!