Javacript embed in native apps

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.

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.
  • Single Sign-on isn't supported yet.

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.

Static embed template

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.

  1. In your native code, listen for changes in the URL.
  2. 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.
  3. 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:

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;

Contact us

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • Link to any page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?