I should clarify the opening statement I made.  The social bookmarking mechanism works great and does exactly what most of us need for it to do.  However, there are a couple of small oversights in it.  This first and foremost problem with it is that the badges right now require that someone has file access to the server.  We will move beyond that for this blog entry.  I am sure that an interface is planned in the near future to accomplish this.

Social Bookmark Badges

Right now, we can easily edit the social bookmark badges that show up at the bottom of your blog.  Here is what mine used to look like.  Note that the icon furthest to the right is for DotNetKicks.

If you go into the ~/DesktopModules/Blog/ShareBadge/js/ShareBadgeChicklets.js file, you will be looking at a JavaScript that adds a number of different social bookmark badges to the bottom of your blog.  To remove any, simply "comment out" the respective lines of JavaScript that initialize said bookmarks badges.  For instance, here is an example of commenting out the Facebook badge.

//Facebook
/*
sb_chicklets[33][0] = strImagePath + "images/i_facebook.gif";
sb_chicklets[33][1] = "Facebook";
sb_chicklets[33][2] = "facebook";
sb_chicklets[33][3] = "http://www.facebook.com/sharer.php?u={url}&t={title}";
*/

You will notice that I didn't use the double slashes for the comments.  As a practice I never do.  This is because there are many white space filters and compression tools that choke on them, causing JavaScript errors.

Adding a new badge is quite simple.  Just copy the same format, and add another instance of a badge at the bottom of the same JavaScript file.  Either that, or you can just replace the existing code for a badge you do not want.  (Just the values, not the object names or indexes.)

The Problem

The problem I had with the existing implementation is that I could not add the DotNetKicks badge the way that DotNetKicks suggests.  I wanted the badge that shows the "kick" count.  This simply was not possible with the current JavaScript code.

The Solution

The badges are actually injected in the shareBadge method in the ~/DesktopModules/Blog/ShareBadge/js/ShareBadgePro.js JavaScript file.  In that method, the URL specified in the previous JavaScript file is parsed for the blog title and url tokens.  The tokens are then replaced with the respective values.

Note that there is a whole lot more plumbing than this that make the badges happen. Modifications may need to be made elsewhere as well to accomplish certain tasks.

That doesn't sound bad right?  Wrong.  DotNetKicks uses an ASP.Net Handler class to return the image used in the badge that I want to use.  The handler expects to have the blog URL passed as a query string parameter.  If you look at the default code that parses the badge values, it only replaces the URL in the link, not the URL.

function shareBadge(e) {
    var chickletId = this.id.replace(/[^0-9]/g,'');
    var sb_targetToolbarTitle = document.getElementById(this.getAttribute("rel") + '_title');
    var sb_targetToolbarUrl = document.getElementById(this.getAttribute("rel") + '_url');
   
    var actionUrl = sb_chicklets[chickletId][3];
   
    actionUrl = actionUrl.replace('{url}', escape(sb_targetToolbarUrl.innerText));
    actionUrl = actionUrl.replace('{title}', escape(sb_targetToolbarTitle.innerText));
    window.open(actionUrl);
}

In effect, the preferred DotNetKicks badge will not work with the default code in place.  With a couple of minor changes in the shareBadge method in ShareBadgePro.js, we can now replace the same values in the image path.

function shareBadge(e) {
    var chickletId = this.id.replace(/[^0-9]/g,'');
    var sb_targetToolbarTitle = document.getElementById(this.getAttribute("rel") + '_title');
    var sb_targetToolbarUrl = document.getElementById(this.getAttribute("rel") + '_url');
   
    var actionUrl = sb_chicklets[chickletId][3];
   
    actionUrl = actionUrl.replace('{url}', escape(sb_targetToolbarUrl.innerText));
    actionUrl = actionUrl.replace('{title}', escape(sb_targetToolbarTitle.innerText));

    /* MODIFICATION by Will Strohl - 20081224 */
    /*
        Want to be able to handle when images are implemented using ASPNet handlers, like DotNetKicks
    */
    var actionImg = sb_chicklets[chickletId][0];
    if(actionImg.indexOf('{url}') >= 0 || actionImg.indexOf('{title}') >= 0){
        actionImg = actionImg.replace('{url}', escape(sb_targetToolbarUrl.innerText));
        actionImg = actionImg.replace('{title}', escape(sb_targetToolbarTitle.innerText));
    }
   
    window.open(actionUrl);
}

You will notice that I didn't replace the values right away.  I first parse to see if I need to replace the values.  This saves rendering time, as the strings are not then arbitrarily thrown through the replace method when they don't need to be. 

So, what did this just do for us?  Well, it enabled us to be able to apply the default DotNetKicks code into our badge assignment.  The original looks like this:

//DotNetKicks
sb_chicklets[32][0] = strImagePath + "images/i_dotnetkicks.gif";
sb_chicklets[32][1] = "DotNetKicks";
sb_chicklets[32][2] = "dotnetkicks";
sb_chicklets[32][3] = "http://www.dotnetkicks.com/submit/?url={url}&r=inspectorit&title={title}";

After we make the intended adjustments, the badge code looks like this:

//DotNetKicks
sb_chicklets[32][0] = "http://www.dotnetkicks.com/Services/Images/KickItImageGenerator.ashx?url={url}";
sb_chicklets[32][1] = "DotNetKicks";
sb_chicklets[32][2] = "dotnetkicks";
sb_chicklets[32][3] = "http://www.dotnetkicks.com/kick/?url={url}&r=Will+Strohl&title={title}";

Once the code is placed on the server, we will have the desired effect.  See my screen shot below.  You will see the DotNetKicks badge that we're used to.

Conclusion

I hope that this tutorial helps you gain the confidence needed to explore the wide world of the DNN Blog Module.

Technorati Tags: DNN, DotNetNuke, DNN Blog, How To, Tricks, Blog Module, Social Bookmarking