Getting Started
Using the javascript embed is the preferred method due to the ease of integration. The embed is fully-featured, optimized for mobile devices and supported by us.
Many publishers choose to design their app such that Disqus is loaded on a secondary page, "behind a click". This will require the user to tap a button or navigation item to open comments in the secondary page, which then provides maximum height and width for a smooth Disqus experience within the mobile app.
If you are looking to implement Disqus in a React Native app, please see our Github repository here for additional instruction.
Requirements
You must host the page containing Disqus on an externally-accessible server. This is because Disqus embed requires a valid referrer to load
The platform's inline browser engine must be compatible with Disqus. See mobile browsers we support
You must set the disqus_url, disqus_identifier, and disqus_title to be the same as the original article page in order to properly sync the comments
Considerations
Links in comments will lead to other websites in the inline browser, so providing a way back to the original thread is recommended
Logging in will navigate to a new webpage with no redirect after completing. A good implementation must handle this by either opening a new web view window or navigating back once the user is done.
Instructions
1. Host a static Disqus page
Create and upload a basic template with the Disqus universal code on it. The following example uses javascript to get querystring variables and populate the Disqus configuration variables, so this can be hosted as a static file. You can just as easily use a dynamic language and populate the variables that way.
2. Pass variables to the page
Now you can pass variables to the page in order to load the proper thread. We've set the example up to read querystring paramaters. Specifically pass 'shortname=your_disqus_shortname', 'url=your_post_url', 'title=your_page_title', and/or 'identifier=your_custom_identifier' (if you use one). These variables will be used to look up the thread, but you'll want to be careful to stay consistent with your live site. If the URL and/or identifier aren't consistent with the regular article page, you may end up with duplicate discussions for the same piece of content.
3. Handle logins
You will probably see that this works properly after step 2. However, if you attempt to log in to comment you'll notice that the page gets stuck on the loader after successfully logging in. At this point, the user is considered logged into Disqus and you just need to take them back to the original comment thread.
- In your native code, listen for changes in the URL.
- When the user navigates to:
https://disqus.com/next/login/?forum=YOUR_SHORTNAME
Make sure you provide a method to go back to the embed in case the user doesn't want to log in anymore.
- Then listen when the user naviages to
disqus.com/next/login-success/
or
disqus.com/_ax/[twitter, google, facebook]/complete
At that point the user is logged in, so navigate them back to the original discussion thread so they can comment. See example below for how this would look in a C# Windows Phone application:
// Url of Comments page
private string CommentsUri = "http://yoursite.com/comments/your_static_comments_page.html?" + "shortname=" + "YOUR_SHORTNAME" +
"&url=" + HttpUtility.UrlEncode("ORIGINAL_ARTICLE_URL") +
"&title=" + HttpUtility.UrlEncode("ORIGINAL_ARTICLE_TITLE") +
"&identifier=" + HttpUtility.UrlEncode("ORIGINAL_ARTICLE_IDENTIFIER");
private void Browser_Loaded(object sender, RoutedEventArgs e) {
Browser.IsScriptEnabled = true; // Make sure javascript is enabled
Browser.Navigate(new Uri(CommentsUri, UriKind.Absolute));
}
// Event that fires when the browser finishes loading a page
private void Browser_Navigated(object sender, NavigationEventArgs e) {
// Get the current window's URL string
string navigatedUri = e.Uri.OriginalString.ToLowerInvariant();
// Array of URLs that indicate the user has just logged in
string[] patterns = {
"disqus.com/next/login-success",
"disqus.com/_ax/google/complete",
"disqus.com/_ax/twitter/complete",
"disqus.com/_ax/facebook/complete"
};
if (patterns.Any(navigatedUri.Contains)) {
// If there was a match, go back to the comment thread
Browser.Navigate(new Uri(CommentsUri, UriKind.Absolute));
}
}
view raw disqus-wp-webview.cs hosted with ❤ by GitHub
4 (optional). Disable mobile theme if SSO is needed
If you want to keep the Single Sign-on feature enabled for comments, you'll have to disable the mobile theme using the configuration variable below:
var disqus_disable_mobile = true;