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)
石垣島 (No. 3 – こてっぺん) の続きです。翌日 05/05 は終日島内の目星を付けた個所をひたすら周遊する日に当てていました。ホテルでの朝食後、まずは玉取崎展望台へ向けて移動を開
TEJ-75 + JC-120
ひさしぶりにスタジオインした時のカットです。18 – 22 歳頃まで 4 年弱ギター・ベースを触っていました。(BOOWY, COMPLEX, X のコピー)その後一度すべて手放して、20
玄米おにぎり + びっく・もっく (からあげ弁当 おかずのみ)
タマチャンショップ (国産 21 世紀雑穀米) で白米以外のご飯に目覚め始めていますが、なくなる直前に 東急ストア でお試しサイズとして、あきたこまち 1kg を玄米で購入しました。袋の裏側を見ながら
そば定食
沖縄支店から歩いて 1, 2 分程の距離にある とんかつ とんき は、過去に一度行ったことがありますが、その時は何を食べたかも覚えてなく、印象には差程残っていませんでした。ただ、前々回 (2012/0
Drive Network Philosophy
Movable Type 6.1 (mt_author テーブル author_password カラム) で使用する暗号化されたパスワードを作成するため、ソースファイルを参考にスクリプト化しました。
Herb
私自身はこれまで仕事の選択は、やりたいことありきで探すか、習得目的があって選択して来ましたが、特別やりたいことがなく今の仕事をしている方も多いでしょう。または、プライベートで趣味や習い事等特に打ち込め
日替り (縞ほっけ)
久しぶりに 日本一美味しいサバの塩焼き でご紹介した いさば を訪れました。ここ最近はとなりの 元祖 博多チャンポン ハカタノチカラ が続いていたので、久しぶりの焼き魚です。当然の様にサバを目当てに訪
LEMONGINA (3)
一昨年 ORANGINA (オランジーナ) を投稿した後、去年も春から夏にかけて ORANGINA | オランジーナ にはお世話になりました。今年もそろそろあの微炭酸が恋しくなり始める頃と思いきや、新
ソフトクリーム 石垣の塩
私用で月に 2, 3 回は必ず訪れている銀座には、一丁目に 銀座わしたショップ があり、店内に入ると突然那覇空港か国際通りのショップ内にワープした様な気分になれます。正面入口から見れば 1F の奥には
エチオピア 本店 1F 入口
ここ最近はすっかり豆カレーがお気に入りで、辛さ 40 – 50 倍も試しています。三鷹の森ジブリ美術館 (Part 1) は祭日に行きましたが、その前にわざわざエチオピアに行ってしまう程。
Valid HTML5 Valid CSS3 Another HTML Lint