chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2014/09/05

[WordPress小ネタ]記事にTwitterのツイートボタンをプラグインなしで付けた際のIEバグ

めちゃくちゃ小ネタです。今回はWPでツイートボタンをオリジナルで設置した際にIEで上手くツイート出来なかったので、それの原因と解決方法をメモしておきます。微妙な部分ですが、どうぞ

記事にツイートボタンを付けた

WordPress 4.0がリリースされましたね!これから色々触っていこうと思います!

さて、今回はWordPressの各記事に対して、オリジナルのツイートボタン(カウントなし)を付けたいというご要望があり、

設置したのですが、MacのSafari,Firefox,Chromeでは問題なく動作。WinのFirefox,Chromeで問題なく動作。

そうです。IEだけ何故かTwitterのトップへとリダイレクトされてしまいました。

検証と原因

ダメだった方のツイートボタン設置のコードは以下のような感じです。

/*
* 記事ループ内
* TweetボタンはCSSで当てています
*/
<a class="icon_twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php if(mb_strlen($post->post_title)>20) { $title= mb_substr($post->post_title,0,20) ; echo $title. ・・・ ;} else {echo $post->post_title;}?>" target="_blank">twitter</a>
/**/

ツイートボタンは、以下のリンクパラメータを与えればできます。

http://twitter.com/share?url=ツイートするURL&text=ツイート文

そして、色々と固定でリンク付けてみたり、テキスト変えたりしていたら原因が掴めた。

ツイートのテキストが日本語の時、エンコードされてない

というのが原因でした。

他のブラウザでは、自動でエンコードされるようでIEはエンコードされていないとパラメータを無視するような感じがしました。

詳しくは掴めていないのですが、日本語が含まれる際はエンコードしてみてはどうでしょうか。

一応これで解決したコードです。

/*
* 記事ループ
* 記事を出力する部分にurlencode関数をかけてます
*/
<a class="icon_twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php if(mb_strlen($post->post_title)>20) { $title= mb_substr($post->post_title,0,20) ; echo urlencode($title. ・・・) ;} else {echo urlencode($post->post_title);}?>" target="_blank">twitter</a>
/**/

何か詳しい事がわかれば、追記したいと思います。

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加