注：この記事は、元記事の補完的役割をしています。
元記事：コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズ - Yukihy Life
不具合の発生と、それによりコードを編集していたのでお知らせです。
具体的な不具合
最初に皆さんに提供していたボタンで可能性のある現象として、以下のものが見られます。
- Twitterから入りシェアをしようとすると、URLが貼られない
- 日本語URLの記事をシェアしようとすると、エンコードされていないURLが貼られてしまう
- 特定のPC×IEブラウザで、Twitter画面が開けずにエラーになってしまう
それぞれ簡単に説明を加えます。
1.Twitterから入りシェアしようとすると、URLが貼られない
普通にはてなブログやブラウザから入ってTwitterからシェアしようとすると問題なくできるのですが、スマホのTwitterアプリから入って
ボタンを押してシェアしようとすると…
上の図のようにURLが貼られていない！というものです。Twitterからリンクに入った人はTwitterでシェアしやすいと思うので、これは結構致命的でした。
２.日本語URLのシェア
僕は以前、日本語URLの方がSEOに強いと聞いていたので、昔の記事で日本語URLを採用していました。
例えばこの記事「今週見た映画と感想〔2月第2週〕 - Yukihy Life」
この記事のURLは日本語表記にしているので
http://www.yukihy.com/entry/2015/02/14/今週見た映画と感想〔2月第2週〕
となると思いきや、実際は日本語部分はエンコードされて
のようになります。
しかしシェアボタンでシェアをすると、
http://www.yukihy.com/entry/2015/02/14/今週見た映画と感想〔2月第2週〕
のように意味のないURLが貼られる可能性がありました。日本語URLの記事がある方は、シェアができなかったと思います。
余談ですが日本語URLは、今ではそこまでSEOには関係がないと言われてるそう。シェアされたときのURLがただ長くなるだけなので、日本語URLにはしない方が無難です。（現在日本語URLの記事があっても、変更したりしないでくださいね！シェア数などが０になってしまいます）
つい最近出された記事でこんなのもありました。
3.特定のPC×IEブラウザで、Twitter画面が開けずにエラーになってしまう
これは僕も友人のパソコンを使って見せてもらったのですが、確かにインターネットエクスプローラーで見るとシェアができないものがありました。
しかしそのパソコンにGoogleChromeを入れて見ると普通にシェアができたので、シェアボタンというよりはブラウザに問題があったようです。
実際ググってみるとIEブラウザにはTwitterやFacebookが開けないというような事例がよくあるそうです。
で、当ブログで配布していたシェアボタンは、IEブラウザからシェアできないという、かなり致命的な欠陥がありました。これは本当に申し訳ないです。
具体的な変更点
具体的に変更する必要があるのは、HTMLのTwitter部分です。コードで言うと、コード４とコード６（と、それらに対応している追加コード（3Dボタンでしたらコード４（３）など））です。
その中のTwitter部分のhrefの中を変えています。今までの全てを変えるのが面倒な方は、そこの部分のみ変えれば大丈夫です。
ただ元記事のコードも、より最適化するように随時更新をしているので（詳しくは追記をご覧ください）、もう一度コピペするのも良いかもしれません。
ボタンを設置したら、自分でうまく機能しているかの確認をお願いします。
これも余談ですが今回の問題点として、記事タイトルにしろURLにしろエンコードされていないというのがありました。エンコードの仕方が良く分からなくって２日間くらいjQueryのコード作ってたら、この記事を書いてる２時間前くらいに、はてなだと一瞬でエンコードできると知って爆死しました。
→参考：記事ごとに任意のブログパーツなどを配置する - はてなブログ ヘルプ
最後に
最後に、不具合や追記が多くなってしまい、申し訳なく思っています。ただ素人が作ったものですので、今後も追記する可能性がありますのでご了承ください^^;。
また、不具合を指摘してくださった方々に感謝申し上げます。特に実験台のようにしてしまったコトリ（id:defender_21）さん、ありがとうございます笑。
不具合などありましたらご連絡いただけると嬉しいです。
