Here we thought we’d give you a quick tutorial on how to integrate DISQUS on Android. The implementation in a webpage is fairly straightforward and not too difficult in Android either. Since we just released a version of our Votter App with these comments enabled we thought we’d share some of the details behind the code. We’ll detail out a scenario using an android xml layout, android class and a simple php page. Before starting you should have already created an android app and be able to deploy it. A hosting account will also be needed for the php component of our walk through. If you have not done this there are many tutorials over on the google android developers webpage.
To start with make sure your app has internet permissions <uses-permission android:name=”android.permission.INTERNET”></uses-permission> and you have signed up for DISQUS and set up your site. It is good to have some familiarity with the system so try setting up a basic comment page on your webpage first so you know your setup in correct.
Start with making a layout called disqus.xml. Since we will be setting up our php page in a moment, we will include a WebView object. The most frustrating part of most Android development is testing different resolutions and orientations. Thankfully by using WebView, we let WebView do all the heavy lifting in this area. Place whatever elements you like in the xml file but place a WebView on the bottom. For most layouts that might have extensive comments, you will likely want to place your whole page in a ScrollView. Using fill_parent is a good idea here if it is just going to be tagged onto the bottom of the layout.
disqus.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" > <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > // INSERT all your other GUI objects on top of the comments here <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/disqus" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> </ScrollView> </LinearLayout>
Once you have your layout how you like, it is best to go ahead and set up a php page on your server. This page will essentially be blank but setup the same way any old DISQUS thread would be set up. The difference being we will pass the disqus_identifier in through the URL. With the exception of line 6 this is taken from the DISQUS installation guide. So in case of an update to the API, just follow their guide. Don’t forget to add the shortname for your disqus application.
showcomments.php
<div id="disqus_thread"></div>
<script type="text/<span class=">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<shortname>'; // required: replace example with your forum shortname
var disqus_identifier = '<?php echo $_GET['disqus_id']; ?>';
/* * * 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">Disqus</span></a>
Ok now that both components are setup we just need to link them together in our activity. To do this just load your xml layout(disqus.xml) in your Activity (Disqus.java). To load the comments we will simply do it onCreate. Instantiate your WebView and assign what WebSettings your wish to it. In line 27 you can see to load the comments we will just call our php file with a URL parameter that will be the disqus_identifier. You can store this in a variable or have it static depending on how many forums or comment threads you have.
Disqus.java
</pre>
public abstract class Disqus extends Activity
{
private WebView webDisqus;
protected void onCreate(Bundle savedInstanceState)
{
//set layout to disqus xml
setContentView (R.layout.disqus);
webDisqus = (WebView) findViewById(R.id.disqus);
//set up disqus
WebSettings webSettings2 = webDisqus.getSettings();
webSettings2.setJavaScriptEnabled(true);
webSettings2.setBuiltInZoomControls(true);
webDisqus.requestFocusFromTouch();
webDisqus.setWebViewClient(new WebViewClient());
webDisqus.setWebChromeClient(new WebChromeClient());
webDisqus.loadUrl("http://<PATH TO WEB SERVER>/showcomments.php?disqus_id="+<disqus thread id>);
}
}
That is it for loading DISQUS on Android. If you have any questions or suggestions leave them in the comments below. If you’d like to see a demo of this first, check out the Votter App on Google Play. If you want more code samples of different techniques used in Votter or any of the GlobeOtter Apps just send us a message or leave a comment below and we will try to write up a walk through.
Update
To address the login and logout issues we were seeing we added a blog entry here http://globeotter.com/blog/disqus-login-and-logout/. You can also check out a full implementation of this in our new App the Daily Forum.