Use Only Genuine Interocitor Parts

Add to Technorati Favorites

Endorsements

Firefox 3

Add A Digg Badge To WordPress Posts/Pages

Saturday, August 25th, 2007 at 12:38 pm by Kenny

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.


  • E-mail this story to a friend!
  • Google
  • Digg
  • Technorati
  • del.icio.us
  • Slashdot
  • TwitThis
  • Furl
  • Fark
  • Reddit
  • StumbleUpon
  • Facebook

Posted in Web Development, WordPress |

You can follow any responses to this entry through the RSS 2.0 feed. Trackback from your own site.

8 Responses to “Add A Digg Badge To WordPress Posts/Pages”

  1. Chris - Sunday, December 23rd, 2007 at 3:11 pm :

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

    Chris

  2. Shaw - Tuesday, December 25th, 2007 at 10:13 pm :

    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

  3. Como agregar el boton (badge) de DIGG en tus posts | power.org.mx - Saturday, December 29th, 2007 at 12:26 am :

    [...] Este artículo lo leí en : http://www.kennycarlile.net [...]

  4. Jeff - Saturday, January 5th, 2008 at 9:16 pm :

    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?

  5. How to place a ‘Digg It’ button in your blog posts | HowToTuts.com - Sunday, January 27th, 2008 at 11:17 pm :

    [...] http://www.kennycarlile.net/2007/08/25/add-a-digg-badge-to-wordpress-postspages/ We hope you found this how-to helpful. Please social bookmark this tutorial and help us and others. [...]

  6. Un badge Digg senza plugin » Ubuntu block notes - Saturday, May 31st, 2008 at 7:41 am :

    [...] su Digg. Ho cercato un plugin che facesse questo lavoro, ma nella ricerca mi sono imbattuto in questo post: in sostanza come aggiungere Digg al proprio blog senza l'ausilio di alcun plugin. Ecco come [...]

  7. Jason - Thursday, July 17th, 2008 at 1:39 am :

    Hello, thank you for your excellent code for the digg badge. I have used it on my site, however I am having trouble getting it in-line with my date/print line.

    Here is an example post:

    http://jasoncollin.org/2008/07/15/barack-obama-wants-to-change-tokyo-curry-prices/

    If you could tell me how to get the badge to be in-line, right next to the "Print This Article" text I would greatly appreciate it. Thank you.

  8. Sujhon - Wednesday, October 8th, 2008 at 9:47 pm :

    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?

Leave a Reply