Coder Social home page Coder Social logo

angular-comments's Introduction

Angular Comments

Angular commenting component that allows you to easily integrate the Disqus and Livefyre commenting systems into your website. To read more about why this component was created and some of the problems it solves, see the original announcement post here.


To get started with Angular Comments, you can just use bower install angular-comments or clone it from here. Once installed, be sure to include the comments.js file in your page, require mvd.comments in your main app module, and then set your configuration values within the run block for your app. For example:

angular.module('myApp',['mvd.comments'])//require comments module
    .run(function (commentConfig) {
        .setForumName("my-site")//Specify our forum name/site id for this site
        .setProvider('disqus')//Specify we want to use disqus

Then, all we have to do is attach the comments directive to the appropriate element and pass in that post's metadata:

<div comments="article"></div>

Where article is a scoped variable that can be either a string representing the article ID itself (eg 'my-awesome-article') or a full object:

$scope.article = {
  slug : 'my-awesome-article',//ID used to uniquely identify this post for livefyre/disqus
  title : 'My awesome article',//Title string passed on to third-party service
  url : ''//URL to directly access this post

That's all there is to installing this component and getting a third-party commenting system up and running. The directive itself takes care of grabbing the necessary javascript files for Disqus/Livefyre and including them into your page when you need them.


In addition to the basic settings necessary for connecting your site to Disqus/Livefyre, Angular Comments provides several other API options you can use to further customize your setup:

  • setSiteId: Specify the site Id or forum name for your site
    • required
  • setForumName: Alias for setSiteId to confirm with Disqus terminology
  • setProvider: Specify which commenting platform you want to use (currently supported values: livefyre and disqus)
    • required
  • setDisplayOnLoad: Enable/disable whether or not to load comment thread immediately
    • optional
    • default: true
    • If you have multiple posts on a single page and your platform doesn't support showing multiple comment threads at once, only the first thread will be loaded
  • setShowCommentCount: Enable/disable display of comment count when thread is hidden
    • optional
    • default: true
    • If your platform includes a comment count as part of the thread, this paragraph will be hidden when the thread is visible
    • Note: Right now clicking on this comment count element is the only way to load a thread that isn't already visible, so be sure displayOnLoad is set to true if you use this
  • setBaseUrl: If no article URL is passed in, URL is calculated as baseUrl + articleId.
    • optional
    • default: $location.get('protocol') + '://' + $location.get('host') + '/'
  • setCommentTextMap: Specify text map for comment count display. Follows same pattern as ng-pluralize when attribute
    • optional
    • default: { '0' : 'No comments yet', '1' : 'One comment', 'other' : '{} comments' }
  • setLoadingText: Text to display while loading comment count/thread
    • optional
    • default: 'Loading comments...'
  • setCallback: Attach a callback function to an event
    • optional
    • supported callbacks:
      • onCommentPosted
        • Params: articleId, data (data is specific to each platform)
      • onCommentCountUpdated
        • Params: articleId, count
      • onThreadLoaded
        • Params: articleId, container (jqLite object of DOM element containing thread)
    • example:
commentConfig.setCallback('onCommentPosted', function (slug, data) {
    analytics.track('commentPosted', slug);

angular-comments's People




 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.