Disqus Integration with in a portlet

Disqus is a networked community platform for your website. To learn more about Disqus, check out our Getting Started section or visit our homepage.

Disqus works on virtually any type of website or blogging platform, and is very simple to install. This guide will make setting up Disqus on your website fast and easy!

Step1:Register with Disqus

Step2:Install Disqus

Step3:Configure and Customize Disqus

Step4:Moderate your comments

Your Dashboard

Your Dashboard is the main page you see when you visit disqus.com while logged into the website. The Dashboard displays two main things:

• On the left side: a list of all the websites (a.k.a. forums) of which you are a moderator. You can administer a site by clicking its name.
• On the right side: your account's personal activity. If you use your account for commenting, you'll see comments you've left and replies to you. You can manage, edit, and delete your comments from this interface.

Explanation of the above steps :

Step 1: Register with Disqus

Before going any further, you will need to register your website with Disqus. You will also need to create a user profile in order to login and administer this website. During registration, you will pick a shortname for your forum, which is how Disqus identifies your website community in the system.

We  need to register our site with the Disqus Group.                                                                       Go and register with your  domain  at disqus.com.

During registration, you will pick a shortname for your forum, which is how Disqus identifies your website community in the system.

Step 2: Install Disqus

Disqus is compatible with many popular blogging platforms, content management systems, and virtually any custom website. Some examples of blogging platforms are WordPress, Tumblr, and Blogger. Visit the installation instructions section of the website to find the instructions for your platform.

·         We need to install the disqus plugin .Here we have different options available to choose i.e.

To use Disqus on your website, choose the right installation instructions for your platform.

Or we can choose the Universal Code.

The universal code is a generic JavaScript snippet that can be implemented anywhere.

Please go through the below Link  :

http://disqus.com/admin/install/   

Disqus can be installed on virtually any website using the universal JavaScript embed code. The following documentation is meant for developers only.

Disqus also provides installation instructions for dozens of popular blogging and website platforms such as WordPress, Blogger, and more.

Before you start

• Make sure you've registered your website with Disqus. Read the Quickstart Guide for more information.
• You will need to be able to edit the HTML of the website you are installing Disqus on.
• To install Disqus, you will need to know your forum shortname as registered on Disqus.

Embed code

This is the JavaScript embed code which loads and displays Disqus on your site, typically on the individual article or post pages.

Note: Don't forget to change 'example' to your forum's shortname (listed above).                            

//This code should be place in your View Jsp file ,where you want the disqus to appear.

<div id="disqus_thread"></div>

//This is the Universal Code for Disqus

<script type="text/javascript">

    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * 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>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">

Configuration variables

Within the above embed code, there are configuration variables which tell Disqus how the system should work and behave.
disqus_shortname tells Disqus which website account (called a forum on Disqus) this system belongs to.
disqus_identifier tells Disqus how to uniquely identify the current page.
disqus_url tells Disqus the location of the page for permalinking purposes.
There are many more configuration variables available, but these are the most important. To learn more about these and the other configuration variables, read JavaScript configuration variables.

Detailed Explaination is below

JavaScript configuration variables

Configuration variables are used as parameters for Disqus' behaviors and settings. They are defined within the HTML of the page on which Disqus is loaded.
These variables must be defined on each page on which Disqus is loaded, so include them in your dynamic templates which render pages.

Placing configuration variables

Configuration variables are added anywhere on the page before the embed.js script, and are wrapped in script tags. For example:

<script type="text/javascript">

  var disqus_title = 'Hello world!'; 

</script>

If you're using one of our plugins such as Wordpress, it's best to put this in your "header.php" template (or equivalent) rather than editing the plugin files.

Variables

disqus_developer

Tells the Disqus service that you are testing the system on an inaccessible website, e.g. secured staging server or a local environment. If disqus_developer is off or undefined, Disqus' default behavior will be to attempt to read the location of your page and validate the URL. If unsuccessful, Disqus will not load. Use this variable to get around this restriction while you are testing on an inaccessible website.
Usage: Specify 1 for on and 0 for off. If undefined, disqus_developer is off.
Example: var disqus_developer = 1; // developer mode is on
Note: Threads are still created while disqus_developer is enabled and as such will be associated with the URL on which they are first loaded. You'll likely want to set disqus_url in addition so threads aren't associated with your development environment's URL scheme.

---

disqus_shortname

Tells the Disqus service your forum's shortname, which is the unique identifier for your website as registered on Disqus. If undefined, the Disqus embed script will make a best-guess based on the URL of the Disqus embed script.
Usage: Specify your forum shortname as string.
Example: var disqus_shortname = 'example';

---

disqus_identifier

Tells the Disqus service how to identify the current page. When the Disqus embed is loaded, the identifier is used to look up the correct thread. If disqus_identifier is undefined, the page's URL will be used. The URL can be unreliable, such as when renaming an article slug or changing domains, so we recommend using your own unique way of identifying a thread.
Plugins, such as Disqus for WordPress, will automatically have this defined as the id of the blog post.
Usage: Specify a string or an integer as your unique identifier. This can be dynamically rendered server-side.
Example:
The following uses an article slug as the identifier. var disqus_identifier = '/december-2010/the-best-day-of-my-life/';
The following uses a unique id as an identifier. var disqus_identifier = '2583573';
Most likely you will be rendering the values dynamically server-side in your platform or CMS. The following is an example using PHP.
var disqus_identifier = '<? php echo $my_identifier; ?>';

