Forums/Community/Community tips & tricks

Show personal user badges in forum comments - Badges linked with user tags (Web portal)

Mikhail Zakharov
posted this on August 10, 2012 06:01

At the many forums (e.g. Technet or MSDN) you can see a user badges (MVP etc.). Also Zendesk's support forum indicates Zendesk's engineers by green box.
I'll show how you can assign and show user badge.

(Not work at all cases. Please read comments below)

Example.
You have a users in your forum community which helps others with programming. And you want to mark these users by badge "The Best Dev!"

For realizing it paste the code from bottom of page or from Pastebin http://pastebin.com/Czqh9yE5 to Global Javascript widget.
Assign tag "badge_gurudeveloper" to user. That's all =) You can see a green box with "The Best Dev!" string under the user name.

Configuration of script. To set up a badges you should configure DefineBadge function. "If" section "if (tags.toLowerCase().indexOf("badge_gurudeveloper") >= 0)" contains condition to select defined tag. And if user has these tag mark it by calling CreateBadge function.
If you have to use different badges linked with different tags simply duplicate "If" section.

 


function CreateBadge(btext, post_id)
{
// Function for inserting a badge
var post_path = "post_"+post_id;
$j("div#"+post_path+" div.user_badge div.name").append("<div style='background-color:#269469; padding:2px; color:white;'>"+btext+"</div>");
}

function DefineBadge(tags, post_id)
{
// Function define badge by tags
if (tags.toLowerCase().indexOf("badge_gurudeveloper") >= 0)
{
CreateBadge("The Best Dev!", post_id);
}
}


// Get current url
var s_url=window.location.pathname;
var s_urlparts = s_url.split('/');
var s_section = s_urlparts[1];

// Run if we in the "entries" section
if (s_section=='entries')
{
// Get topic id
var s_topicID = s_urlparts[2].split('-')[0];
// Use new awesome API
var s_zurl = "/api/v2/topics/"+s_topicID+"/comments.json";

new Ajax.Request(s_zurl,
{
method:'GET',asynchronous: true,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
$j.each(obj.topic_comments, function () {
var post_id=this.id;
var user_id = this.user_id;

//Get user data

//Call server. Use old API =);
var s_zurl_u = "/users/"+user_id+".json";
new Ajax.Request(s_zurl_u,
{
method:'GET',asynchronous: false,onSuccess: function(transport)
{
var obj = transport.responseText.evalJSON();
tags = obj['current_tags'];

DefineBadge(tags, post_id);
}
});

});
}
});
}

 

Comments

User photo
Adam
Zendesk

Mikhail Zakharov this is really great! Zendesk clearly needs this feature but it looks like the call you are making to the API is an admin-only endpoint. End-Users in your forums won't see the badges because they can't lookup details on other end-users in your account. 

 

You could create a JSON array (or JSONP from another source?) with a list of userid's that are "developers" and then match on that if the userid's are in the DOM somewhere. Would that work?

August 10, 2012 10:23
User photo
Mikhail Zakharov
Портал технической поддержки
Adam, Thank you that you pointed this. It's my fault :-) I forgot that users don't have an access to API. Right. To make it visible to end users it should use an external server component. I'll try to do it.
August 10, 2012 22:08
User photo
Jennifer Rowe
Zendesk

Adam decided to write a "badge" widget himself! Check it out here.

February 11, 2013 16:17