Home » Program » WordPress HTML5, CSS3 Valid (No. 3) (Tag: , , )

Facebook 向けに OGP (Open Graph Protocol) に対応する方が望ましいとした場合、やはり Valid にはなりません。

HTML5 + RDFa ? 等も考えられますが、発想を変えて Facebook との通信のみ meta property="og:XXX" を出力すれば良いのでは ? と考えました。

function wg_ogp() {
    $agent = $_SERVER['HTTP_USER_AGENT'];

    if (preg_match('/facebook/', $agent)) {
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:title" content="<?php wg_title(); ?>" />
<meta property="og:description" content="<?php wg_desc() ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo wg_here(); ?>" />
<meta property="og:image" content="<?php wg_img() ?>" />
<meta property="fb:admins" content="100001699619269" />
<meta property="fb:app_id" content="365262713525479" />
<?php
    }
}

Validate ツール向けのみ出力 *しない* というルーチンでも良いですが、現状 Facebook 以外には無用なタグなので、上記の様に function.php に追記して header.php から呼んでいます。

# memo: http://developers.facebook.com/tools/debug

wg_ogp() 内にも wg_ で始まる関数がありますが、これは望む表示をするためにひと工夫した関数です。テンプレートにも依存しますが、一例を。

function wg_desc() {
    if (is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo wg_the_content(100, 'r');
        endwhile; endif;
    } else {
        echo bloginfo('description');
    }
}

function wg_img() {
    if (is_single() && has_post_thumbnail()) {
        $img_id = get_post_thumbnail_id();
        $img    = wp_get_attachment_image_src( $img_id, 'evandr_slide');
        echo $img[0];
    } else {
        echo 'http://wg.drive.ne.jp/rose/wp-content/uploads/2012/04/2011080901-350x200.jpg';
    }
}

function wg_the_content($num, $mode = null) {   // tab.php sidebar.php
    $content = get_the_content($more_link_text, $stripteaser);
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]&gt;', $content);

    $content = preg_replace('/<div .*>.*<\/div>/', '', $content);
    $content = str_replace("\n", '', $content);
    $content = strip_tags($content);
    $content = mb_substr($content, 0, $num);

    if ($mode && $mode == 'r') {
        return $content;
    } else {
        echo "$content";
    }
}

PHP のプログラマみたいですが、実は I Love Perl です。WordPress が PHP で作られているので、いたしかたありませんね。

Random Select

波ぬ花 (5)
17:30 にスタートした 沖縄本島 (No. 48 – ルフージュ) でエンジンがかかった後は、同じく栄町通りそばの 波ぬ花 を訪れました。2 件目で 19:00 とは私には珍しい行動パ
Havana カレー (ビーフ, ライス大盛り, ルー大盛り, 辛さ 5 倍)
前日土曜日は 沖縄出張 (No. 7 ? 毛玉) で戯れた後数人で飲み会がありました。退職したスタッフとも再会してのそれは賑やかな会でした。しこたま飲んだ次の日曜日。いつも通り起きて散歩して半身浴して
Drive Network Philosophy
現在の Drive Network のスタイルに リニューアル 後、SSL 証明書の提供の改善を手掛けました。提供の改善とは、Drive Network でのサービス提供の姿勢ではなく、それまでレンタ
特製つけ麺 (中盛 300g)
道の塩 (特製塩らーめん) で、期せずして 道の塩 にめぐり合った 1 週間後に 道 を訪れました。ディズニーランドのアトラクション同様の覚悟で、11:30 の開店に 10:00 に訪れると、すでに
遠隔地バックアップ開始のお知らせ
2012/08/01 より Drive Network では従来の東京データセンター内でのバックアップに加え、富山データセンターにさらにバックアップする運用を開始しました。Drive Network
豚骨味噌 白髪ネギラーメン 味こいめ 脂あっさり (1)
哲麺 (豚骨醤油 青ネギラーメン 味こいめ 脂あっさり) から日を空けずして再び訪れました。いつもの凝り性全開です。3 回目もカウンター席でしたが、後ろ壁側の席が珍しく空席でした。気が付くとサインがた
ビーフカレー
御茶ノ水・神田神保町界隈は、スポーツ用品店や楽器店にオフィスや大学が混在する不思議な場所ですが、実はカレー店も老舗が集まっています。昔はこの界隈に "バルチックカレー" という店舗
Drive Network Core (WS-C3750E-48TD-E)
Drive Network ではデータセンターのラックを数本契約していて、その 1 ラックにインターネット接続サービスを契約しています。物理回線は 1Gbps を 2 本引き込んでいます。最上段の 4
Gala 青い海 (1)
2 年程前の 2 週間コースの出張の際、間の土・日で Gala 青い海 に行きました。スタッフの話では、景色を見ながらまったりするのがいい、と聞いて行きましたが、本来は塩や琉球ガラスの制作体験が出来る
iPhone 6 Plus (Gold)
iPhone 6 Plus (自動タイムゾーン オフ) の続きです。今回は iPhone 6 Plus (機種選定・契約変更) の際、ドコモショップで電話帳の移行まで対応してくれました。ところが落ち着
Valid HTML5 Valid CSS3 Another HTML Lint