Company Blog

Introducing Disqus AudienceSync

We are excited today to announce Disqus AudienceSync: a seamless way for users to port their Disqus profile to publisher sites with one or two clicks. As reported by Adweek, Disqus follows similar approaches used by Facebook and Google+ and is the first discussion platform on the web to offer this technology.

AudienceSync is a powerful new way to give control to Disqus users who want to participate in discussions all across the web, while giving publishers a transparent, low friction way to accrue user accounts and manage their own membership systems. It removes the barrier between growing an audience through a large discussion platform like Disqus with over 100 million profiles, and meeting site-specific registration requirements.

The Largest, Most Engaged User Base of the Conversational Web
Disqus has now been installed on over 2.5 million sites and has over 100 million commenter profiles – the largest discussion platform of its kind. AudienceSync lets publishers tap directly into that vast user base of engagers, who tend to stay and click around a lot longer than the average skimmer or reader:

Tearing Down Walls to User Participation
A common point of frustration for users of standalone commenting systems is the need to create a unique profile for each site. No longer with AudienceSync.

We’ve long offered Disqus Single Sign-On, allowing a site’s registered users to seamlessly use Disqus. AudienceSync is the flip side of that equation — registered Disqus users can simply click a button to grant access to their basic Disqus account information. Publishers can then create an account for them, add them to a newsletter, etc., all in a natural, opt-in flow.

AudienceSync is the first of its kind in web discussion systems, allowing for a seamless, CRM-based approach to audience development with the entire registered Disqus user base. It was designed to be compatible with both in-house and third party user management systems such as Janrain, ensuring a site’s most engaged contributors are also full-fledged members able to benefit from all of the touch-points a publisher maintains with their community.

Highest Standards
Going into any product development process, we aim not only to adhere to but also promote core Disqus values like user privacy expectations, publisher TOS, and general transparency best practices. AudienceSync was no different here.

AudienceSync is built on OAuth, a standard web protocol with which Web users are familiar and comfortable. Because of this, we’re able to balance frictionless, universal identity with publisher control and flexibility.

See It Live, Get It Now
You can already see AudienceSync in action on sites like The Daily Meal and Michelle Malkin. It works with any registration system and will be on many more soon.

If you’re interested in AudienceSync, check out the help documentation and get in touch with us.

Designing Disqus Gravity

We launched a new website less than a year ago, corresponding with the release of our then brand-new commenting experience, called D12 at the time. The site was intended to showcase D12 and its new real-time features. We built a slick interactive demo – a demo that I’m still quite proud of – which, as of today, continues to serve as the hero piece at disqus.com.

The demo does a great job showcasing the D12 commenting experience. However it only showcases a single part of the Disqus platform. We thought we’d challenge ourselves with a redesign that tells a broader story about Disqus.

We started with a new interactive demo we’ve named Gravity. In the coming weeks we’re going to launch a new homepage, retiring our D12 demo in order to make room in the hero slot for Gravity.

“Okay”, you might be thinking. “But already? Why?”

This is the story of how Gravity came to be and what informed our thinking throughout the process.  

Designing toward a goal

A small team kicked off Gravity back in December. Long before I started sketching ideas, we worked together on pinpointing the specific Disqus narrative we wanted to tell. We knew a couple things right off the bat:

• We wanted to highlight the unique range of communities and content on Disqus.
• We wanted visitors to begin to think about the platform as something more than an isolated commenting experience (a notion our D12 demo only reinforces).
• We also wanted to hint at potential future Disqus products.

As our discussions progressed, we came to the conclusion that the best way to accomplish these goals would be to showcase the best content from the Disqus network in a real-time format.

Learn more about how we’ve been tackling the content challenge around such a lofty goal in my teammate Sam’s blog post.

Telling a story with data

I’ve always admired the balance of art and science required to effectively communicate the story behind a dataset. During the 2012 elections I found a data visualization in the New York Times that used color, scale, animation, and interactivity to illustrate potential electoral scenarios.

“The Electoral Map: Building a Path to Victory”, The New York Times

I found the visualization immediately more illustrative than watching Chuck Todd walk through the same scenarios on “Meet The Press.” It was one of the first pieces that came to mind as I began to think about our homepage redesign as a potential data visualization project.

A few months later I attended a talk by Kim Rees, Partner at the data visualization consultancy Periscopic. She spoke about the impact a well designed data visualization can have if the designer creates an emotional connection with the viewer. She illustrated her point by demoing a recent Periscopic project that visualizes U.S. gun deaths.

The dataset included only a few simple statistics about each victim; information that was bleak, but not terribly meaningful in the form of a spreadsheet. Through Periscopic’s design work, however, the weight of the tragedy behind the numbers became immeasurably more poignant.

I left the talk thinking about how I might design something more emotionally engaging than a nice-to-look-at, well-kearned series of trending Disqus headlines.

One of my favorite data visualizations, another piece by The Times, illustrates President Obama’s 2013 budget. The content is certainly interesting.

