knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

IEで「いいね」ボタンが文字化けする

Helveticaが原因

IEfacebookの「いいね」ボタンを実装すると、文字化けしてしまいました。

f:id:ShinImae:20160113160034j:plain

どうやら、デフォルトでHelveticaがフォント指定されているらしく、そのため文字化けを起こしてしまったようです。

IEHelveticaとの相性の悪さは有名で、今回のように文字化けしてしまったり、フォントそのものが表示されないなど様々なものが報告されています。

今回もそのような例のひとつであるとのことですが、パラメータにて別のフォントを指定することが可能であるようです。

下記記事に各種実装方法における解決策が紹介されていましたので、抜粋しておきます。

www.ajike.co.jp

/* iframe */ 
<iframe style="border: none; overflow: hidden; width: 110px; height: 21px;" src="//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" frameborder="0" scrolling="no">  
/* XFBML */ <fb:like href="//www.XXXXX.jp/" send="false" layout="button_count" width="110" show_faces="false" font="arial" data-mce-href="//www.XXXXX.jp/">
/* HTML5 */ <div class="fb-like" data-width="105" data-layout="button_count" data-show-faces="true" data-send="false" data-font="arial" data-href="//www.facebook.com/pages/XXXXXXX/XXXXXXXXXXXX">>

Likeboxも同じ要領で対応できるそうです。