Archive for the ‘del.icio.us’ Category

How to add digg this, reddit this, et al links to WordPress Posts

Saturday, January 7th, 2006

Want submission links to all the social browsing/bookmarking websites to appear on each of your posts? Then just follow my instructions.
(See bottom of this post for an example and here’s an image of that example in case I ever stop using it on this site someday.)

I searched around for plugins and any advice on how to do this. Upon having no luck I decided to take matters into my own hands. Here’s what you do:

  1. Download these images and upload them to a directory on your webserver.
    del.icio.us
    Digg
    FURL
    Yahoo! My Web 2.0
    Reddit

  2. Now go find these two files in the current theme you are using and get them ready for editing:
    index.php
    single.php

  3. Edit these files by inserting this text between where the post content is printed and the closing parts of the post is printed. (Of course you must add the URL’s of those images from step 1 to this code before it will work.)

    <div class="spreadtheword">
        <a title="Save To del.icio.us" href="http://del.icio.us/post?url=<?php the_permalink() ?>;title=<?php bloginfo('name'); ?> &gt;&gt; <?php the_title() ?>"><img src="[URL DIRECTORY TO WHERE YOU UPLOADED YOUR IMAGE]/delicious.gif" alt="del.icio.us" border="0"></a>&nbsp;|&nbsp;
        <a title="Submit To Digg" href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>" ><img src="[URL DIRECTORY TO WHERE YOU UPLOADED YOUR IMAGE]/digg.gif" alt="Digg" border="0"></a>&nbsp;|&nbsp;
        <a title="Save To FURL" href="http://www.furl.net/storeIt.jsp?t=<?php the_title() ?>;u=<?php the_permalink() ?>" ><img src="[URL DIRECTORY TO WHERE YOU UPLOADED YOUR IMAGE]/frul.gif" alt="FURL" border="0"></a>&nbsp;|&nbsp;
        <a title="Save to Yahoo! My Web 2.0" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<?php the_title() ?>;u=<?php the_permalink() ?>"><img src="[URL DIRECTORY TO WHERE YOU UPLOADED YOUR IMAGE]/yahoomyweb.jpg" alt="Yahoo! My Web 2.0" border="0"></a>&nbsp;|&nbsp;
        <a title="Save to Reddit" href="http://reddit.com/submit?url=<?php the_permalink() ?>;title=<?php the_title() ?>" ><img src="[URL DIRECTORY TO WHERE YOU UPLOADED YOUR IMAGE]/reddit_btn.gif" alt="Reddit" border="0"></a>
    </div>
    

    As an example here is how my final single.php looks (remember you’re also doing this to index.php):

    <?php get_header(); ?>
    <div id="content">
        <?php while (have_posts()) : the_post(); ?>
            <div class="post">
                <h3 class="storytitle" id="post-<?php the_ID(); ?>">
                    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php if (function_exists('ImageHeadline_get_ttf_font_name')) the_title('-image-'); else the_title(); ?> </a>
                </h3>
                <p class="postdate"><strong><?php the_time('l, F jS, Y') ?></strong> at <strong><?php the_time() ?></strong> by <strong><?php the_author(); ?></strong> <?php edit_post_link('Edit','<small>|','</small>'); ?></p>
                <div class="storycontent">
                    <?php the_content('<br /><strong">Read the rest of this entry &#187;</strong>'); ?>
                </div>
    
                <div class="spreadtheword">
                    <a title="Save To del.icio.us" href="http://del.icio.us/post?url=<?php the_permalink() ?>;title=<?php bloginfo('name'); ?> &gt;&gt; <?php the_title() ?>"><img src="http://www.answermysearches.com/wp-content/themes/cleanbreeze/images/delicious.gif" alt="del.icio.us" border="0"></a>&nbsp;|&nbsp;
                    <a title="Submit To Digg" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>" ><img src="http://www.answermysearches.com/wp-content/themes/cleanbreeze/images/digg.gif" alt="Digg" border="0"></a>&nbsp;|&nbsp;
                    <a title="Save To FURL" href="http://www.furl.net/storeIt.jsp?t=<?php the_title() ?>;u=<?php the_permalink() ?>" ><img src="http://www.answermysearches.com/wp-content/themes/cleanbreeze/images/frul.gif" alt="FURL" border="0"></a>&nbsp;|&nbsp;
                    <a title="Save to Yahoo! My Web 2.0" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<?php the_title() ?>;u=<?php the_permalink() ?>"><img src="http://www.answermysearches.com/wp-content/themes/cleanbreeze/images/yahoomyweb.jpg" alt="Yahoo! My Web 2.0" border="0"></a>&nbsp;|&nbsp;
                    <a title="Save to Reddit" href="http://reddit.com/submit?url=<?php the_permalink() ?>;title=<?php the_title() ?>" ><img src="http://www.answermysearches.com/wp-content/themes/cleanbreeze/images/reddit_btn.gif" alt="Reddit" border="0"></a>
                </div>
    
                <div class="feedback">
                    <?php link_pages('<span class="pagelink">Pages: ', '</span> | ', 'number'); ?>&nbsp;
                    <a href="<?php trackback_url(display); ?>" title="Trackback URI"><strong>Trackback</strong></a>&nbsp;
                    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/link.gif" border="0" alt="Permanent link to <?php the_title(); ?>" /> Permalink</a>
                    <?php comments_popup_link('<img src="'.get_bloginfo('template_url').'/images/comments.gif" alt="Comments Icon" /> Post your comments &#187;', '  <img src="'.get_bloginfo('template_url').'/images/comments.gif" alt="Comments Icon" /> 1 Comment &#187;', '  <img src="'.get_bloginfo('template_url').'/images/comments.gif" alt="Comments Icon" /> % Comments &#187;'); ?>&nbsp;
                    <img src="<?php bloginfo('template_url'); ?>/images/filed.gif" alt="Category Icon" /> Filed under: <?php if (function_exists('the_nice_category')) the_nice_category(); else the_category(', '); ?>
                </div>
                <!-- <?php trackback_rdf(); ?> -->
            </div>
            <?php comments_template(); ?>
        <?php endwhile; ?>
        <?php if (function_exists('updateBlogTimePNG')) : ?><div id="blogtimes"><img src="/wp-images/blogtimes.png" alt="blogtimes" width="480" height="65" /></div><?php endif; ?>
    </div>
    <?php get_sidebar(); ?><?php get_footer(); ?>
    

    Now after you’ve saved those changes you should be able to see the links at the end of each post.

  4. The final step which is optional is to edit the style.css file in your theme’s directory to handle the new class “spreadtheword”.
    Here’s what I added to my stylesheet:

    .spreadtheword {
        text-align: right;
        clear: both;
        font-size: 10px;
        padding-bottom: 10px;
    }
    

And that’s it. Good luck, and feel free to post questions or improvements in the comments section.

Hmm, and if you’re really ambitious go ahead and make a plugin that does this for all of this for us.

And of course feel free to push the del.icio.us, digg, reddit,et al buttons below ;-) .


Updates, We’ve got updates:

  1. This generator looks promising. It claims to do what I do here but for a lot more services and supports WordPress.
  2. I removed these links from this this site because no one was using them :-( . Instead of questioning the quality of my own posts, I made up the theory that anyone who cares enough to post something to one of these sites already has the bookmarkletts etc to do it and doesn’t need these links.
  3. The kind folks at reddit have provided a few more button images to choose from.
  4. The Digg button seems to always prompt to add a new digg even if the link is already dugg. I’m looking into this.