遅ればせながら、ブログを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&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&href='; the_permalink(); print '&send=false&layout=box_count&width=55&show_faces=true&action=like&colorscheme=light&font=arial&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"
が好ましいようです。