Validating Social Networking Buttons

Validating Social Networking Buttons

10 Dec

Author : Rocío Alvarado, Categories : Social networks, Websites

We wanted to validate our blog with W3C Web standards and found that the social networking buttons we had originally implemented did not validate. I did some research and some implementations and here is what we concluded.

Facebook Like button

I found a functioning Javascript validator for this button created by Kevin Lieser. Read about it @ http://intensewebsites.blogspot.com/2010/11/fix-for-w3c-valid-xhtmlrdfad....

The only issue with this is that when Facebook changes the button's code then this fix might not work. Look for the updated version of the Javascript @ http://www.ka-mediendesign.de/blog/facebook-markup-language-fbml-in-vali....

Facebook share

The original of this share button is found @ Facebook Share under Creating Your Own Share URL.

<a href="http://www.facebook.com/sharer.php?u=<TheCurrentPageURL>&amp;t=<TheCurrentTitle>" title="Click to share this post on Facebook"><img src="<TheFacebookIcon. gif >" alt="Facebook link" /></a>

Here, I added the u and the t parameters to the href, a title to the link, replaced all the ampersands with "&amp;" and used an icon in our collection.

Twitter share

The original of this share button is found @ Tweet Button under Build your own.

<a href="http://twitter.com/share?url=<TheCurrentPageURL >" title="Click to share this post on Twitter"><img src="<TheTwitterIcon.gif>" alt="Twitter link" /></a>

Here, I added the url parameter to the href, a title to the link and used an icon in our collection.

Digg share

The original of this share button is found @ Integrate: The Digg Button under the section Url.

<a href="http://digg.com/submit?url=<TheCurrentPageURL>&amp;title=<TheCurrentTitle> " title="Click to share this post on Digg"><img src="<TheDiggIcon . gif >" alt="Digg link" /></a>

Here, I removed the classes associated with the a href, added the title parameter to the href, added a title to the link and used an icon in our collection.

Delicious share

The original of this share button is found @ Save Buttons.

<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'
&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;" title="Click to share this post on Delicious"><img src="<TheDeliciousIcon. gif >" alt="Delicious link" /></a>

Here, I replaced all the ampersands with "&amp;", added a title to the link and an icon in our collection instead of text as the link.

Why go through all this?

Validating your XHTML and CSS gives you a greater legitimacy in terms of basic web development. Web standards are also the fundamentals for Web accessibility, allowing a wider range of individuals to easily access your content. After all, that's the purpose of the Internet - access to content.

What is the W3C? Where can I validate my site?

The W3C stands for the World Wide Web Consortium. It is a group of people from all over the world who establish guidelines for Web development. These guidelines are called Web standards. There are a few validators out there, but the one that rules is the Markup Validation Service by W3C. You can also validate your CSS with CSS Validation Service.

Another article on blog validation: http://letupdate.com/how-to-w3c-validation-blogging-tips-blog/

Tags : css, delicious, digg, facebook, twitter

Add new comment

Image CAPTCHA
Enter the characters shown in the image.