Flickr Badge & Akismet Widget W3C Validation problem & solution

Today I was playing around with my blog, updating theme, WP engine and plug-ins, and also implementing some changes in CSS styles. As it is already stated in the footer of this blog I use HemingwayEx theme by Nalin, which I’ve slightly ((Emphasis on slightly)) modified. This theme is really nice and clean, and Nalin did a really good job with it. I did two (visually) notable changes in CSS: I changed link and link hover styles and I changed alignment of post and page text to justified. Wordpress is updated to 2.6.3, I added WP-Footnotes plug-in and I enabled WP related posts plug-in (still not not sure I will keep it). Suggestions and comments to this changes would be appreciated. But back to the point..

After I was done, I tried to validate my page with W3C Validator and validation failed with over 30 errors. Quick review of the errors however pointed out two mayor problems: Flickr badge and Akismet widget.

1. Flickr badge
As you probably already noticed I use Flickr badge to show random 10 photos from my publick Flickr photoset on this blog. Flickr has a tool that allows you to create this kind of badge and insert it into your page. Actually the badge Flickr produces is almost useless so you will have to do some cleaning ((Use Google if you don’t know how to do it yourself.)) of unnecessary code and styles first, but that is not my point. After the cleanup I was left with this code:

<

p style=“text-align: left;”><div class="flickr_badge_image"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=random&size=s&layout=h&source=user&user=22500348%40N03"></script> </div>

This code however still won’t validate. I found answer on this blog. For this code to be valid XHTML 1.0, we need to change ampersands (&) to XHTML entities as explained here. After that we get this code

<

p style=“text-align: left;”><div class="flickr_badge_image"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=random&size=s&layout=h&source=user&user=22500348%40N03"></script> </div>
that validates flawlessly.

2. Akismet widget
Second problem I faced was connected with Akismet widget and was a little bit harder to trace and eliminate. I use 2.2.1 version of plug-in and I don’t guarantee that this instructions ((I found solution here, but the line is different.)) will also work on any other version.
2.1. FTP to your server and edit akismet.php file in your WP plugins folder.
2.2. Go to the line 835 where you will find code like this:

<div id="akismetwrap"><div id="akismetstats"><a id="aka" href="http://akismet.com" title=""><?php printf( __( '%1$s %2$sspam comments%3$s %4$sblocked by%5$s<br />%6$sAkismet%7$s' ), '<div id="akismet1"><span id="akismetcount">' . $count . '</span>', '<span id="akismetsc">', '</span></div>', '<div id="akismet2"><span id="akismetbb">', '</span>', '<span id="akismeta">', '</span></div>' ); ?></a></div></div>

2.3. and change it into this:

<div id="akismetwrap"><div id="akismetstats"><span id="akismet1"><span id="akismetcount"><?php echo $count; ?></span> <span id="akismetsc"><?php _e('spam comments') ?></span></span> <span id="akismet2"><span id="akismetbb"><?php _e('blocked by') ?></span><span id="akismeta">Akismet</span></span></div></div>

This will somehow cripple the widget by making it static to show only the number of spam comments cleaned, but it still is a solution.

And that’s all folks! Now my blog validates again. I really hope this helps someone, because I lost quite some time before I found those solutions.

— Regards, Milan