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

豆カレー (ルー大盛り, 辛さ 70 倍)
前回の投稿 カリーライス専門店 エチオピア 本店 (No. 12 – 豆カレー 辛さ 50 倍) よりほぼ 1 年ぶりとなりました。その後 3 回程訪れた後は半年以上ブランクが開き、久しぶ
My Select (2013/07/14)
Season 1 (2012/10/04 – 2012/10/20) 同様、今回も本筋の業務前に別件が続いてやや長めの出張です。07/11 – 07/15 までは久しぶりに以前
radserv X
現在 Drive Network ではバックアップに SATA 2TB x 2 (RAID1) で構成した機器を 9 台使用しています。実質は 7 台分程ですが、それでももう少し集約出来ないか検討して
海底遺跡 (3)
与那国島 (No. 10 – 居処屋どぅーらい) の続きです。翌朝は与那国観光の目的の 1 つである海底遺跡を訪れました。グラスボートやスノーケリング・ダイビングと方法がありますが、今回は
My DeskTop (Side)
linux-firefox 19 で起動せず轟沈しましたが、ふといくつかアプローチを思いついて再起動をしました。操作している機器は My DeskTop のデスクトップ (M/B ASUS P8P67
旅館前から祖納港方面
与那国島 (No. 2 – 到着) の続きです。与那国には 2012 年現在ホテルはなく、すべて民宿的な旅館です。素泊まりが多い中で今回は食事にも力を入れている 旅の館 阿檀 にしました。
クリーミー生サーバー (11)
うまい ! がすごい。クリーミー生サーバー (Part 3) の続きです。まずはオーソドックスに、ザ・プレミアム・モルツ 350ml 缶を用意しました。飲み口を開けて本体向かって右側に向け、配管チュー
香るプレミアム + お刺身 (本マグロ, 真鯛, かんぱち, サーモン)
ザ・プレミアム・モルツ <香るプレミアム> (Part 1) の続きです。期間限定の ザ・プレミアム・モルツ <香るプレミアム> がすっかり気に入り、ここぞとばかりに飲みだめし
Drive Network Philosophy
Movable Type 6.0 (mt_author テーブル author_password カラム) で使用する暗号化されたパスワードを作成するため、ソースファイルを参考にスクリプト化しました。
ザ・プレミアム・モルツ MASTER'S DREAM (1)
ザ・プレミアム・モルツ <香るプレミアム> (Part 2) がうれしいことに通年販売となりケース買いして間もなく、以前から告知されていた ザ・プレミアム・モルツ マスターズドリーム が発
Valid HTML5 Valid CSS3 Another HTML Lint