facebookプラグインでのIE helvetica問題

cssのフォントの指定で、Helvetica(Helvetica Neue)が最初に指定されていると、IE9,IE10で表示エラーが起きてしまう問題は少し前に話題になり、既に知っている方も多いかと思います。
そのため、テンプレートの見直しやcssフレームワーク使用時には注意していたのですが、Facebookのプラグイン(いいねボタン、LileBox など)も問題が起きるっぽいです…

現象

Facebookの、いいねボタン・likeboxが全く表示されない。。
png
LikeBoxが破線部分に表示されるはずなのに枠すら出ない…だと…!?
しかも要素の幅・高さだけは見事に残しているだって??何とも迷惑な…

原因

結論から言うと前述の通りある要素に、Helvetica(Helvetica Neue)が最初に指定されていることっぽいです。
原因を突き止めるのにちょっと時間がかかりましたが、、、
例の“XXX.jp の表示中に問題が発生したため…”の表示が出ていたので、もしやと思って開発者ツールでソースを見ると……ありましたね…
souce
しっかりと、それはそれはご丁寧にクラス名までつけてくれていますね、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&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=21&amp;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&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;font=arial&amp;show_border=true&amp;appId=140606096146080" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

このことがあったのでIE10でいくつかのサイト見てみましたが、問題が起きているサイトがかなりあるようです…
皆さん是非IE9,10で確認してみてください。
IEさんかなりやっちゃってくれてますよ。