Digg This!

Some of you may have noticed a new addition to my blog, a Digg panel on the right sidebar. This show the most recent articles I’ve dugg on the digg website.

Digg Logo

For those of you new to Digg, it’s a user-generated, community-driven syndication website which also provides several successful social networking aspects. If you don’t quite understand what that means or want to find out more, take a look at the Wikipedia page!

The embedding was unfortunately not as easy as I had hoped, since I had created my own custom skin for b2evolution. This meant that some CSS hacking was required to make the new addition fit in so naturally. I’ve provided the necessary code below if anyone else wants to give it a try.

#digg-widget-container div {
    display: none;
}
 
#digg-widget-container {
    margin-bottom: 10px; 
}
 
#digg-widget-container ul {
    margin-top: -15px;
    background: none;
}
 
#digg-widget-container li {
    margin-top: 3px;
}
 
#digg-widget-container h3 {
    font-size: 90%;
    text-transform: none;
    margin: 0 0 0 40px;
    color: #ffffff;
    background: none;
    font-weight: normal;
    text-align: left;
    padding: 0px;
}
 
#digg-widget-container li:before { 
    content: ""; 
}

It may be best to note that this does not just modify the generated JavaScript styles for the Digg list, but also includes a few hacks to sort out conflicts with my custom skin.

If you also want to add a Digg button like the one above this very blog item, I’d advise you forget the ones listed on the b2evolution plugin site. I’ve tried them and they are just a pain to get working. I found it easier to just add the Digg API code directly into the template file and skin as necessary.

<div class="digg_button">
    <script type="text/javascript">
    //<![CDATA[
    var digg_title = '<?php $Item->title('', '', false); ?>';
    var digg_url = '<?php echo $Item->get_permanent_url(); ?>';
    var digg_bodytext = null;
    var digg_skin = 'compact';
    //]]>
    </script>
    <script type="text/javascript" src="http://digg.com/api/diggthis.js"></script>
</div>

If you need a more detailed description on what to do to where, just leave a comment below.