cssのフォントの指定で、Helvetica（Helvetica Neue）が最初に指定されていると、IE9,IE10で表示エラーが起きてしまう問題は少し前に話題になり、既に知っている方も多いかと思います。
そのため、テンプレートの見直しやcssフレームワーク使用時には注意していたのですが、Facebookのプラグイン（いいねボタン、LileBox など）も問題が起きるっぽいです…
現象
Facebookの、いいねボタン・likeboxが全く表示されない。。
LikeBoxが破線部分に表示されるはずなのに枠すら出ない…だと…！？
しかも要素の幅・高さだけは見事に残しているだって？？何とも迷惑な…
原因
結論から言うと前述の通りある要素に、Helvetica（Helvetica Neue）が最初に指定されていることっぽいです。
原因を突き止めるのにちょっと時間がかかりましたが、、、
例の“XXX.jp の表示中に問題が発生したため…”の表示が出ていたので、もしやと思って開発者ツールでソースを見ると……ありましたね…
しっかりと、それはそれはご丁寧にクラス名までつけてくれていますね、Facebookさん…。
対応策
確か「いいねボタンではフォントの指定ができた気がするぞ」という記憶を頼りに以下のようにしたところ、なおったようですよ！！？
iframeならURL設定部分に&font=arialを
xfbmlなら、font=”arial”
HTML5なら、 data-font=”arial” を追記してください。
※フォントはFacebookで設定できる任意のものでOKです、上記ですと”arial”になります
■例
1 2 3 4 5 6 7 8 9 10 11 12 13
| /* いいねボタン */ //iframe版 <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FXXXXX.XX.XX%2F&send=false&layout=button_count&width=110&show_faces=false&font=arial&colorscheme=light&action=like&height=21&appId=XXXXXXXXXXXXXX" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> //xfbml版 <fb:like href="http://www.XXXXX.jp/" send="false" layout="button_count" width="110" show_faces="false" font="arial"></fb:like> //html5版 <div class="fb-like" data-width="105" data-layout="button_count" data-show-faces="true" data-send="false" data-font="arial" data-href="https://www.facebook.com/pages/XXXXXXX/XXXXXXXXXXXX"> /* LikeBox */ //iframe版 <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXX&width=292&height=590&colorscheme=light&show_faces=true&header=true&stream=true&font=arial&show_border=true&appId=140606096146080" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>
|
このことがあったのでIE10でいくつかのサイト見てみましたが、問題が起きているサイトがかなりあるようです…
皆さん是非IE9,10で確認してみてください。
IEさんかなりやっちゃってくれてますよ。