Jarrod Trainque

9Sep

Easy integration of del.icio.us with your blog

Summary: an easy way for Wordpress users to update and customize their blog with del.icio.us daily blog postings, including auto-creation of mini-posts & customized post titles

If you use Wordpress for your blog and are a del.icio.us user, you have a couple of different options for integrating your del.icio.us links into your blog.

One way would be to use an RSS parser such as Carp to syndicate your del.icio.us feed. In order to stay in compliance with del.icio.us’ policy, you’d need to cache your feeds so that you aren’t hitting del.icio.us’ server with each page load.

Cached feeds have a couple of disadvantages. First, you aren’t managing the content in Wordpress, your del.icio.us links are ephemeral. Search engines that haven’t spidered your site in a few days could bring visitors to a page that has since been updated (and no longer has relevant content). Secondly, since RSS feeds would be ported into Wordpress, you lose some functionality, such as the ability for visitors to leave comments.

Another approach is to use a Wordpress Plugin that posts directly to your blog. I haven’t used these, but most likely they work by fetching an RSS feed and displaying it on your site (much like any RSS parser. Or, they use the del.icio.us API to grab posts and publish to your site.

Del.icio.us’ Built-in Daily Blog Posting

The easiest way is to configure a del.icio.us daily blog posting. What this does is automatically post a day’s worth of del.icio.us links to your blog

You can set this up under the “settings” tab in your del.icio.us account, or by going to “http://del.icio.us/settings/username/daily”. The fields are a bit vague, so here’s what each means:

  • job_name - just a name for this particular configuration; can be anything
  • out_name - the username that you use to log into your site
  • out_pass - the password used to log into your site
  • out_url - the full url of the xmlrpc file for your site (e.g. “http://your-site.com/xmlrpc.php” for Wordpress users
  • out_time - the hour of the time you want to publish your links. 20=4PM EDT, 19=3PM EDT, etc.
  • out_blog_id - the blog ID that you are posting to. If you are not running multiple blogs this is usually going to be “1″.
  • out_cat_id - the ID of the category you are posting to. (This doesn’t seem to work for Wordpress, though.)

Once you have these set up, just bookmark away and watch your links appear on your blog as entries, manageable from the Wordpress administration.

Customizing the Appearance

Once you have successfully set up your del.icio.us account to talk to your blog, you might want to alter the appearance of these “special” posts.

You’ll notice that the posts contain all the tags a particular link was filed to, along with links back to del.icio.us. While these are useful on the del.icio.us site, I really didn’t want them to appear on my site. In addition, I didn’t like how the description breaks onto a second line. Here’s an example of what a link might look like:

Fortunately, the del.icio.us post comes marked up with all sorts of useful CSS classes, so you can alter the appearance of the daily blog posting by changing your stylesheet.

I wanted my links to look like this, with no tags and unbroken description preceeded by a dash

Here’s the CSS code that I added to my stylesheet to get this to work:

    .delicious-link{
    display: inline;
    }

    .delicious-tags{
    display: none; 
    }

    .delicious-extended{
    display: inline;
    margin-left: .25em; 
    }

    .delicious-extended:before{
    content: "- "; 
    }

    .delicious-tags a,
    .delicious-tags a:link,
    .delicious-tags a:hover,
    .delicious-tags a:active,
    .delicious-tags a:visited{
    }

Customizing The Post Titles

The default format for the each post title done by the del.icio.us daily blog post script is links for YYYY-MM-DD. Booooorrriiing. Here’s how you can customize the titles to be something a bit more fun.

In your Wordpress Main Template (index.php) theme file, look for the tag the_title. It probably looks like this:

   <h2><a href="<?php the_permalink() ?>" title="Permalink"><?php the_title(); ?></a></h2>

What you want to do is use PHP to recognize any post with a title beginning with “links” and do something different, like rename the title “Cool Links of the Day”. You’d replace the above code with the following for this to work:

   <?php $string_title = the_title('','',false); ?>
   <?php
   if (preg_match ("/links/i", "$string_title")) {?>
   <h2><a href="<?php the_permalink() ?>" title="Permalink">Cool Links of the Day</a></h2>
   <?php } else { ?>
   <h2><a href="<?php the_permalink() ?>" title="Permalink"><?php the_title(); ?></a></h2>
   <?php } ?>

What the above code does is really simple…First it checks to see if the post contains the word “links”, and if so, replaces the title with “Cool Links of the Day”. Otherwise, it uses whatever title the post has. (Note that non-del.icio.us posts with the word “links” in them would be treated the same as del.icio.us daily blog posts, so you might want to watch out for that.)

Note that this doesn’t change the actual title of the del.icio.us daily blog post in Wordpress; it only changes what the user sees.

Using regular expressions to create mini-posts

by elaborating on the above concept, you could have each del.icio.us daily blog post be styled differently than regular posts. Some blogs have miscellaneous links interspersed with posts (e.g. kottke). These are commonly called “mini-posts” and while they are managed inside Wordpress much like any other post, there’s no reason they couldn’t be styled differently.

The idea is simple. You use an if/else statement to check a parameter (such as post title) for a predefined match, and if a match is found the output is altered. No changes are made to the Wordpress backend, and there’s no need to add custom fields on a post-by-post basic. If you want to revert back, you simply edit a few lines of code.

Here’s an example of how you might customize Wordpress’s Main Template to allow for automatic generation of mini-posts from del.icio.us daily blog posting.

<?php get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php $string_title = the_title('','',false); ?>
<?php if (preg_match ("/links/i", "$string_title")) {?>
<div class="minipost">
<p>
<!-- stick your Wordpress template tags for the minipost here -->
</p>
</div><!-- /minipost -->
<?php } else { ?>
<div class="entry">
<p>
<!-- stick your Wordpress template tags for the regular entries here --> 
</p>
</div><!-- /entry -->
<?php } ?>
<?php endwhile; ?>
<?php else : ?>
<h2>Search Results</h2>
<p>no search results found</p>        
<?php endif; ?>
</div> <!-- /content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

After this, you just need to change your CSS to reflect the new mini-post class, and viola - instant automatic mini-posts from your del.icio.us account.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

12 Comments

  1. Pingback by Cosas por hacer » links for 2005-11-04 — November 4, 2005 @ 7:36 pm

    […] Easy integration of del.icio.us with your blog Jarrod Trainque (tags: wordpress del.icio.us tags tutorial) […]

  2. Pingback by Sector 42 » Blog Archive » Links for Today — November 6, 2005 @ 3:09 am

    […] Easy integration of del.icio.us with your blog (tags: wordpress del.icio.us howto) […]

  3. […] Easy integration of del.icio.us with your blog - Jarrod Trainque (tags: blogging worpress integration) […]

  4. […] Nog meer voorbeelden om deze posts aan te passen naar uw noden, kan je hier terugvinden. […]

  5. […] Easy integration of del.icio.us with your blog - Jarrod Trainque 20=4P (tags: wordpress del.icio.us tags plugin) […]

  6. […] Easy integration of del.icio.us with your blog - Jarrod Trainque (tags: howto del.icio.us) […]

  7. Pingback by vrypan|net|log » I’m so excited! — December 13, 2005 @ 2:29 pm

    […] Our blogs are becoming more than just an electronic equivelent of a diary or newspaper, they are an electronic camvas that displays information from our del.icio.us bookmarks, pingbacks and trackbaks, and they interact with the rest of the Web, creating their own “Cosmos”. […]

  8. […] And for my own future reference, because I am too lazy and headachy to figure out how to get this working now: Using the Stumbleupon XML Feed. Also this. […]

  9. Pingback by Born On the Web » links for 2006-02-18 — February 18, 2006 @ 5:48 pm

    […] 1 – Easy integration of del.icio.us with your blog – m.iscellaneo.us Works like a charm … (tags: wor) […]

  10. Pingback by Gilles Dubois Bookmarks » links for 2006-04-12 — April 12, 2006 @ 4:25 am

    […] Easy integration of del.icio.us with your blog (tags: wordpress del.icio.us) […]

  11. […] Easy integration of del.icio.us with your blog (tags: wordpress del.icio.us) […]

  12. Pingback by   links for 2007-07-11 by SridhaReena — July 11, 2007 @ 11:18 pm

    […] Jarrod Trainque ยป Easy integration of del.icio.us with your blog (tags: del.icio.us wordpress) […]

RSS feed for comments on this post.

Leave a comment