Add A Digg Badge To WordPress Posts/Pages

I know there are a lot of widgets and plugins for WordPress out there for adding a Digg badge to posts (I know, because I tried half a dozen or so of them) but I didn't find any that worked consistently and provided the functionality I wanted. After researching the Digg Tools API and a few other examples online, I've composed this block of code for generating Digg badges.

To add a Digg badge to your WordPress posts or pages, simply add the following code block immediately before or after the PHP block that contains the_content(). For posts, you would want to modify the Main Index Template, Single Post, and Archives theme files. For pages, you simply need to modify the Page Template theme file. Here's the code:

<div class="diggLink">
    <script type="text/javascript">
        digg_url = '<?php the_permalink() ?>';
        digg_title = '<?php the_title(); ?>';
        //digg_topic = 'TOPIC'; // replace TOPIC
        /*
        Use the output buffer to capture the text
        output from the_ID() rather than having
        it rendered to the page.
        */
        digg_bodytext = '<?php
            ob_start();
            the_ID();
            $postID = ob_get_contents();
            ob_end_clean();
            /*
            Get the body of the post, remove HTML,
            remove carriage returns and line feeds,
            escape 's, return only the first 350 char.
            */
            $postObj = get_post($postID, OBJECT);
            $body = strip_tags($postObj->post_content);
            $body = str_replace(chr(10), '', $body);
            $body = str_replace(chr(13), '', $body);
            $body = addslashes($body);
            echo substr($body, 0, 350);
        ?>';
    </script>
    <script src="http://digg.com/tools/diggthis.js"
        type="text/javascript"></script>
</div>

I've also added a class to the wrapping DIV and added it to the stylesheet for my theme to style the positioning of the Digg badge. I place the above code right before the the_content() block and this CSS class is what positions my Digg badge to the right of my posts.

.diggLink
{
    float: right;
    margin-bottom: 4px;
    margin-left: 4px;
}

If you'd like to set your posts to all submit to one particular topic, you can uncomment the line that refers to digg_topic in the code block and then change TOPIC to the topic you'd like to use. You can find the list of topics on the Digg Tools API page.

If you have any questions, feel free to comment and ask me. By the way, this same code block is currently in use at Pac Ten Review.

Comments

Thanks for the great info. Used it in my new blog.

Chris

Code didn't work. In fact, it crashed my blog. :(

Edit: Perhaps you're using an incompatible version or you didn't install it correctly. The code has worked for many people. Try the Digg Badger plugin I've written rather than this cut and paste code block. - Kenny

This is great info but I have a QUESTION! Please help!

I got the Digg badge to show up in my blog (main sheet as well as the single post) but for the life of me I can not get the digg badge to be at the top right of my post (it's always showing at the bottom of each post).

I tried adding your 2nd code to the stylesheet but when I did that it did nothing...

PLEASE help! What do I need to do? Which file do I need to edit?

Thanks for info... I was looking for a way to customize the button to match it with my website... but since it pulls the image from diggs site.. i guess there is no way..or is there?

Add new comment

You can optionally provide your email address, which will remain private, if you wish to be contacted directly about this comment.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.