Standing on the Shoulder of Linus

Home / 2011 / 5月 / 17 / ブログをfacebook対応にするためにfunctions.phpに記述するコード

ブログをfacebook対応にするためにfunctions.phpに記述するコード

遅ればせながら、ブログをfacebook対応にしました。facebook も wordpress も外部サービスと連携しやすいので、比較的楽に設定できました。

まずはHTMLヘッダー部分の編集。

add_filter('language_attributes','append_html_to_og');
function append_html_to_og($output){
    $output .= ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"';
    return $output;
}

html部分に、xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" という記述を追加する必要があります。header.phpを書き換えても良いのですが、language_attributes関数にフィルタが用意されているので、そちらを使うことにしました(標準的ではないかもしれません)。

add_action('wp_head','my_facebook_ogp');
function my_facebook_ogp() {
if (is_singular()){
print '<meta property="og:title" content="';
the_title();
print '" />';
print "n";
print '<meta property="og:type" content="article" />';
print "n";
print '<meta property="og:url" content="';
the_permalink();
print '" />';
print "n";
print '<meta property="og:site_name" content="';
bloginfo('name');
print '" />';
print "n";
print '<meta property="og:image" content="';
if (has_post_thumbnail()){
$img = wp_get_attachment_image_src(get_post_thumbnail_id());
print $img[0];
} else {
bloginfo('stylesheet_directory');
print "/images/default.jpg"; // デフォルト画像
}
print '" />';
print "n";
print '<meta property="fb:app_id" content="xxxxxxxxx" />'; // IDを記入する
print "n";
print '<meta property="og:description" content="';
the_excerpt();
print '" />';
print "n";
}
}

html head 部分に記述する内容です。wp_headにフックすれば良いでしょう。fb:app_idの部分は、IDを調べて書き込んでください。

画像部分はアイキャッチ画像があれば採用、無い場合はデフォルト画像にしています。

私は個別記事をfacebook連携にしたかったので、is_singularで条件分岐しています。

続いて、個別記事の最後に、facebook のコードを追加します。

add_action('hybrid_after_singular','my_facebook');
function my_facebook() {
print '<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxx&amp;xfbml=1"></script><fb:like href="';
the_permalink();
print '" send="false" width="450" show_faces="true" font="arial"></fb:like>';
}

ここで使用しているフックhybrid_after_singularは、テーマ毎に異なります。お使いのテーマのマニュアルやソース等で確認してください。(テーマによっては、フックが用意されていないかもしれません。その場合は、single.php等に直接書き込んでください。)

最後に、管理画面の一覧に、いいねの数を表示します。、投稿一覧にアイキャッチ画像を表示するプラグインFeatured Image on Edit.phpをベースにした管理画面カスタマイズです。

function show_facebook_post_column( $defaults ) {
        $defaults['facebook'] = 'FaceBook' ;
        return $defaults;
}
add_filter('manage_posts_columns', 'show_facebook_post_column');

function facebook_iframe($column_name, $id) {
    if( $column_name == 'facebook') {
print '<iframe src="http://www.facebook.com/plugins/like.php?app_id=xxxxxxxxxx&amp;href=';
the_permalink();
print '&amp;send=false&amp;layout=box_count&amp;width=55&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>';
    }
}
add_action('manage_posts_custom_column', 'facebook_iframe', 10, 2);

※追記property="og:type" content="blog"としていた部分は、property="og:type" content="article"が好ましいようです。

関連

Posted in WordPress | Tagged facebook, sns
← sahana.jpへ移動しました スリープソートに渡す値を工夫する →

アーカイブ

人気の投稿とページ

  • キンドル本を印刷する(PDFに変換する)方法
  • 名古屋駅から国際センターまでの道のり(徒歩)
  • AGPL ライセンス(GPLとは似ているが違いもある)
  • 問い合わせフォーム改善: 選択肢により条件分岐し、項目の表示非表示を変更する
  • JP-Secure SiteGuard WP Pluginは不正ログイン防止に役立つか

プロフィール

水野史土:月70万PVホームページ制作会社のレスキューワーク株式会社で、PHPソフトウェアのサポートを行っている。concrete5コミュニティリーダー、Novius OSコアコード貢献者でもある。 詳しくは管理者詳細参照。
大好評WordPress書籍「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ

Copyright © 2015 Standing on the Shoulder of Linus.