twitter や facebook のいいね ! ボタンを埋め込みたい場合、それぞれから提供されるタグでそのまま Valid とされることは経験上ほぼありません。(特に Another HTML Lint)
WordPress 向けに permalink() 等を含んでいますが、適時変更することで別の CMS や素の HTML5 でも Valid とされるコーディングをご紹介します。(twitter, facebook, Google+)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <div id="fb-root"></div><script type="text/javascript" src="http://platform.twitter.com/widgets.js" charset="utf-8"></script><script type="text/javascript" src="http://wg.drive.ne.jp/rose/wp-content/themes/Evander/js/wg.fb.js"></script><div> <ul> <li class="tweet"><a class="twitter-share-button" href="http://twitter.com/share?count=horizontal">Tweet</a></li> <li class="like"><div id="fb-like" class="fb-like"></div></li> <li class="plus"><div id="g-plusone" class="g-plusone"></div></li> </ul></div><script type="text/javascript"> var fb = document.getElementById('fb-like'); fb.setAttribute('data-href', '<?php the_permalink(); ?>'); fb.setAttribute('data-send', 'false'); fb.setAttribute('data-layout', 'button_count'); fb.setAttribute('data-show-faces', 'true');</script><script type="text/javascript"> var gp = document.getElementById('g-plusone'); gp.setAttribute('data-size', 'medium'); gp.setAttribute('data-href', '<?php the_permalink(); ?>'); window.___gcfg = { lang: 'ja' }; (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> |
HTML5 向けのカスタムデータ属性は、setAttribute() で追加してチェッカーを迂回していることになりますが、draft 段階の現在、今後ソースの変更を迫られる場合もかつて HTML と CSS の分離が進んだ様に、JavaScript で汎用化して分離しておくと一斉変更が容易かもしれません。
# それより早くサイトのリニューアルが迫られる方が現実的かな
- WordPress HTML5, CSS3 Valid (No. 1)
- WordPress HTML5, CSS3 Valid (No. 2)
- WordPress HTML5, CSS3 Valid (No. 3)
