My last iDevBlogADay post revolved around displaying user comments in your app by using the Disqus REST API service. Part 1 can be found here. Now it is time to talk about how it is possible to enable a user to post a comment from within your App!
Disqus offers a basic package for your forum service needs for free but if you want to maintain a high-traffic forum probably you will need to upgrade to a paying plan. Right now we are using the basic plan and with that unfortunately does not come SSO support through the REST API. This basically means we can not authenticate easily the users who want to comment within our app with the Disqus service. The real issue with this is that we are not able to post anonymous comments from our app either, so with the REST API + basic plan we could not achieve 100% service integration. We were able to display comments in any way we wanted as we had access to the data, but we were unable to post!
In order to overcome this problem we decided to make commenting possible in a different way. When you integrate Disqus to your website, you use a JS-snippet to load a comment box which has all features you need: displaying comments + the ability to write comments. We can use this same code in our native iPhone app as well via a webview to get the required functionality.
1. in the Disqus admin website, under Settings there is an option to specify trusted domains. Here you should add your a domain name, we will use it later. For our Fontify app, we used www.fontify.it which is the app’s dedicated website.
2. add a HTML file to your XCode project. HEAD, etc. is not important, the magic happens under the BODY tag. Copy the following JS code-snippet:
<body>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'your_forum_name_here';
var disqus_identifier = 'your_thread_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>
Fontify comments powered by Disqus
</body>
Notice the disqus_shortname variable, you need to specify your forum’s short name for it, you can simply write the name in the html file directly as it should not change. The disqus_identifier will tell Disqus which thread it should open the comment box for and this will change dynamically, so we will have to fill this variable with a value from within our app.
3. The HTML file has to be displayed so we’ll have to create a UIWebView to handle it conveniently. Subclass UIWebView, then implement a method like this:
- (void) loadThread:(NSString*) threadId {
NSString *htmlString = [NSString stringWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@"disqus"
ofType:@"html"]
usedEncoding:NULL
error: nil];
htmlString = [htmlString stringByReplacingOccurrencesOfString:@"your_thread_id" withString: threadId];
NSString *urlString = [NSString stringWithFormat:@"http://www.fontify.it/%@", threadId];
[self loadHTMLString: htmlString baseURL: [NSURL URLWithString: urlString]];
}
a. Load up the HTML into a string
b. replace “your_thread_id” with the real threadid you provide as an input parameter to your method
c. set the baseURL for the HTML-file to be loaded. This URL should be under the domain you specified in the admin page of Disqus in Step 1.
d. load the HTML string in the webview
As I have mentioned in the previous article, Disqus refers to threads by different IDs. The threadID you should provide in the method above is the relevant URL-part of the thread and not the internal Disqus threadID. For example, the URL of one of our threads is:
http://www.fontify.it/4e8281db4434e8c44400073d
The 4e8281db4434e8c44400073d part is our thread ID so we provide the loadThread: method with this parameter.
4. create an instance of your subclassed UIWebview, attach it to your current view then call the loadThread method and that’s it! A Disqus comment box is displayed now in your app!
Let me know if you found this 2-part article useful about integrating comments in your app. What kind of app benefits from commenting in your opinion?