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)
伊江島 (No. 1 – 上陸) の続きです。伊江港ターミナルに降り立ち、車に乗り込む頃にはすっかりお昼時でした。ランチにするか迷いつつ簡単に島を流し始めると城山 (ぐすくやま) が見えま
玄米 + ゲンコツメンチ + キャベツ千切り
一時期 セブンイレブン (あらびき牛肉メンチカツ) を土日のどちらかのお昼ご飯として買っていた時期がありましたが、ローソンでも同じ様なメンチカツを見かけました。最寄りのローソンではなぜか夕方の方がスト
VAIO Fit 13A (7)
VAIO Fit 13A (到着) の続きです。バックライトキーボードと MacBook のトラックパッドに似たタッチパッドにすっかり惚れました。ところが、設定変更は簡単には済みませんでした。VAIO
沖縄食彩 てぃ?だかんかん (2)
沖縄食彩 てぃ?だかんかん (Part 1) の続きです。乾杯で喉を潤した後は、早速おつまみミーティング開始です。鮮度の良い状態で入荷していると聞いた海ぶどうに、1 人 2 皿は行こうねと半分本気で事
iPhone 6 Plus (Gold)
iPhone 6 Plus ("iPhone から送信" 削除) の続きです。iPhone 6 Plus (開封) から必要最低限の準備は出来たので、充電することにしました。VAI
ベリサイン セキュア・サーバ ID 月額提供開始
2012/11/01 より Drive Network では従来よりお取扱いしていた SSL 証明書 "セキュア・サーバ ID" を月額費用 5,250 円のみでご利用いただけるサ
肉野菜炒め定食 (3)
23 年通っている とちぎや で とちぎや (生姜焼き定食) 以外のメニューを初めてオーダーするべく、再び訪れました。日替わりの "サービス定食" は今までまったくのノーマークでし
海鮮サラダ
沖縄本島 (No. 43 – ステーキハウス四季) -> 沖縄本島 (No. 44 – タコス専門店メキシコ) とハシゴランチした後は、那覇に移動しました。久しぶりに国際
ドライブインレストランハワイ (1)
沖縄本島 (No. 8 – 渡久地港) の続きです。水納島への便が欠航のため、本部半島をしばらくドライブしたり散策しました。その後、気になっていた ドライブインレストランハワイ でランチす
サイゼリア 神田小川町店
サイゼリヤ (ランチメニュー) から 2 ヶ月程ご無沙汰していましたが、急にサイゼリアの "小エビのカクテルサラダ" が食べたくなり訪れてみました。あれ ? 行くとほぼ必ずオーダー
Valid HTML5 Valid CSS3 Another HTML Lint