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

濃厚豚崩しつけ麺 + 大盛り (1)
去年の 8 月以来久しぶりに、いつも行列の出来る めん徳二代目つじ田 を訪れました。事前にホームページを見て、メニューが変わっていることに気がついたためです。以前は、つけめん (880 円), 二代目
hamburger with fries
1990 – 1992 年の 2 年程マクドナルドでアルバイトをしていました。途中からアルバイトでマネージャ (スイングマネージャ) にもなりましたが、この頃はまだバブルが弾けた直後で、今
タコスそば (1)
銀座わしたショップ 2015/02/19 (いちばん桜) でもタコスそばが気になっていたので、今日はタコスそばのみのために訪れました。前回同様いちばん桜は店内入口そばに位置していましたが、数がかなり減
肉うどん (中盛)
10 月を過ぎた頃から うどん 丸香 (まるか) の夏メニューがお休みに入り、冬メニューが登場しました。肉うどんは冷が消えただけで、温かい方は通年でしたね。"カレー" が登場しまし
Drive Network Core (WS-C3750E-48TD-E)
Cisco config backup Tool では、Catalyst の標準的な Telnet パスワードでログインする場合を前提に作成しています。Catalyst ではスイッチ本体に登録するユー
三鷹の森ジブリ美術館 (10)
三鷹の森ジブリ美術館 (Part 1) の続きです。屋上庭園に上がると、天空の城ラピュタ のロボット兵がすぐに見えました。この日は 3 連休でもあってすごい人手でした。妙に韓国人か台湾人と思える方が多
ビーフ + 野菜カレー (ルー大盛り, 辛さ 70 倍)
カリーライス専門店 エチオピア 本店 (No. 13 – 辛さ 70 倍メドレー 1) を投稿した時は、まさか全メニューを辛さ 70 倍で横断するとは思っていませんでしたが、我ながら凝り性
Preseved Flower
ほぼ社内向けな話ですが、入社前に希望のメールアカウント (メールアドレス @ 左側の文字列) を確認され、第 1 希望に rose と回答しました。(第 2 希望は普通に yasuhiro と回答)無
WordPress Logo
WordPress をインストール後、記事の投稿や必要なプラグインを追加した後、どうしても気になり始めました。HTML ソースの汚さが。Drive Network のホームページ・オンラインサインアッ
あらびき牛肉メンチカツ
休日のお昼ご飯はご飯だけ自宅で炊いて、駅前のイトーヨーカドーや 東急ストア の惣菜を買って済ませるパターンもあります。真夏以外はみそ汁も作ります。セブンイレブン (おつまみセット) でご紹介した通り、
Valid HTML5 Valid CSS3 Another HTML Lint