Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

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: Hyperlink chain icon

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!

Reply

    On 18 December 2011, Kevin wrote: Hyperlink chain icon

    Agreed. It only works as object for me.

    Reply

On 11 August 2011, Adam Dimech wrote: Hyperlink chain icon

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.

Reply

On 18 October 2011, webtesin wrote: Hyperlink chain icon

do not facebook like validation?

Reply

On 22 December 2011, webdesignerchristian wrote: Hyperlink chain icon

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

Reply

On 22 December 2011, Adam Dimech wrote: Hyperlink chain icon

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.

Reply

On 9 February 2012, Henry wrote: Hyperlink chain icon

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

Reply

On 19 April 2012, tuba wrote: Hyperlink chain icon

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

Reply

    On 19 April 2012, Adam Dimech wrote: Hyperlink chain icon

    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.

    Reply

On 24 April 2012, Chad Bush wrote: Hyperlink chain icon

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

Reply

On 30 April 2012, wilma wrote: Hyperlink chain icon

Hello adam,

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

Reply

On 27 May 2012, cybermales wrote: Hyperlink chain icon

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

Reply

On 28 July 2012, Gabriel Harper wrote: Hyperlink chain icon

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”

Reply

On 28 August 2012, Ed Walter wrote: Hyperlink chain icon

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?

Reply

On 11 October 2012, David wrote: Hyperlink chain icon

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

Reply

On 22 October 2012, Peteer wrote: Hyperlink chain icon

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

Reply

On 28 January 2013, Caroline wrote: Hyperlink chain icon

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?

Reply

On 4 April 2013, SHARE4RT wrote: Hyperlink chain icon

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

Reply

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.