Recently I was doing W3C validation for a website and bumped into a validation trouble because of some social media buttons added to the website. These buttons was added using the famous & widely used AddThis Share Buttons. On Validating I was getting following errors –
there is no attribute “fb:like:layout”
there is no attribute “g:plusone:size”
Some people recommend using iframe embed code as an alternate to this, but the fact is sometimes it’s not possible. Apparently the attribute allowTransparency which is used in iframe also does not validate successfully in the W3C validator. However a simple JavaScript trick can help you pass these button from the W3C validator. The AddThis button code looks like –
<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <!-- AddThis Button END --> |
We are going to encode this code using the free Online Unescape Decoder and Encoder. One you encode your AddThis button code, the encoded embed code will look like the one pasted below –
%3C%21%2D%2D%20%41%64%64%54%68%69%73%20%42%75%74%74%6F%6E%20%42%45%47%49%4E%20%2D%2D%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%74%6F%6F%6C%62%6F%78%20%61%64%64%74%68%69%73%5F%64%65%66%61%75%6C%74%5F%73%74%79%6C%65%22%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%66%61%63%65%62%6F%6F%6B%5F%6C%69%6B%65%22%20%66%62%3A%6C%69%6B%65%3A%6C%61%79%6F%75%74%3D%22%62%75%74%74%6F%6E%5F%63%6F%75%6E%74%22%3E%3C%2F%61%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%74%77%65%65%74%22%3E%3C%2F%61%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%67%6F%6F%67%6C%65%5F%70%6C%75%73%6F%6E%65%22%20%67%3A%70%6C%75%73%6F%6E%65%3A%73%69%7A%65%3D%22%6D%65%64%69%75%6D%22%3E%3C%2F%61%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%63%6F%75%6E%74%65%72%20%61%64%64%74%68%69%73%5F%70%69%6C%6C%5F%73%74%79%6C%65%22%3E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E%0A%0A%3C%21%2D%2D%20%41%64%64%54%68%69%73%20%42%75%74%74%6F%6E%20%45%4E%44%20%2D%2D%3E |
Now to render the buttons correctly on the webpage, we need to unescape() the encoded string and then simply use the document.write() function of JavaScript and you are done! Your source file should contain the JavaScript code like –
document.write(unescape('%3C%21%2D%2D%20%41%64%64%54%68%69%73%20%42%75%74%74%6F%6E%20%42%45%47%49%4E%20%2D%2D%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%74%6F%6F%6C%62%6F%78%20%61%64%64%74%68%69%73%5F%64%65%66%61%75%6C%74%5F%73%74%79%6C%65%22%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%66%61%63%65%62%6F%6F%6B%5F%6C%69%6B%65%22%20%66%62%3A%6C%69%6B%65%3A%6C%61%79%6F%75%74%3D%22%62%75%74%74%6F%6E%5F%63%6F%75%6E%74%22%3E%3C%2F%61%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%74%77%65%65%74%22%3E%3C%2F%61%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%67%6F%6F%67%6C%65%5F%70%6C%75%73%6F%6E%65%22%20%67%3A%70%6C%75%73%6F%6E%65%3A%73%69%7A%65%3D%22%6D%65%64%69%75%6D%22%3E%3C%2F%61%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%61%64%64%74%68%69%73%5F%63%6F%75%6E%74%65%72%20%61%64%64%74%68%69%73%5F%70%69%6C%6C%5F%73%74%79%6C%65%22%3E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E%0A%0A%3C%21%2D%2D%20%41%64%64%54%68%69%73%20%42%75%74%74%6F%6E%20%45%4E%44%20%2D%2D%3E')); |
I hope this helps you to get your website validated. Do let me know your comments and thoughts.
Stay Digified!!
Sachin Khosla
