備忘録として、ソーシャル用にheader.phpとfunction.phpに追加した情報をメモ。

header.phpに書いたのはフェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記と、WordPressでOGPを設定する方法 – NEX.FMを参考にさせていただいた以下のコード。

<meta property="fb:admins" content="－－ここにfb:adminsを入れるーー" />
<meta property="og:title" content="<?php if ( is_home() ) {
 bloginfo('name');
 }else {
 echo wp_title('');
 } ?>"/>
<meta property="og:type" content="<?php if ( is_home() ) {
 echo "website";
 }else {
 echo "article";
 } ?>"/>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if(has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo home_url( '/' ); ?>img/noimage.gif" />
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>
<meta property="og:description" content="<?php if ( is_single() ) { //単独記事ページの場合 ?><?php echo $post->post_excerpt; ?>
<?php } else if (is_category()) { //カテゴリーの場合 ?><?php if ( category_description() ) : ?><?php echo  category_description(); ?><?php endif; ?>
<?php } else {// 単独記事ページ以外の場合 ?><?php bloginfo('description'); ?>
<? } ?>"/>

header.phpにこう書いておくと、以下のように表示されます。

<meta property="fb:admins" content="－－ここにfb:adminsを入れるーー" />
<meta property="og:title" content="カスタムメニューの値を出力するコード"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://mycolor.ivory.ne.jp/customize/20120215222850.php"/>
<meta property="og:image" content="http://mycolor.ivory.ne.jp/wp-content/themes/SimpleNote2C/images/noimage.gif" />
<meta property="og:site_name" content="wordpress　今日のカスタマイズ記♪"/>
<meta property="og:description" content="wordpressを使ってカスタムメニューをトップページに表示させるためのタグです。"/>

ウェブサイトのトップではtypeがwebsiteになります（上記は個別記事での表示なのでarticleになっています）。titleのところもトップページではサイトタイトルを表示させます。descriptionも個別記事の概要・カテゴリー説明・サイト概要に対応させています。

[2012.11.20追記]1行目にfb:adminsの1行を足しました。Facebookでテストしたらエラーが出たため。フェイスブック用にOGPの設定してたら修正が必要な[いいね！]ボタンの警告？ – ぷろめし｜プログラミングよりも飯が好きを参考にさせてもらいました。

▼動作確認サイトはこちら
デバッガー – Facebook開発者

次にfunction.phpに以下の記述を追加。plantica – page:2をそのまま写させてもらってタイトル横の余白を消しています。

// 画像を表示させる用の記述
function get_featured_image_url() {
    $image_id = get_post_thumbnail_id();
    $image_url = wp_get_attachment_image_src($image_id,'large', true);
    echo $image_url[0];
}
//wp_titleの$sepが空文字または半角スペースの場合は余分な空白削除
function my_title_fix($title, $sep, $seplocation){
    if(!$sep || $sep == " "){
        $title = str_replace(' '.$sep.' ', $sep, $title);
    }
    return $title;
}
add_filter('wp_title', 'my_title_fix', 10, 3);

ひとまずこのサイトでは実装できました。