16 Jan 2012
W3C Valid Blogger blog: An impossibility
What Happened
Faulty Like Button
All the New posts were showing the Number of likes that the main domain had received rather than the independent Likes of that posts
Unable to Digg
The Digg button was not working for any of the new posts, It was redirecting to a older story that I had Dugg a while back. It was supposing the new posts had already been dugg.
Why it Happened
After going through my source ,it struck that I had removed a couple of lines to achieve W3C validity. After a bit of thinking and testing I realized that the reason for this problem was
<link rel="service.post" type="application/atom xml" title="Blog Name - Atom" href="http://www.blogger.com/feeds/BLOGID/posts/default" />
I had excluded the above line of code, as it was giving a error while the validation process. After including it again ,everything started to work fine.
How was it causing the problem
The cause was the attribute present in the rel tag. W3C showed that the value in the rel tag is not registered
Line 18, Column 158: Bad value service.post for attribute rel on element link: Keyword service.post is not registered.With this problem ,It becomes impossible to make a perfectly Valid W3C blog in which the Like and Digg buttons works correctly. There is a alternative that you can use conditional tags to make the Homepage Valid atleast.
For people using the Standardized and Directus template ,here is how you can fix it :
Find the following code:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type='text/javascript'>(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));null==g&&a.gtbExternal&&(g=a.gtbExternal.pageT());null==g&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var e=0;if(b.offsetParent){do e =b.offsetTop;while(b=b.offsetParent)}b=e;750>=b&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
})();</script>
<meta content='blogger' name='generator'/>
<link href='http://YourBlogName.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://YourBlogName.blogspot.com/' rel='canonical'/>
<link href='http://YourBlogName.blogspot.com/feeds/posts/default' rel='alternate' title='Atom' type='application/atom xml'/>
<link href='http://YourBlogName.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='RSS' type='application/rss xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<!--[if IE]><script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/754431588-ieretrofit.js"></script> <![endif]-->
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," "figure,footer,header,hgroup,mark,menu,meter,nav,output," "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i ) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
Replace it with this line of code:
<b:include data='blog' name='all-head-content'/>
In the upcoming post I will talk how you can achieve W3C validity atleast partially.
I am not aware of the technicalities of why this tag is present in the first place but it has something to with the feed of the post. What are your views on it ?
Til next time,
Prayag Verma
at 13:52
