Friday 9 October 2009

New Twitter Widget w3c validation errors

Compliance to W3C standards is important step to search engine optimisation. For those using XHTML transitional code it is necessary to correct the code provided by Twitter in order to validate.

If you are using the old Twitter widget it does not validate. It is very easily corrected see post by Winning Inch.

But what is more concerning is that Twitter have updated their widget generator and it is more complex to correct. You will need to edit the Twitter code as indicated below. Essentially the supplied code errors are in red and the correction is black:

____________________

<div id="twtr-profile-widget"></div>

1. Add missing declaration: <script type="text/javascript" src="http://widgets.twimg.com/j/1/widget.js"></script> to the following bad code:
<script src="http://widgets.twimg.com/j/1/widget.js"></script>

2. Move the following CSS link to the head section of your webpage anywhere between <head> and </head> tags:
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">

3. Last bit is to add the declaration: <script type="text/javascript"> to the following:
<script>

new TWTR.Widget({
profile: true,
id: 'twtr-profile-widget',
loop: true,
width: 250,
height: 300,
theme: {
shell: {
background: '#3082af',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#1985b5'
}
}
}).render().setProfile('svcswebdesign').start();
</script>

____________________

If you want to cut and past code go to our website and use your browser "view" menus option to view the page source and you can copy the correct code directly.

To validate your page use the W3C validator if you need more help you can chat to us on-line using the "can we help" button on our website.

More free hints an tips can be found on our search engine optimisation page

2 comments:

  1. Thanks very much, I have found this blog really very good and effective!
    Web Designing India

    ReplyDelete
  2. What about moving the <script> portion to the head? I can't seem to get that to work, even after adding the attribute id: which was, not vanilla.

    ReplyDelete