Here we thought we’d give you a quick tutorial on how to integrate DISQUS \u00a0on 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. \u00a0A 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.<\/p>\n
To start with make sure your app has internet\u00a0permissions\u00a0\u00a0<uses-permission android:name=”android.permission.INTERNET”><\/uses-permission> and you have signed up for DISQUS<\/a> 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.<\/p>\n Start with making a layout called disqus.xml. Since we will be setting up our php \u00a0page in a moment, we will include a WebView object. The most frustrating part of most Android development is testing different\u00a0resolutions\u00a0and orientations. Thankfully by using WebView, we let WebView do all the\u00a0heavy\u00a0lifting\u00a0in this area.\u00a0Place whatever elements you like in the xml file but place a WebView on the bottom. \u00a0For most layouts that might have extensive comments, you will likely want to place your whole page in a ScrollView. \u00a0Using \u00a0fill_parent \u00a0is a good idea here if it is just going to be tagged onto the bottom of the layout.<\/p>\n 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.<\/p>\n Ok now that both\u00a0components\u00a0are 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.<\/p>\n 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<\/a> on Google Play. \u00a0If 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\u00a0walk through.<\/p>\n To address the login and logout issues we were seeing we added a blog entry<\/a> here\u00a0http:\/\/globeotter.com\/blog\/disqus-login-and-logout\/.\u00a0<\/strong> You can also check out a full implementation of this in our new App the Daily Forum<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Here we thought we’d give you a quick tutorial on how to integrate DISQUS \u00a0on 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4],"tags":[6,11],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-code-sample","category-disqus","tag-code","tag-disqus","bubble-left"],"yoast_head":"\ndisqus.xml<\/h2>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n\r\n<LinearLayout xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n android:orientation="vertical"\r\n android:layout_width="fill_parent"\r\n android:layout_height="wrap_content" >\r\n\r\n<ScrollView\r\n android:layout_width="match_parent"\r\n android:layout_height="match_parent" >\r\n\r\n<LinearLayout\r\n android:layout_width="match_parent"\r\n android:layout_height="match_parent"\r\n android:orientation="vertical" >\r\n\r\n\/\/ INSERT all your other GUI objects on top of the comments here\r\n\r\n<WebView xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\r\n android:id="@+id\/disqus"\r\n android:layout_width="fill_parent"\r\n android:layout_height="fill_parent" \/>\r\n\r\n<\/LinearLayout>\r\n<\/ScrollView>\r\n<\/LinearLayout>\r\n<\/pre>\n
showcomments.php<\/h2>\n
\r\n<div id="disqus_thread"><\/div>\r\n<script type="text\/<span class=">\r\n\r\n\/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * *\/\r\n var disqus_shortname = '<shortname>'; \/\/ required: replace example with your forum shortname\r\n var disqus_identifier = '<?php echo $_GET['disqus_id']; ?>';\r\n\r\n\/* * * DON'T EDIT BELOW THIS LINE * * *\/\r\n (function() {\r\n var dsq = document.createElement('script'); dsq.type = 'text\/javascript'; dsq.async = true;\r\n dsq.src = 'http:\/\/' + disqus_shortname + '.disqus.com\/embed.js';\r\n\r\n(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);\u00a0})();\r\n <\/script>\r\n <noscript>\r\n\r\nPlease enable JavaScript to view the <a href="http:\/\/disqus.com\/?ref_noscript">comments powered by Disqus.<\/a>\r\n\r\n<\/noscript>\r\n\r\n<a href="http:\/\/disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus<\/span><\/a>\r\n\r\n<\/pre>\nDisqus.java<\/h2>\n
<\/pre>\r\npublic abstract class Disqus extends Activity\r\n{\r\nprivate WebView webDisqus;\r\n\r\nprotected void onCreate(Bundle savedInstanceState)\r\n{\r\n\r\n\/\/set layout to disqus xml\r\n\r\nsetContentView (R.layout.disqus);\r\n\r\nwebDisqus = (WebView) findViewById(R.id.disqus);\r\n \/\/set up disqus\r\n WebSettings webSettings2 = webDisqus.getSettings();\r\n\r\nwebSettings2.setJavaScriptEnabled(true);\r\n\r\nwebSettings2.setBuiltInZoomControls(true);\r\n\r\nwebDisqus.requestFocusFromTouch();\r\n\r\nwebDisqus.setWebViewClient(new WebViewClient());\r\n\r\nwebDisqus.setWebChromeClient(new WebChromeClient());\r\n\r\nwebDisqus.loadUrl("http:\/\/<PATH TO WEB SERVER>\/showcomments.php?disqus_id="+<disqus thread id>);\r\n\r\n}\r\n\r\n}\r\n<\/pre>\nUpdate<\/h2>\n