Shan Carter, “Four Ways to Slice Obama’s 2013 Budget Proposal”, The New York Times

For me, though, the most compelling piece about the visualization is the design. Not only does it succinctly illustrate a huge amount of information, it does so through animations and interactions I found surprisingly enjoyable. On page load, the nodes move from the edges of the canvas toward the center, each seeking out its correct destination, reverberating slightly before settling into place. Transitioning from one tab to the next (“All Spending”, “Types of Spending”, etc.) triggers more delightful, gorgeous, physics simulations, with nodes colliding into and repelling one another before settling into their respective destinations.

I began to wonder if creating an emotionally compelling visualization could be accomplished through similarly playful, engaging interactions.

Blue-sky design process

Starting the design process without regard for technical limitations, at least at first, often produces better results. Doing so frees the designer to explore solutions which match users’ mental models, rather than functions of the underlying architecture.

Given the fact that at this point I had decided our new homepage project should be animated, interactive, and that motion should be influenced by real-world physics simulations, starting the design process without any regard for technical limitations was easy – I had no clue how we’d actually build the thing. (More on how we eventually did build Gravity in just a bit.)

We worked through countless iterations, starting at first with sketches, and then wireframes. With the sky as our limit, and not many conventional interaction paradigms to rely upon, it was important that we could both produce new ideas quickly, and comfortably dismiss ideas that didn’t quite work, even some we really liked.

Forgoing Photoshop for JavaScript

It didn’t take long to realize flat mockups would only get us so far in such an interaction-heavy design. Increasingly, the Disqus design team is moving toward less traditional design tools earlier in our process, in order to better communicate ideas that can’t be captured in a single picture. We’ve found that working within the native context of the end product (most often a web browser or mobile device) helps us find the right design solutions with fewer iterations. We also end up doing a lot more showing and a lot less telling as we communicate design solutions within our teams.

While working on Gravity, I moved from mockups to interactive prototypes earlier than usual, realizing the bulk of design work would likely be around the various physics simulations I wanted to use.

We decided on the JavaScript framework D3 to drive Gravity, and while I’m moderately comfortable with JavaScript, and have used numerous design and presentation oriented frameworks such as jQuery in the past, D3 presented an unusually steep learning curve. The evolution of Gravity’s design, paired with my personal quest to learn D3, made for a brief but somewhat alarming series of screenshots (“Oh boy, what did I get us into?”).

After becoming more familiar with the framework (something that couldn’t have happened without the talented front-end guys here at Disqus helping me over that aforementioned learning curve), the design continued to go through numerous iterations beyond the initial mockups. I began to find the immense number of controls D3 provides liberating rather than burdensome. The JavaScript library quickly became a new, powerful tool in my design toolbox.

The future of Gravity

Gravity will become the centerpiece of disqus.com. But where else it may go is our next big question. Share your thoughts below.

A Visual Update to the Core Disqus Experience

Over the past few days we’ve rolled out a few improvements to the Disqus experience that make it easier than ever to participate in your favorite community. It’s also a lot prettier. 

Refreshed Design

The first thing you’ll notice is that the comment area has been given a design facelift to make the experience feel more inviting, which includes larger profile photos and font size.  We’ve also updated the old default avatar to a new image that’s more representative of both male and female community members.  You’ll also notice that the social login icons have been given a little design love and we’ve now made logging into your Disqus account more recognizable.  

Large Image & Video Uploads

One of the most requested features from our community has been to add full-sized images into the Disqus experience.  We’re happy to announce that this is now a reality on communities that allow image uploads.  

Improved Hovercards & User Following

If you’re not a regular to this blog, you might have missed the new Disqus profiles that we introduced recently.  We’ve made it easier to follow your favorite community members by including a nice large follow button as well as including two new tabs that show a user’s list of followers, and a list of people that the user is following.  

36 More Languages

In addition to English, Disqus now supports over 36 languages.  We’re adding new languages every week, so if you don’t see your language in the list of already available ones, or if you are not happy with the existing translations, come translate with us and help make Disqus better!

Ability to Customize the Default Sort Order of Comments

We’ve re-added the ability for publishers to choose the default sort order of comments on their site.  For example, if you’re running an online contest or live blog event, you might want to have your comments sorted by newest first. By default the sort order is set to “Best”, but site moderators can now adjust the default order by visiting the Disqus settings page.  You spoke, we listened. Enjoy!

Disqus Gravity: Picturing the Web of Discussion

Today, Disqus is excited to introduce Gravity: a new way to see Disqus and discover great discussions in communities across our network. Finding great online discussions is hard. Typically, you have to go to them, they don’t come to you. And even then, there’s a lot of luck involved. Disqus Gravity changes that. It’s a live feed of trending discussions happening across the galaxy of sites that use Disqus.

See it for yourself at disqus.com/gravity

