Invalid code with Twitter widget
8th Nov 2013

Invalid code with Twitter widget

Twitter logoIf you want to include the twitter widget on Kontrolit V3 sites rather than use the built in twitter component, you will need to make a few alterations to the code.

The code you get from twitter will look like this:

<a class="twitter-timeline" href="https://twitter.com/ZZZ" data-widget-id="XXX">Tweets by @yyy</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

You need to do 2 things to get the code to pass the W3C validation.

  1. Change the link tag to move the widget id into a query string
  2. Add a type definition onto the script tag

So your new code becomes:

<a class="twitter-timeline" href="https://twitter.com/ZZZ?widgetId=XXX">Tweets by @yyy</a>

<script type=”text/javascript”>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Please Share

Back To Top