Croatia | Flickr – Photo Sharing!
当ブログのTweet buttonからツイートしようとすると一部の環境で文字化けしてしまう問題を修正しました。修正の方法をメモっておきます。
当ブログの記事の上の方と下の方に設置しているTweet buttonからツイートしようとした場合、発言内容が文字化けしてしまう現象が発生していたので修正してみました。
ChromeやFirefoxでは発生せず、どうもInternet Explorer（IE）で起こる問題のようでした。現在は修正済みで、IE8とIE11で動作確認をしています。おのれIE！と言いたいところですが、言っても仕方ないのでやめておきます。
以下、紆余曲折を経て修正に至った経緯を書いていますが解決方法を知りたい人は適当に読み飛ばして記事の最後へ飛びましょう。
検索編
うちのブログのTweet buttonなど、ソーシャル系のボタンはフリーな素材を使わせてもらいつつ、自作のものを設置しています。作ったときは以下のサイトを参考にさせてもらいました。
Facebook,Twitter,はてな,mixiのソーシャルボタンをオリジナルにしたいのです | それだよ。
<a href=”http://twitter.com/share?count=horizontal&original_referer=ここにhttp://のアドレス&text=ここにタイトル&url=ここにhttp://のアドレス&via=ここに自分のTwitterアカウント” onclick=”window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;”><img src=”オリジナルのボタン” width=”サイズ” height=”サイズ” /></a>
しかし、この方法そのままだとIEではツイート内容が文字化けしてしまったり、ツイート用にポップアップする小窓にツイートが表示されなかったりしてしまうようです。
問題の解決法を探って検索してみると、同じトラブルに悩まされている人を発見。
ツイートするのボタンオリジナルアイコンについて | JavaScriptのQ&A【OKWave】
自分とまったく同じ状態っぽい上に、端的な解決方法まで書かれています。
おっしゃる通り this.href → encodeURI(this.href) に変更することで
問題なく動作するようになりました！
これでめでたく解決だわーと思ったのですが、念のため動作確認をしてみました。すると、確かにIEでは動作するようになったのですが、今度はChromeやFirefoxで文字化けを起こしてしまうように。
さらに検索を進めて同じような症状を解決している人を発見。
twitterの「つぶやく」ボタンを好きな画像にする！ – Prog-memo
window.openあたりの記述が問題なのですが、こっちはさっきの解決方法よりももう一歩進んだ感じです。
< a href=”http://twitter.com/share?count=horizontal&original_referer=ここにhttp://のアドレス&text=ここにタイトル&url=ここにhttp://のアドレス&via=ここに自分のTwitterアカウント” onclick=”window.open(encodeURI(decodeURI(this.href))
, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;”><img src=”オリジナルのボタン” width=”サイズ” height=”サイズ” /></a>
しかし、残念ながらこの方法でもなぜかうまくいかず…。正直なところこのあたりで割と絶望してました。
解決編
いろいろと検索してみて最終的にたどり着いたのがこちら。
JavaScript：「return false;」で「href」を無効化できずに２つウィンドウが開いてしまった原因 | 情報科学屋さんを目指す人のメモ
ちょっと問題の内容は違いますが、扱っているコードは似ています。これを参考にさせてもらいつつ、以下のようなコードを書いてみました。
<a href=http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink(); ?>&text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=TwitterのID title=”Twitterでつぶやく” onclick=”window.open(encodeURI(decodeURI(‘http://twitter.com/share?count=horizontal&original_referer=<?php the_permalink(); ?>&text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=TwitterのID’)), ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;”><img src=”アイコン画像のURL”></a>
要するに「this.href」のところに前半のリンクをそのまんま書いている感じです。なんだか荒っぽいような強引なような無理矢理感のあるコードに見えるのですが、これで動作するようになりました。念のためIE8とIE11、それにChromeとFirefoxで確認してみましたが無事に動作しています。
最後に、言っても仕方ないのはわかっているのですが我慢できないのでやっぱり言わせてください。
おのれIE！