Most content discovery is based on counting page views and clicks.  Others count how often a piece of content is shared or emailed. And It’s usually delivered in a list or directory format. We wanted to do something new because there’s a difference between what people click and share and what they actually take the time to comment on and participate in. 

What’s at work?

So what you’re seeing in Gravity are discussions experiencing a spike in volume. What you’re seeing is what people are talking about. At any given time, Gravity is pulling trending discussions from 500 sites, showing 60 links at a time, grouped by categories. Categories make it easier to digest and find what’s most interesting to you.  

It’s also interactive and tactile to make it fun and exploratory. You can grab and drag topics around and zoom into the discussions dominating that subject. Best of all, you can find new content from some of the web’s best publishers and favorite communities.

Why did we build it?

The Disqus network spans a huge breadth of sites, and while Discovery connects discussions within each of those sites, we saw the need to showcase that diversity in one place. We plan to make this a centerpiece of Disqus.com, so visitors can easily find Disqus sites and click back out to join discussions, which in turn shares traffic with publishers. In the process of building Gravity, we’ve discovered a range of interesting sites and discussions we hadn’t found elsewhere. 

Gravity will evolve. We have plenty of ideas on where to go next and would like to hear yours. What would make it something you keep coming back to? What’s not working for you? Leave your thoughts in the comments below or take this feedback survey.

UPDATE: If you’re interested in the design process behind Gravity, see Vince Lane’s (the project design lead) description of its evolution.

Disqus engineering hits the conference circuit

At Disqus, our engineering team has the opportunity to work with a variety of new and exciting technologies – and we’re not shy talking about it. Four of our engineers – Adam Hitchcock, Burak Yigit Kaya, Mike Clarke, and Ben Vinegar – have been sharing what they learned at technology conferences at home and abroad.

Scaling Realtime at PyCon 2013

At PyCon 2013 in Santa Clara, Infrastructure Engineer Adam Hitchcock took to the stage to describe the technology behind Disqus’ realtime architecture, and explain how we manage to remain efficient at scale. What’s particularly noteworthy is that Disqus’ realtime stack eschews traditional realtime tools like node.js and Go, and instead uses strictly Python and nginx (a popular web server application). This unique stack can serve up to 2 million concurrent connections, with peak data throughput of over 5 GB/s – all using just a handful of physical servers. If you’re not sure what those numbers mean, don’t worry. I’ve been assured that they’re very impressive.

To learn about how we pulled this off, you can watch a video of Adam’s complete talk, or read the slides. Adam will also be speaking at EuroPython in July.

EventSource at JsPyConf and HTML5DevConf

At JsPyConf in Istanbul, and again at HTML5DevConf in San Francisco, Front-end Engineer Burak Yigit Kaya has been presenting material on EventSource, a promising new browser API for consuming events provided by a realtime source. EventSource is a compelling alternative to today’s go-to realtime browser technology – WebSockets – because of its ease of implementation on both the client and server.

Our team first implemented EventSource in Orbital, a Disqus labs project that visualizes comments around the world as they occur live. We’re currently in the process of converting our main commenting application to use EventSource, which has been using WebSockets so far.

If you’d like to learn about Disqus’ experience with realtime browser technology, including EventSource, WebSockets, and XHR polling, you should take look at Burak’s presentation. Slides are available online, and if you happen to speak Turkish, you can also watch the recording from JsPyConf.

Sharding PostgreSQL at PyPgDay

Our operations engineer Mike Clarke spoke at the inaugural PyPgDay 2013 in Santa Clara, a day dedicated to Python and Postgres, two technologies at the very core of the Disqus infrastructure. Disqus proudly sponsored the event, which was a great opportunity to meet folks active in both the programming and database communities.

Mike described the strategy used to scale the Disqus database tier, focusing on the challenges of sharding data across physical hardware devices and their solutions. After describing how Disqus uses Postgres as its database, he shared an example application and reviewed some tips & tricks for others tackling similar problems.

Content-Security Policy at HTML5DevConf

Lastly, Front-end Engineer Ben Vinegar (hey, that’s me) – gave a presentation at HTML5DevConf about a new browser security feature called Content Security Policy (CSP). CSP provides a means for protecting against Cross-Site Scripting (XSS) vulnerabilities in web applications, which are among the most common browser-based attacks today. XSS is a prevalent problem on the web, such that nearly every popular web service has been affected by them in recent years – including Facebook, Google, Yahoo, Spotify, and countless others.

Disqus has been experimenting with Content-Security Policy since December of last year. It’s currently enabled inside of our embedded commenting application, providing additional security in browsers that implement CSP – currently Chrome and Firefox. We’re hopeful that other browser vendors will implement complete support for CSP soon.

In case you missed Ben’s presentation on Content-Security Policy, you can catch him again at FluentConf in May. The slides can also be viewed online.

Join our engineering team

If you’re an engineer who’s interested in working with cutting edge browser and server technology, you might want to take a look at our jobs page. We’re looking for talented back and front-end engineers to help us build one of the world’s most distributed web applications.