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:

Panel with three social media 'like' buttons — Using the code below, the following buttons can be generated using valid code

1. Twitter’s “Tweet Button”

Twitter’s button generator produces the following invalid code:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YourName">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

I have adjusted this code so that the invalid data-count and data-via tags are removed and replaced with a valid query string as follows:

<a href="http://twitter.com/share?url=<?php echo urlencode("http://www.yourwebsite.com" . $_SERVER["REQUEST_URI"]); ?>&via=YourName&count=horizontal" class="twitter-share-button" rel="nofollow">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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://www.yourwebsite.com becomes 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:

<g:plusone size="medium"></g:plusone>
<script type="text/javascript">
  window.___gcfg = {lang: 'en-GB'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Yuck! Luckily a much neater (and valid code) is available thanks to Gabriel Hautclocq at GabSoftware.


<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
// parsetags: 'explicit';
</script>
<div id="plusone-div"></div>
<script type="text/javascript">gapi.plusone.render ('plusone-div', {"size": "medium", "count": "true"});</script>

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!

Comments

19 responses to “Valid Twitter, Google +1 and Facebook “Like” buttons for HTML5 and XHTML 1.0”

On 11 August 2011, TerminatorFiles wrote:

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!

On 18 December 2011, Kevin wrote:

Agreed. It only works as object for me.

On 11 August 2011, Adam Dimech wrote:

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.

On 18 October 2011, webtesin wrote:

do not facebook like validation?

On 22 December 2011, webdesignerchristian wrote:

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

On 22 December 2011, Adam Dimech wrote:

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.

On 9 February 2012, Henry wrote:

Hi Adam,

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 :}

On 9 February 2012, Adam Dimech wrote:

I wholeheartedly agree, Henry.

On 19 April 2012, tuba wrote:

does anybody know how to make addthis w3c valid still? thanks!

On 19 April 2012, Adam Dimech wrote:

Hello Tuba,

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.

On 24 April 2012, Chad Bush wrote:

Hello, I’d be very interested in seeing how you added valid ShareThis buttons to your site.

On 30 April 2012, wilma wrote:

Hello adam,

Finally I find the script is valid HTML5. But unfortunatelly Google+ button can only appear for one time. Any idea for me?

On 27 May 2012, cybermales wrote:

Hi Adam, thanks for this trics, I used addthis in my blog.

On 28 July 2012, Gabriel Harper wrote:

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”

On 28 August 2012, Ed Walter wrote:

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?

On 11 October 2012, David wrote:

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 ;)

On 22 October 2012, Peteer wrote:

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 :)

On 28 January 2013, Caroline wrote:

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?

On 4 April 2013, SHARE4RT wrote:

Thanks for your tutorial . this tutorial work on my blog :)