Product Blog

54 Languages and Counting

It’s probably not a surprise that English is the most popular language that our visitors use — but it was revealing when I discovered recently that non-English languages comprise 40% of Disqus network usage. More than anything, it underscored the importance of having a robust, easy-to-use and comprehensive translation system.

We’re getting there…

Disqus today supports 54 languages for publishers to choose from (look for the Language options in the Basic Settings area of the admin). They range from French and Spanish to Greenlandic and Azerbaijani, and use translations submitted and curated by our incredibly diverse international community.

These users graciously spent their own time to use the translations tools we provide in order to make the Disqus experience better.

Anyone with a Disqus account can apply to help translate for any of the languages we have available by going here: http://disqus.com/translate/apply.html

There are still rough spots—notably with providing the right context around the phrases to be translated, and the speed with which we get new translations out. We plan to address these and incorporate further improvements to the comprehensiveness of our translations and the ease of submitting translations.

But 54 languages is a respectable number, and evidence of the amount of (much appreciated!) effort our users have put into improving the global Disqus experience. I’m proud of what has been accomplished so far, and excited to see Disqus’ internationalization support expand in coverage and accuracy in the coming months.

Let us know what other languages you think should be added and any other suggestions to improve the translation process.

UPDATE: In the comments below we were also reminded of a nifty trick that Marina from HotforWords.com shared with us to allow Google Translate to work on the text of each Disqus comment. Click here to check it out!

We have a Jeff on the team! And a second Jon.

I’d like to welcome two new faces to the Disqus crew: Jeff Pollard and Jon Hegranes.

Jeff joins us here in San Francisco from SEOmoz in Seattle. He’s now working with our backend engineering team to help Disqus continue scaling. Jeff’s been ramping up very quickly since he’s joined us, and I’m excited about the stuff we’ll be doing together. Also, I’ve always wanted a Jeff on the team (it’s a trustworthy name) and now we have one.

Jon is joining our business development team based in NYC. While we already had a John on the team, I think a Jon, sans-“H”, is going to be a fresh attitude to Disqus. Jon is passionate about online communities and he’s going to be helping spread the good word of Disqus.

Welcome to both of our new Jays. I’m excited about the team that we’re building here — if you’re curious on how we’re growing, check out the open positions on our job page.

How I Customized Disqus in a Flash

Today’s guest post was written by Sacha Greif. Sacha is a designer and coder living in Paris as well as the founder of Folyo. He recently put together a fantastic tutorial on how he designed CodeYear.com and here we present another great one on how he customized Disqus.  

I need to confess something: I hate blog comments.

Oh, I don’t mean reading them, that part’s pretty fun. And moderation tends to be pretty easy, thanks to anti-spam tools like Akismet. No, the part I don’t like is coding them.

You have to style the comment text, the commenter’s name, their avatar, the date and time, take care of indented replies, and design the comment box. And don’t forget to find a spot for all those social network log in buttons, too!

Call me lazy if you want, but that’s why I decided to use Disqus when I recently redesigned my blog. It takes care of a lot of those things for you, and the default Houdini theme does a good job of blending in with almost any design .

Still, I couldn’t resist tweaking a couple aspects of the theme: 

Early adopter features

The first thing I did was turn on the Early Adopter Features (Settings > General). I’m not sure what it does exactly, but it sounded cool. After all, who doesn’t want to be an early adopter?

 

However, turning this on will change the markup outputted by Disqus slightly, so you might want to check your settings if you noticed differences between your markup and mine.

Cleaning up

One of Disqus’ big strengths is that it doesn’t just let you create individual comment threads, it also helps you build a community on your site. This is why Disqus has things like Notifications, a Community Box, and Settings for those various features.

However, for my blog I didn’t need to have access to those features right there on the comment thread, so I decided to hide them.

It’s as easy as:

#dsq-global-toolbar{
            display:none;
}

Styling the commenter name

Although the Houdini theme does it bests to disappear (see what I did there?), it’s got a least one distinctive feature, the grey bar that sits behind the commenter’s name. By the way, did you know it’s not just plain grey, but actually transparent grey? That’s how it can blend so well with any color scheme.

Anyway, to remove it and make the commenter’s name stand out a little more, here’s the code I’m using:

.dsq-comment-header{
            background:none;
            padding:0;
            border:none;
            line-height:1.2;

font-size:24px;

}

Rounding the avatars

Rather than keep the default rounder-corner square avatars, I decided to use rounded avatars to keep in with the theme of my site. Here’s the code I used:

.dsq-comment .dsq-avatar img{
            border-radius: 30px;

height:60px;

width:60px;

}

If you set the border-radius at 50% or more than the height and width, you’ll end up with a square so round, it’s actually a circle!

Happy accident

After styling the avatars, I noticed the indented reply form had a little display bug: the avatar was now partially hidden by the text field.

 
But coincidentally, I’m using the same effect in my blog’s header:

 

So I decided to keep it this way after all, even though it wasn’t what I intended in the first place.

Let’s hack!

Sorry if I conjured up images of teenagers cracking into the CIA mainframe. What I mean by “hack” is just using an undocumented Javascript function to make our implementation even more personalized.

ElectricToolbox has a great write-up on how to run code only after Disqus has finished loading.

