Posted at

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

More than 5 years have passed since last update.


アジェンダ


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

  2. いいねボタンは1ページに2つ設置されている

  3. OGタグいれてる

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


想定状況


jQuery1.10.2を使用しています


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


問題内容と解決方法


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


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


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

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

//fb-likeのなかにいいねボタンが作られるのでいいねボタンが生成されているかチェック

if($('.fb-like').children().length === 0){
FB.XFBML.parse();
}


2)いいねボタンは1ページに2つ設置されている


問題発生:2つのうち1つが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

と表示されます。

ですのでここも削除する必要があります。


3)OGタグいれてる


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


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

これはよく忘れてしまいますが、

(FacebookDebugger)[https://developers.facebook.com/tools/debug/]でOG要素をfacebook側に登録する必要があります。

詳しい解説は以下のブログに書いてありましたが、要はfacebook側でOG要素を全部キャッシュして全ユーザー共通でそのキャッシュを使っているので、このような作業をする必要があるようです。

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


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


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


解決策:未調査

FB.Event.subscribe('edge.create',

function(href,widget){
//いいね!した時の処理
}
);

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

ついでにFB.getLoginStatusもとれません。。

納期が迫っていたため、詳しい調査ができず、仕様を変更して対応しましたが、

予め記憶の片隅においてあるほうがいいかもしれません。。。