0

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

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);

}

});

});

}

});

}

3 comments

Please sign in to leave a comment.