×
Namespaces

Variants
Actions

Integrating Disqus with Nokia X applications

From Nokia Developer Wiki
Jump to: navigation, search
Featured Article
07 Jul
2014

Disqus is a popular comment hosting platform for websites and online communities that uses a networked platform. This article shows how you can use Disqus as a comment hosting platform for your Nokia X apps.

Disqus SS1.png Disqus SS2.png Disqus SS3.png

Article Metadata
Tested with
SDK: Nokia X SDK
Dependencies: disqus.com
Article
Created: croozeus (03 Jul 2014)
Last edited: kiran10182 (07 Jul 2014)

Contents

Introduction

Disqus doesn't provide any official APIs for mobile apps to use their platform. However, what it does provide is a mobile optimised web experience. Using this mobile optimised web experience we can try to integrate Disqus with our Nokia X apps.

Why use Disqus in your apps?

Using an already existing commenting system saves a lot of development time. Besides, using Disqus gives you the various features, such as identity management, social integration, user profiles, spam and moderation tools, analytics, email notifications, etc. as a bonus.

Setup your App on Disqus

Sign up at https://disqus.com with your email address or one of your social accounts. Once you are registered and signed in, select the option 'Add Disqus to your site'.

Yes, it seems that Disqus will be integrated with your website, however we will add it to our application eventually.

Add Discuss to your Website

You would be asked to fill in some details about your website. Fill in your application details instead: Application Name, unique identifier (instead of unique URL) and choose an appropriate category for the application. Click 'Finish' when you are done.

Fill Details about your application

Next, you will be asked to choose your platform from the presented content management systems like Wordpress, Blogger, Tumblr, etc. We don't have any CMS, so let's choose Universal Code option here.

Choose Platform

You'll be given an HTML snippet for Disqus, copy this to an HTML file disqus.html and place the file in your Nokia X project's assets folder.

Discuss HTML Snippet

Integrating Disqus with Nokia X Apps

Tweaking the HTML code

We'll need to tweak this snippet a bit before we can use it. The snippet that's given to us loads up the discuss comments page for every unique URL. So let's create a function loadComments which accepts parameters like: shortname, url, title and identifier.

function loadComments(shortname, url, title, identifier) {
disqus_url = url;
disqus_title = title;
disqus_shortname = shortname;
 
if (identifier != undefined)
disqus_identifier = identifier;
else
disqus_identifier = "";
 
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}

You'll notice that we have wrapped the original anonymous function given by Disqus in our loadComments function. So let's remove the anonymous function from the script now.

The final HTML code would look something like the below snippet. Notice the additional variables that are added above the loadComments function viz. disqus_url, disqus_title, disqus_shortname and disqus_identifier. Initialize the disqus_title and disqus_shortname from the information you filled out in the above steps.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_url="";
var disqus_title="ApplicationName";
var disqus_shortname="applicationname";
var disqus_identifier;
 
function loadComments(shortname, url, title, identifier) {
disqus_url = url;
disqus_title = title;
disqus_shortname = shortname;
 
if (identifier != undefined)
disqus_identifier = identifier;
else
disqus_identifier = "";
 
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
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">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</body>
</html>

Loading Disqus in WebView

Now that we have our functions ready, we need to load up this HTML page in our application. Wherever you need Disqus to load up it's platform, create a WebView. For the sake of simplicity, we will consider it as a new Activity here.

Load the HTML page from the assets folder into your WebView. Make sure you enable set Javascript as enabled for the WebView as shown below.

final WebView w = (WebView) findViewById(R.id.webview);
WebSettings webSettings = w.getSettings();
webSettings.setJavaScriptEnabled(true);
String url = "file:///android_asset/disqus.html";
w.loadUrl(url);

Loading comments in Disqus

Once the WebView loads up the Disqus page, we need to call our loadComments function to render Disqus. Now remember, Disqus loads up a unique social page for a unique URL. Depending on the type of data object in your application, a unique URL needs to be created and passed to the loadComments function.

For example, let us consider an application which features consumer products. If the web service has a unique identifier for each product, we can use it to generate a unique URL. If not, the name of the product can be used to generate the url, in which case we will make sure there are no space characters in the name. A good idea would be to replace space characters with a hyphen character.

For example,

String URL = "http://"+ UniqueIdentifier+".com"

Here is how we call the loadComments function after our HTML page has loaded in the WebView,

w.setWebViewClient(new WebViewClient() {  
@Override
public void onPageFinished(WebView view, String url)
{
String arg = "javascript:loadComments(\""+ ShortName+ "\", \"http://"+ UniqueIdentifier+".com\",\""+Title+"\")";
w.loadUrl(arg);
}
});

Note that you must include the (escape) quotes following the javascript: call since the JS function loadComments is setup to accept String parameters.

Summary

This article illustrated how to integrate Disqus comment hosting platform with your Nokia X applications.

Disqus will maintain the comments of all the unique URLs separately i.e. if your application features commercial products, each commercial product can have a separate unique URL and Disqus will save the comments of each product separately. In such (products featuring) applications, Disqus can very well behave like a review system for products.

Once Disqus is integrated, you can then access Disqus web tools like spam and moderation tools for your application. These tools are available at <application_name>.disqus.com/admin/moderate where application_name represents your application name. You may also add other moderators who can curate the content posted within your application.

Besides this, Disqus also provides (exportable) analytics which indicate the user engagement and comments in your application. The analytics are available at <application_name>.disqus.com/admin/analytics/ where application_name represents your application name.

This page was last modified on 7 July 2014, at 17:55.
112 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×