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

県産まぐろのユッケ丼 卵のせ
石垣島 (No. 1 ? ユーグレナモール・ゆいロード) の続きです。ゆいロードを八重山郵便局方面にしばらく行くと、初めは雑貨屋さんかと思いましたが島ごはん まかない屋 に魅かれました。"栄
アンチ浜ビーチ (1)
沖縄本島 (No. 29 – トロピカルビーチ de ビーチパーリー -> NG) の続きです。前日 09/19 の午前中には予定していたビーチパーリーの中止を決めましたが、当日 0
HHKB Lite2
普段デスクトップ PC を使用していますが、キーボードは 10 年近く同じものを使用しています。かなり前の購入ということもあって PS/2 モデル ですし大分色が変わっていますが、未だ現役です。IT
ビーフカレー (ルー大盛り, 辛さ 25 倍)
カリーライス専門店 エチオピア 本店 (No. 2 – 辛さ 15 – 20 倍) の続きです。行く度に辛さを前回より 5 倍増しにし続け、日々修行の気分です。前回はルーが少な
R&D ファクトリー (4)
富山出張 (No. 1 – 株式会社エーティーワークス) の続きです。富山本社・データセンターの内部にも興味がありましたが、実際の組立現場にはもっと興味がありました。建物の 2F の入口か
つけ麺 大盛 + チャーシュー 2 倍
出張の少し前に Facebook で 麺処 鍵 〜KAGI〜 に数人で同時にチェックインしているのを見て知りました。チェックインするとトッピングが 1 品無料になるとか。それはともかく、てだこ RAM
銀座わしたショップ 2014/11/13 (3)
銀座わしたショップ 2014/07/03 (コンビーフハッシュ) 以来 4 ヶ月ぶりに訪れました。沖縄本島 (No. 41 – A&W 那覇空港店 初ルートビア) で初挑戦したルー
トゥクトゥク・スキップ with miyo (3)
Special Night at Ti picchio で訪れた中目黒のナポリ・アマルフィ料理のお店 Ti picchio では、たまにライブが開催されます。生演奏を聞きながら合間に美味しい食事と、大
魚介カレー (2)
2013/11 に 欧風カレー ボンディ (神保町本店) を訪れてからはしばらく過酷な日々が続いたので足が遠のいていました。年末最終営業日にも訪れましたが、その際はいつもながらのチキンカレーで、食べた
カーフェリー (4)
沖縄本島 (No. 1 – 猫丸庵 〜 根夢) の続きです。明けて 10/12 はいよいよ 沖縄出張 (No. 29 – 伊江島 -> NG) のリベンジです。以前予定し
Valid HTML5 Valid CSS3 Another HTML Lint