---

disqus_url

Tells the Disqus service the URL of the current page. If undefined, Disqus will take the window.location.href. This URL is used to look up or create a thread if disqus_identifier is undefined. In addition, this URL is always saved when a thread is being created so that Disqus knows what page a thread belongs to.
While the window.location.href is used in absence of disqus_url, we highly recommend defining this variable. If a user visits your page at the URL http://example.com/helloworld.html?123, Disqus may in fact load a different thread than if the user came from http://example.com/helloworld.html.
To make sure the right thread is always displayed, you should define on your page var disqus_url = 'http://example.com/helloworld.html';

---

disqus_title

Tells the Disqus service the title of the current page. This is used when creating the thread on Disqus for the first time. If undefined, Disqus will use the <title> attribute of the page. If that attribute could not be used, Disqus will use the URL of the page.
Having comment threads titled http://example.com/helloworld.html isn't very pretty!

---

disqus_category_id

Tells the Disqus service the category to be used for the current page. This is used when creating the thread on Disqus for the first time.
Categories are primarily used with our API for results filtering; categories are not used for moderation (e.g., to filter comments by category in the moderation panel). New categories can be created at Settings > General or with our categories API endpoints.
JavaScript Usage: Specify a category ID (not title). If undefined, Disqus will use the forum's default General category.
Example: var disqus_category_id = '123456'; // using category Sports which has ID 123456
API Usage: Filter results by category.
Example: Utilize the categories/listPosts endpoint (or the category parameter in conjunction with the posts/list endpoint) to list comments only from a certain category.

 

Comments count for Disqus

Most websites implementing Disqus will want a way to display the comment counts on the index page. We offer an easy to use JavaScript code snippet which displays the number of comments for pages with Disqus embedded.
The following is the code that should be included on a page which needs to display the comment counts (typically this is the index page of your blog or website). The code should be included at the bottom of the webpage, right before the closing </body> tag,

<script type="text/javascript">

    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */

    (function () {

        var s = document.createElement('script'); s.async = true;

        s.type = 'text/javascript';

        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';

        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);

    }());

</script>

Next, you need to tell Disqus which links to look up and return the comment count. You can do this by appending #disqus_thread to the end of the href attribute of your links.
Disqus can look up the comment count by the URL or by a Disqus identifier. Specifying a Disqus identifier is highly recommended. To do this, add a special attribute data-disqus-identifier to your links. If you cannot use Disqus identifiers with your install of Disqus (e.g. static webpages), you can simply not add this attribute and Disqus will look up threads by the URLs in the href attributes of the links. Since URLs can change, we highly recommend using the Disqus identifier.
Examples for using the comment code script
For the following link, Disqus will fetch the comment count by the identifier: article_1_identifier <a href="http://example.com/article1.html#disqus_thread" data-disqus-identifier="article_1_identifier">First article</a>
For the following link, Disqus will fetch the comment count by the URL: http://example.com/article2.html <a href="http://example.com/article2.html#disqus_thread">Second article</a>
Disqus will ignore the following link because its href attribute does not end with #disqus_thread <a href="http://example.com/" data-disqus-identifier="over-9000">Anchor</a>
The recommended approach is to use the identifier (the first example) because this is most consistent.

Step3: Configure and Customize Disqus

Disqus can be configured to work the way you want it to. See our Administration and Customization pages to learn more about the different options that are available for your website.

 For Administration of Discus  pls refer below Link 

http://docs.disqus.com/kb/admin/

For Customzation of Disqus please refer the below link

http://docs.disqus.com/kb/customizing/

Some Extra links for customizing CSS in Disqus

http://www.siterehab.com/disqus-custom-css/

http://www.mackhankins.com/2011/02/disqus-custom-css-for-wordpress/

Step4:Moderate your comments

Disqus offers many tools to help you easily manage your community; learn more on our Moderation page.

http://docs.disqus.com/kb/moderation/

Finally an example of disqus I used in my project

Write the Below code in Theme or in any Common Jsp file.

Here we are declaring the variable required to integrate disqus. And later we pass our dynamic values to these variables.

<script type="text/javascript">

                var disqus_shortname = 'cisco-news';

                var dqdiv = document.getElementById('disqus_thread');

       (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);

      })();

    (function () {

      var s = document.createElement('script'); s.async = true;

      s.type = 'text/javascript';

      s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';

      (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);

    }());

 

</script>

In your view.jsp file

<liferay-ui:journal-article showTitle="false" templateId="MOBILE_FEATURE_TEMPLATE"

articleId="<%= articleDisplay.getArticleId() %>" groupId="<%= groupId %>" />

<%@include file="related_videos.jsp"%>

<div id="disqus_thread"></div>

And now in your code add the below code in a script

               

<script type="text/javascript"> 

  var disqus_identifier = '<%=articleReleaseDate+"_"+linkId%>';

  var disqus_url = '<%=f_nodeSocialMediaUrl%>';

  var disqus_title = '<%= HtmlUtil.escape(feature_title) %>';

 

  dsqunique =  disqus_identifier;

  dsq_url = disqus_url;

  dsq_title = disqus_title; 

  </script>