All Collections
Developer
JavaScript embed in native apps
JavaScript embed in native apps
Disqus avatar
Written by Disqus
Updated over a week ago

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.

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;

Did this answer your question?