読者です 読者をやめる 読者になる 読者になる

悠々自適な日々を目指す

波音に抱かれながら眠りにつくような生活を夢見るブログ

カスタマイズしたツイートボタンが、ブラウザによって動作しない場合の解決法

ブログ ブログ-ブログカスタマイズ


Photo by Pixabay

Microsoft Edgeでたまたま動作確認をしたら
「ページが見つかりません(ページタイトルは「HTTP 400 正しくない要求」)」
と表示されてしまい、ツイートできなかったので解決方法をメモしておきます。

もしかしたら、Internet Explorerでも同じ現象が起きるかもしれません。

原因は、記事タイトルがURLエンコードされていなかったせい

はてなブログでカスタマイズしているツイートボタンのアドレスは、ほとんどがこのような表記になっているはずです。
(リンク部分のタグだけ表記しておきます)

<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}">〜</a>
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}">〜</a>

大体「記事アドレス・記事タイトル」をツイート情報に含めていると思います。
記事タイトルは「text={Title}」部分に相当するのですが、ここがエンコードされていなかったのが原因でした。
他のブラウザ(FirefoxやGoogle Chromeなど)では頭がよすぎるのか、普通に動作していたのでうっかりしていました……。

修正したツイートボタンのアドレスはこのようになります

<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={URLEncodedTitle}">〜</a>
<a href="http://twitter.com/intent/tweet?text={URLEncodedTitle} {URLEncodedPermalink}">〜</a>

「text={Title}」を「text={URLEncodedTitle}」へと変更しました。

ここで使用している変数ははてなブログ独自の表記なので、WordPressや他のブログサービスをお使いの方は、それぞれに置き換えてください。

参考:記事ごとに任意のブログパーツなどを配置する - はてなブログ ヘルプ

スマホ版も修正しておいたほうがいいかも?

この修正は、もちろんスマホ版でも使えます。

持っているAndroidスマホにて、公式のTwitterアプリ・サードパーティ製アプリをインストールした状態でツイートボタンをタップしてみたところ

  • 公式Twitterアプリ:
    URLエンコードあり・なし関係なくツイート可
  • サードパーティ製アプリ(TwitPane、ツイタマ使用):
    URLエンコードあり・なし関係なくツイート可

という結果でした。

この検証では問題なくツイートできたものの、PCのように使用しているアプリ次第のような気がしますので、念のため修正しておいたほうがいいかも。

はてなブログ提供のツイートボタン、Twitter公式提供のツイートボタンはもちろん問題なしです

ややこしいのは無理! キライ! しんどすぎ! って方はこれらを使うのもアリですね。
でもたった一箇所を修正するだけなので楽ちんです。

Microsoft EdgeもInternet Explorerもほとんど使わない・使ってこなかったので、気まぐれ発揮してよかったなーと思いました。
OperaとかLunascape、Sleipnirなどなど、ブラウザは他にもたくさんありますがさすがにチェックしきれないので、とりあえずURLエンコードしておけば幸せになれると思います!