Here’s what my code looks like:

function disqus_config() {

  this.callbacks.afterRender = [function() {

$(‘#disqus_thread li[style=”margin-left:46px;”]’).addClass(“dsq-comment-child”);

                        $(‘.dsq-trackback-url’).next().addClass(“dsq-trackbacks”);

}];

}

I’m using jQuery to do two simple things:

1. Add the unexplicably missing “dsq-comment-child” to child comments. I’m not sure why it’s not part of the default Disqus markup, but in any case the only way I found of targeting child comments was by their hard-coded (booo!) margin-left attribute. 
2. Add a “dsq-trackbacks” class to the trackback div that comes just after the “dsq-trackback-url” one. Once again, in Disqus’ original markup this div is left mysteriously classless.

Once those classes are there, it will be much easier to target those elements in your CSS to style them properly. Of course you can use that same callback function to add any class you want, or do much more with your comments!

The Final Product:
 

Conclusion

Of course, I can’t cover all the tweaks I did. Most are pretty boring spacing and font adjustments, but they’re important to make sure everything looks just right.

After all, your commenters are people who take time out of their busy schedule of reading Reddit to come explain to you why you’re wrong about whatever topic you were writing about (I’m kidding! I love my commenters), so you want to make sure they have a good experience. And a good design goes a long way towards that.

For more info about customizing the look and feel of Disqus, check out our CSS Styling and Theme Editor docs. We’ve seen other great Disqus custom themes out in the wild as well such as those on Learnvest, Telegraph, Engadget and People. If you have one on your site too, let us know below so we can admire and take inspiration!

Tip of the Week: Personalize your Profile

A Disqus account is already very handy as a persistent profile across all the sites you comment on. Did you know it’s also a powerful tool you can use to personalize your identity, promote your site, and customize your experience across every Disqus site?

Construct your profile

When you leave an interesting comment, people are going to want to find out more about you. Why not tell them a little more? Start by going to your Edit Profile window, accessible on the Disqus dropdown.

• Make a name for yourself. In the Profile tab, Full Name is the name displayed next to your comments. If you didn’t get the username you wanted, this is where you can put it. While you’re at it add a short bio of yourself and your location in the world, which will be visible in the header of your comments and in your public profile.

• Give yourself a face! Using a default avatar is boring, but if you go over to the Avatar tab you can upload an image of yourself. You too can be Internet-famous.

• Connect your other online profiles. Such as Facebook, Twitter, and Google in the Services tab. Or don’t connect them — what circles you want to expose others to is up to you.

Promote your blog or site

A simple, yet often overlooked, option is to add your website into your profile. This means that whenever you leave a comment, your name will link to your website. Leaving interesting comments on other communities will drive traffic to your site. Because people are visiting due to your comment and profile, you can be confident that this is quality traffic by people who want to know more about your message.

Customize your Disqus experience

In the Account tab, you’ll find the username, email and password options. You’ll also see that you can choose your timezone and timestamp format to be either relative or absolute. This will format the timestamps on every Disqus site you visit, so you’ll never wonder when a comment was actually made.

Don’t have a Disqus profile yet? You can easily sign up for one here. If you’ve made any comments on Disqus previously, you can merge them into your shiny new account using our guide.

Pseudonyms

One day, I’d like to circle the globe. I like traveling, but there’s still so much that I’ve yet to see in the world. But in the online world, I’m already an especially well-traveled man. Through the years, I’ve explored and I’ve experienced extensively. Sometimes I’ll end up at amazing destinations with fun, unique cultures. Other times, I’ll stumble into some of the darkest virtual alleyways.

Above all else, I’ve encountered incredible characters. I’ve had conversations with personalities that were wise, generous, or hilarious. I really cared about the things that these people said. But, in most cases, I didn’t even know their real names. They were using online handles, or pseudonyms. These handles may be similar to their real names, but it’s just as likely to be completely fictitious. In these online communities, pseudonyms are nearly essential because they allow people to be expressive, and appropriately so.

Choosing your own name is important

Your parents gave you the name that is on your birth certificate. Online, you can choose your own. Here at Disqus, we care a lot about the concept of pseudonyms online. To us, pseudonyms imply a choice of identity — names are not only for authentication, they’re for expression. On the other side of the argument, others may say that anonymous and pseudonym users are similar, and that the web is better off with required real names for all commenters because the quality would be better. As the Nymwars rages on, we decided to dive into our own data and do some research. How do pseudonym-users measure up against anonymous when it comes to participation and quality?

Click the image below for our results and then read on for more notes.

Notes

• This is only using Disqus content, of course, but the data size is fairly large with 60+ million users and nearly half a billion comments.
• We define anonymous users as users that are completely unverified. Pseudonym users are registered users that are able to choose what they’d like to call themselves. Real name users are those who’ve chosen to identify with Facebook when posting.
• This isn’t an exact science and our methodologies aren’t lab-quality. However, we were careful to not misrepresent (even to ourselves) what our data showed us. Above all else, we dove into our data in order to better understand identity dynamics for improving the actual product.

What’s next? By looking at data on Disqus, we’re able to see pretty interesting things about communities. We’re hoping to identify the traits that make certain communities successful, and build that right into Disqus.