Facebookいいねボタン設置時にはまった点

アジェンダ

1. いいねボタンはopacity:0;やdisplay:none;で隠したりしてる
2. いいねボタンは１ページに２つ設置されている
3. OGタグいれてる
4. いいねボタン押下イベントコールバックのIE6対応

想定状況

jQuery1.10.2を使用しています

2013/10/30 設置時の状況なので今後いいねボタン仕様変更など起こった場合、この情報は役に立たなくなる恐れがあります。

問題内容と解決方法

１）いいねボタンはopacity:0;やdisplay:none;で隠したりしてる

問題発生：時々ボタンが表示されなくなる

解決策：opacity:1やdisplay:block後にボタンを再レンダリング

FB.XFBML.parse();を呼び出さすとボタンが再レンダリングされます。

//fb-likeのなかにいいねボタンが作られるのでいいねボタンが生成されているかチェック
if($('.fb-like').children().length === 0){
  FB.XFBML.parse();
}

２）いいねボタンは１ページに２つ設置されている

問題発生：２つのうち１つがInternetExplorerやFirefoxで表示されない

解決策：FB.init のxfbml をfalseにする

いいね！したかどうかを判定するため、FB.initなどの処理を入れてあったのですが、それがうまくいきませんでした。

これは先ほどの1)の原因とも絡んでくるのですが、一度ボタンがレンダリングされるとそのサイズのままになるようなので、display:none;の状態でレンダリングされるとwidth,heightが0のままボタンが生成されてしまい、表示されなくなるようでした。

window.fbAsyncInit = function(){
  FB.init({
      appId  : 'YOUR_APP_ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : false  // parse XFBML
  });
}

また余談ですが、

<div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=YOUR_APP_ID";
      fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

上記のコードのjs#xfbml=1があるとFB.initの初期化処理が呼び出され、xfbml:trueの時と同じ動作をするようです。この場合コンソールに、
js FB.init has already been called - this could indicate a problem
と表示されます。
ですのでここも削除する必要があります。

３）OGタグいれてる

問題発生：アクティビティがタイムラインに流れない

解決策：FacebookDebuggerでキャッシュをクリアする

これはよく忘れてしまいますが、
(FacebookDebugger)[https://developers.facebook.com/tools/debug/]でOG要素をfacebook側に登録する必要があります。
詳しい解説は以下のブログに書いてありましたが、要はfacebook側でOG要素を全部キャッシュして全ユーザー共通でそのキャッシュを使っているので、このような作業をする必要があるようです。

参考：Operations Lab.｜facebook で外部 Web サイトのページキャッシュをクリアする

４）いいねボタン押下イベントコールバックのIE6対応

問題発生：いいね！ボタン押下後のコールバックが取得できない

解決策：未調査

FB.Event.subscribe('edge.create',
  function(href,widget){ 
    //いいね！した時の処理
  }
);

こんな感じで実装していたのですが、IE6でだけコールバックがとれませんでした。
ついでにFB.getLoginStatusもとれません。。

納期が迫っていたため、詳しい調査ができず、仕様を変更して対応しましたが、
予め記憶の片隅においてあるほうがいいかもしれません。。。