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

チキンカレー (辛さ 5 倍)
御茶ノ水界隈は 20 年来自分にとっての庭な街ですが、以前から存在は知っていたけど未開拓なお店に カリーライス専門店 エチオピア がありました。沖縄出張 (No. 8 ? Havana CURRY)
Becky Logo
Windows 環境ではメールソフトに Becky! を使用しています。普段は FreeBSD で作業していますが、場合によっては同じメールを Becky! 側で開く方が効率が良い場合があるからです。
Firefox Logo
明け方散歩から帰って来て、開きっぱなしの facebook (Windows PC, Firefox) の見映えが変わっていました。等幅フォントに変わったというか、ビットマップフォントが無理矢理伸び縮
Rack Sample 0
これは、Drive Network サービスを収容しているデータセンターのあるラックの一部です。白ケーブルはグローバル IP アドレス ネットワーク青はプライベート IP アドレス ネットワークライト
伊古桟橋 (8)
黒島 (No. 4 – 黒島灯台) の続きです。黒島灯台からはややピッチを上げて 25 分程で入口に着きました。途中に郵便局や共同売店・カフェ等集落があり、ようやく人の気配を感じることが出
エビ + 野菜カレー (ルー大盛り, 辛さ 60 倍)
カリーライス専門店 エチオピア 本店 (No. 5 – 辛さ 45 – 50 倍) の続きです。前回は辛さ 50 倍で久しぶりに壁を感じましたが、それでもまだ先に進んでみます。
iPhone 6 Plus (Gold)
iPhone 6 Plus に切り替えて半年程経ちましたが、会社名義の iPhone から個人での契約に切り替えることにしました。もう一度 iPhone 6 Plus にすると決めていましたが、同じく
iPod nano (PRODUCT) RED
分かる人にしか分からないタイトルですが、最近 iPod nano (第 7 世代) を購入しました。今まで音楽を聴く手段が PC で iTunes しかありませんでしたが、出張時の新幹線や飛行機内で、
WS-C2960S-48TS-L (1)
今回は WS-C2960S-48TS-L の Cisco IOS 12.2 系と 15.0 系が混在している環境を、すべて現時点で最新の 15.2 系にアップデートする際のメモです。他の機種でも参考に
エチオピア テレビ取材 (2015/05/15)
カリーライス専門店 エチオピア 本店 (No. 14 – 辛さ 70 倍メドレー 2) で全メニューを辛さ 70 倍で制覇した後は、1 ヶ月に 1, 2 度訪れますがやはり辛さ 70 倍で
Valid HTML5 Valid CSS3 Another HTML Lint