PAST ARTICLE · Web
WordPress の WP Social Bookmarking Light とEZ Zenback のプラグイン競合
少し前から EZ Zenback で Facebook の「いいね！」ボタンとコメント欄が表示されないようになっていた。他の方のサイトでも両方のプラグインを使用していると表示されていないようなので、そのうち直るかな？と思っていたけど、なかなか改善される様子がないので直すことにしました。
Facebook で正しい「いいね！」ボタンのコードを確認してみます。
続いて WP Social Bookmarking Light が出力するコードを確認してみます。先日、投稿したページのソースから、Like Button のプラグインコード順に並べてみます。
- JavaScript SDK
<!-- BEGIN: WP Social Bookmarking Light -->
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang:'ja'}</script>
<style type="text/css">
div.wp_social_bookmarking_light{border:0 !important;padding:0px 0 15px 0 !important;margin:0 !important;}
div.wp_social_bookmarking_light div{float:right !important;border:0 !important;padding:0 4px 0px 0 !important;margin:0 !important;height:21px !important;text-indent:0 !important;}
div.wp_social_bookmarking_light img{border:0 !important;padding:0;margin:0;vertical-align:top !important;}
.wp_social_bookmarking_light_clear{clear:both !important;}
</style>
<!-- END: WP Social Bookmarking Light -->- XMLの名前空間を文書のタグに追加
<!DOCTYPE html>- プラグインのコードを配置
<div class='wp_social_bookmarking_light'><div><fb:like href="http://www.sugitaku.net/blog/2012/03/31/oreilly-%e3%81%ae-iphone-%e3%82%a2%e3%83%97%e3%83%aa%e3%81%8b%e3%82%89-epub-%e3%82%92%e6%8a%9c%e3%81%84%e3%81%a6-ipad-%e3%81%a7%e8%aa%ad%e3%82%80/" send="true" layout="button_count" width="80" show_faces="false" action="like" colorscheme="light" font=""></fb:like></div><div>1. JavaScript SDK で「<div id="fb-root"></div>」が抜けているので、ソースコードに追加します。修正するソースコードの場所は、DocumentRoot/wp-content/themes/テーマ名/header.php となります。
diff --git a/header.20120407.php b/header.php
index 1b9a27a..b72a6e4 100644
--- a/header.20120407.php
+++ b/header.php
@@ -66,6 +66,7 @@
</head>
<body <?php body_class(); ?>>
+<?php if(is_single()): ?><div id="fb-root"></div><?php endif; ?>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>下の ZenBack の Facebook の「いいね！」ボタンとコメント欄が表示されているので確認できるかと思います。