Blogthis!

You might notice the little “blog this” link to the right there. That’s my first Wordpress plugin.

The code is at http://www.jpstacey.info/blog/files/code/blogthis.zip. This contains the blogthis PHP code and a directory of images. To try it out (for the moment: I’ll sort this all later into a proper installable plugin) do as follows:

Edit: full documentation now available at http://www.jpstacey.info/blog/files/code/blogthis_doc.html.
Edit: made plugin extensible, with admin page and configurability of blog list, images location etc.

• Unpack the zipfile to a safe location - it should create a “blogthis” directory.
• Move the “blogthis” directory to your blog’s plugin directory, typically at wp-content/plugins/.
• Enable the plugin in Wordpress: once you’ve done that you should see a “Blogthis!” link appear in the plugins sub-menu which links to its admin page
• In your theme’s templates, add the following bit of PHP where you want it to appear in the index template (within the blog entry chunk):

<?php if (function_exists(’wp_blogthis’)) wp_blogthis(); ?>

By default, the following XHTML fragment should be created:

<div class=”blog-this”>Blog this:
    <ul class=”blog-this-links” >
        <li><a href=”. . .”><img> Link text</a></li>
        . . .
    </ul>
</div>

The containers can all be edited in the code: if you change the list tags to HTML div tags then it should still understand what’s going on, even if you add classes. I recommend making the following styling and HTML decisions (although of course it’s all up to you!)

• Putting the links in a list (and then turning that list into a div-like structure using display:block in the CSS) is the most accessible way to present the content. People using screen-reader technology will see the title, and can then decide to ignore the list. Almost all common screen-readers ignore HTML div structure completely.
• You can set the styling of the li elements to be display:inline to make the list appear in a line.
• Alternatively, as I’ve done, set the links container’s styling to be display: none by default. You can then set the div:hover styles for both hovering over the blogthis container and the links container. That means as you hover over the outermost container, the links appear; when you move into the links container, it doesn’t disappear!
• To get hovers to work in IE6, use the behavior: url(csshover.htc) trick described on Peter Nederlof’s blog.
• CSS gurus: my current theme’s CSS is at http://www.jpstacey.info/blog/wp-content/themes/pool/style.css, a hacked version of Borja Fernandez’s Pool.

From what I can gather since, I’ve partly reinvented the wheel of Cal Evans’ wp-notable plugin. I think my system is more configurable, though, as you can add and remove blogs you want to submit to. I’m hoping to continue to develop it to be too, so watch this space. Certainly I’d like to bring in more up-to-date considerations like accessibility and XHTML as and when I can. Please give me feedback: I’d love to hear of any suggestions or successes!