Valid Twitter, Google +1 and Facebook “Like” buttons for HTML5 and XHTML 1.0
Create Twitter “Tweet”, Google “+1” and Facebook “Like” buttons with counters that validate as HTML5 and XHTML 1.0 Transitional or Strict.
With the growth of social media and its increasingly useful role in increasing site traffic, many web designers want to include buttons which users can click to share page links with their friends on Twitter, Google Plus and Facebook.
Each of these websites provide facilities to generate a code snippet that can easily be included in a page’s markup. Unfortunately none of these sites provides code which validates as XHTML 1.0 Transitional or HTML5.
Here I have provided code that will validate and which is stripped of CSS formatting (as much as practicable) so that you can include the code in your websites and display it as you wish. I have chosen to provide the code for smaller vertical-format buttons (with counts) that will render correctly in all current browsers as well as Internet Explorer 8:
1. Twitter’s “Tweet Button”
Twitter’s button generator produces the following invalid code:
I have adjusted this code so that the invalid
data-via tags are removed and replaced with a valid query string as follows:
Note: You will need to insert your web address and Twitter username in the appropriate fields. I have also made use of PHP echo so your current page’s URL will be displayed in the ‘Tweet’ without you having to manually code it for each page’s script.
If your server or pages don’t support PHP, you can manually insert the page’s web address on static pages, but the URL needs to be encoded, hence
http%3A%2F%2Fwww.yourwebsite.com. To make this process easy, I recommend the Unicode Code Converter.
2. Google’s “+1” button
Google’s +1 button generator, when asked to produce a “medium” (20px) button in English (UK) produces the following invalid code:
Yuck! Luckily a much neater (and valid code) is available thanks to Gabriel Hautclocq at GabSoftware.
As promised, this lighter code validates as XHTML 1.0 Strict, XHTML 1.0 Transitional and HTML5. If one of the other button styles is preferred, the variables can be altered accordingly.
Please note that the Google +1 button will not display in Internet Explorer 7 or less.
3. Facebook’s “Like” or “Recommend” button
Facebook’s “Like” button generator, when asked to produce a button with counting, without faces and using the verb “like” (instead of “recommend”) generates the following invalid iframe code:
<iframe src="http://www.facebook.com/plugins/like.php?&href&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"> </iframe>
Unfortunately the Facebook “Like” button code needs some conditional comments to display properly in Internet Explorer 8 or less:
<!--[if IE]> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode("http://www.yourwebsite.com" . $_SERVER["REQUEST_URI"]); ?>%2F&layout=button_count&show_faces=true&width=300&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border-style:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"> </iframe> <![endif]--> <!--[if !IE]>--> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode("http://www.yourwebsite.com" . $_SERVER["REQUEST_URI"]); ?>%2F&layout=button_count&show_faces=true&width=300&action=like&font&colorscheme=light&height=21" style="border-style:none; overflow:hidden; width:85px; height:21px;"> </iframe> <!--<![endif]-->
The first part of the code is for Internet Explorer 8 and less (although it’s also read by IE9) and the second part is valid HTML5 code. IE8 will place a border around the iframe with the valid code, and IE7 will place a scroll bar over it. This combination ensures that the code validates and that the button is correctly displayed in IE7+.
(Given that Windows XP users can’t upgrade to IE9 and yet they’re still a large percentage of web users, I consider IE8 compatibility to be important). Internet Explorer seems to rely on these three pieces of invalid code:
scrolling="no" frameborder="0" allowTransparency="true"
Inserting your buttons
The code snippets for the Twitter, Google+1 and Facebook buttons will need to be displayed within appropriately styled DIV tags at the point of inclusion on your page.
Of course, all of these modifications wouldn’t be required if Twitter, Google Plus and Facebook produced valid code in the first instance!
19 responses to “Valid Twitter, Google +1 and Facebook “Like” buttons for HTML5 and XHTML 1.0”
As far as I know an IFRAME will not validate in XHTML Strict, soo… you may want to rewrite to article so the data is loaded with an OBJECT tag instead.
‘iframe src’ and ‘/iframe’ can be changed to ‘object data’ and ‘/object’ after which it should validate.
I am implementing this as we speak… so you can check validation on my fansite http://www.terminatorfiles.com in a few minutes/hours.
Thanx again for the great solution!
Agreed. It only works as object for me.
Thanks, ‘Terminator Files’. You are correct, the code didn’t validate for XHTML 1.0 Strict. I have removed references to it in the article.
do not facebook like validation?
actually the facebook dint pass validation because of the “allowTransparency=true”
i just tied it onto the end of my url like this.
hope that helps pass validation ;)
any q’s email webdesignerchristian AT gmail DOT C0M
As stated in the article, allowTransparency=”true” is invalid code, which is why I commented it out so it is only read by IE8 or less. Your code would not validate.
I have been using the invalid AddThis buttons and it pains me that my blog won’t validate via the W3C checker. You’d think AddThis would get there act together and publish some helpful guidance like you have here.
Sorry for the rant :}
I wholeheartedly agree, Henry.
does anybody know how to make addthis w3c valid still? thanks!
I haven’t looked into creating a valid AddThis box, but I routinely use a W3C-validated ShareThis button on my websites. It is demonstrated on this very page. If you’re interested, I can write a tutorial.
Hello, I’d be very interested in seeing how you added valid ShareThis buttons to your site.
Finally I find the script is valid HTML5. But unfortunatelly Google+ button can only appear for one time. Any idea for me?
Hi Adam, thanks for this trics, I used addthis in my blog.
For Facebook Like button you can just use the HTML5 code provided by Facebook:
Valid Facebook Like Button in HTML5
Just select the HTML5 option after “Get Code”
Since I have been using the facebook like button with xhtml transitional, I have 130 likes but my organic placement on google has slipped way down. Could this be because of invalid facebook code?
Hi mate!! Thanks for the article, but i have to put “data-show-screen-name” on my button and can’t get to work it validating for the w3c, can you help me? Thanks again ;)
Thank you for this excellent guide. There is however one issue that I should bring to your attention. Your Facebook like button code is faulty. Depending on where the user comes from, the language of Facebook changes, so for instance it is not named “Like” in Germany, so for german users, it displays as “Gefallt Mir”. The problem here is that you set the width of the iframe to 85px which cuts the count part of it. So to be safe, I would increase it to at least 130-140px… Hope this contributed to your article :)
Thanks it works and now I have less errors in W3C! But the shares on twitter got lost when I changed to this from using the addthis-codes. How come?
Thanks for your tutorial . this tutorial work on my blog :)