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

かつぎや担々麺 + 辛さ 4 (大辛)
最近週末は "自宅 de タコライス" が続いたせいか、平日にもピリ辛なメニューを欲している気がしてなりません。以前私の中では日本一美味しいカレーだった "バルチックカレ
ノルウェー産 サーモンフライ (2)
My Select "日本一シリーズ" 第 6 弾は再び御茶ノ水の老舗、日本一美味しい豚の生姜焼き 同様 20 年来通い続けている キッチン カロリー です。改めて店の看板を見ると
hp dv5
自宅や出張時に使用しているノート PC は現在 hp の dv5 (2008/12 頃のスペシャルエディション) です。デザインと解像度 (15.4inch, 1680 x 1050) 優先で選びまし
株式会社エーティーワークス 富山本社
Drive Network ではすでに以下の記事でもご紹介している通り、株式会社エーティーワークス の radserv シリーズを大量投入しています。2012/04/19 Drive Network
うまい ! がすごい。クリーミー生サーバー (4)
うまい ! がすごい。クリーミー生サーバー (Part 1) の続きです。1 度にシール 6 枚分まで登録出来るので、コツコツ続けていると、テストで満点という訳ではありませんが、何だかいい気分♪82
まるでマンゴーを冷凍したような食感のアイスバー (1)
去年の夏は ORANGINA (オランジーナ) に目覚めてケース買いしましたが、今年はセブンイレブンの "まるでマンゴーを冷凍したような食感のアイスバー" に猫夢中です。元々は f
FreeBSD Logo
My DeskTop のデスクトップでは、3.5″ 2TB x 2 (SATA 3.0) の構成ですが、RAID1 にはせず起動パーティションとバックアップ用ディスクの様にセパレートして使
Rack Sample 0
ここ数年、"理想のファイルシステムとは何か" というテーマで考え続けています。機器単体では RAID (Redundant Arrays of Independent Disks)
寿がきや 富山ブラック (1)
近所のコンビニエンスストアで、ある日偶然にも珍しいカップラーメン 寿がきや 全国麺めぐり 富山ブラック を見つけました。2 年前に 富山出張 (No. 3 – 富山ブラック) を初めて体験
野菜カレー (辛さ 35 倍)
カリーライス専門店 エチオピア 本店 (No. 3 – 辛さ 25 – 30 倍) の続きです。2012 年は突然 カリーライス専門店 エチオピア に目覚め、辛さ 30 倍まで
Valid HTML5 Valid CSS3 Another HTML Lint