Home » Program » WordPress HTML5, CSS3 Valid (No. 2) (Tag: , , )

twitter や facebook のいいね ! ボタンを埋め込みたい場合、それぞれから提供されるタグでそのまま Valid とされることは経験上ほぼありません。(特に Another HTML Lint)

WordPress 向けに permalink() 等を含んでいますが、適時変更することで別の CMS や素の HTML5 でも Valid とされるコーディングをご紹介します。(twitter, facebook, Google+)

<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 で汎用化して分離しておくと一斉変更が容易かもしれません。

# それより早くサイトのリニューアルが迫られる方が現実的かな

Random Select

白米 (2)
長谷園 eco かまど (三合炊き – 白米二合) の続きです。次の日は白米一合を試してみました。180ml の米を研ぎ、水切り水 220ml で 20 分浸水中強火で 7 分炊く20 分
チキンカレー (ルー大盛り, 辛さ 50 倍)
カリーライス専門店 エチオピア 本店 (No. 8 – 辛さ 20 – 40 倍) 以来辛さ 20 倍程度のカレーに落ち着いていましたが、暑い最中、久しぶりにガツーンと辛さ 5
ニューヨークステーキ L (1)
沖縄本島 (No. 46 – うるり クラッシュスィーツ) を朝食にした沖縄入り 2 日目のランチは、那覇に宿泊している上にニクの日だけに ジャッキー ステーキハウス と決めていました。1
hamburger with fries
1990 – 1992 年の 2 年程マクドナルドでアルバイトをしていました。途中からアルバイトでマネージャ (スイングマネージャ) にもなりましたが、この頃はまだバブルが弾けた直後で、今
おむすび権米衛 (3)
玄米 初挑戦 後、おむすび権米衛 の玄米おにぎりを買う機会を狙っていました。行動半径内では シャポー船橋店 と ヨドバシ秋葉原店 にあることは知っていましたが、もっと近所にないかと調べたところ、我らが
真壁ちなー (4)
2012/11 の末にプライベートで沖縄を訪れた際、久しぶりに南部でゆったりした時間を取ることが出来たので、茶処 真壁ちなー を訪れたことがあります。南部ではかなり有名なお食事処の様です。糸満に近付く
城山 (10)
伊江島 (No. 2 – 伊江島タッチュー Part 1) の続きです。階段も途切れて岩肌がむき出しの中をそのまま進むと、視界が開けました。中央に立って島の北側の眺めです。ふと右手を見ると
浜比嘉大橋 (3)
沖縄本島 (No. 39 – タコス屋 <Tacos-ya> ふたたび) の続きです。09/19 ? 09/24 の 5 泊 6 日の旅程で、宿泊最終日の今日 09/23 は午
玉ねぎ + あらびきガーリック
ハッシュ・ド・ビーフの作り方 (No. 2) の続きです。玉ねぎ次は玉ねぎをざく切りして、あらびきガーリックとともに茶色くなるまで炒める。炒め終われば寸胴に移す。です。玉ねぎは、近所のスーパーで適当に
radserv ope 09
radserv ope (SATA 1 -> 2TB) では 3.5inch ハードディスクで納品された機器の、ハードディスクのみの交換を行いました。今回は 2.5inch ハードディスクで納品
Valid HTML5 Valid CSS3 Another HTML Lint