ajike switch

IEでのHelveticaエラーがFacebookプラグインでも起こる!?

2013/10/03 に、いいねボタンのxfbml・HTML5版使用時の対応方法追記しました

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

現象

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

原因

結論から言うと前述の通りある要素に、Helvetica(Helvetica Neue)が最初に指定されていることっぽいです。
原因を突き止めるのにちょっと時間がかかりましたが、、、
例の“XXX.jp の表示中に問題が発生したため…”の表示が出ていたので、もしやと思って開発者ツールでソースを見ると……ありましたね…
souce
しっかりと、それはそれはご丁寧にクラス名までつけてくれていますね、Facebookさん…。

対応策

確か「いいねボタンではフォントの指定ができた気がするぞ」という記憶を頼りに以下のようにしたところ、なおったようですよ!!?

iframeならURL設定部分に&font=arial
xfbmlなら、font=”arial”
HTML5なら、 data-font=”arial”を追記してください。
※フォントはFacebookで設定できる任意のものでOKです、上記ですと”arial”になります

■例

/*  いいねボタン  */
//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">

//xfbml版
<fb:like href="http://www.XXXXX.jp/" send="false" layout="button_count" width="110" show_faces="false" font="arial">

//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">

2013/10/02時点で何故かいいねボタンの開発者ツールにアクセスできなかったので、指定方法がわかるiframe版のみの対応策となっています

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

あ、ちょっと現象再現のために本ブログのLikeBoxの設定はそのままにしておこうかな。
べっ別に修正が面倒とかじゃないんだからねっ!
いいねボタンの方は、なおしたんだからっ!!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×