Skip to content

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

G4th August 2011

C19 Comments

TFacebook, Google, HTML5, Twitter, XHTML

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”

  • Written by TerminatorFiles on 11 August 2011:

    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!

    • Written by Kevin on 18 December 2011:

      Agreed. It only works as object for me.

  • Written by Adam Dimech on 11 August 2011:

    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.

  • Written by webtesin on 18 October 2011:

    do not facebook like validation?

  • Written by webdesignerchristian on 22 December 2011:

    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

  • Written by Adam Dimech on 22 December 2011:

    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.

  • Written by Henry on 9 February 2012:

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

  • Written by tuba on 19 April 2012:

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

    • Written by Adam Dimech on 19 April 2012:

      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.

  • Written by Chad Bush on 24 April 2012:

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

  • Written by wilma on 30 April 2012:

    Hello adam,

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

  • Written by cybermales on 27 May 2012:

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

  • Written by Gabriel Harper on 28 July 2012:

    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”

  • Written by Ed Walter on 28 August 2012:

    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?

  • Written by David on 11 October 2012:

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

  • Written by Peteer on 22 October 2012:

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

  • Written by Caroline on 28 January 2013:

    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?

  • Written by SHARE4RT on 4 April 2013:

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

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.