【HTML】実装したtwitterシェアボタンが「入力した単語の検索結果はありません。しばらくしてからやり直してください」とエラーを出して正常に動かない場合の対処法

最近結構多くのウェブサイトで発生していたバグで、当サイトの記事シェアボタン(画面上部にあります)でも発生していましたが、無事解決しました。

なお、この問題は特定の環境下でしか再現性のないバグなので、その環境に該当しない場合はどちらも普通に使えてしまいます。PC版から閲覧されている場合は全く問題なく使用できるはずです。

これ↓がバグを引き起こすボタンで…

これ↓が正常に動作するボタン(の、はず)です。

ユーザー側とWebデベロッパー側それぞれ対処を記載していますので、同様の症状に悩まれている方はご確認ください。

本ページに記載の内容は2022年11月~2023年1月時点での情報です。

ユーザー側の対処

この問題は特定のボタンをモバイル版アプリで開いた際に発生する不具合です。ユーザー側としてはサイト管理者に連絡して直してもらうか、諦めるかしかありません。もしサイト管理者に連絡する際はこのページに対応まで記載してありますので、ついでに伝えて頂けるとスムーズかと思います。

どうしてもツイートしたい場合は、アプリを介さずにブラウザ上でtwitterを開くしかありません。

twitterボタンを長押し→新しいタブで開く、とすると一応ツイートは可能ですのでお試しください。

Webデベロッパー側の対処

シェアしてもらえたはずのページがシェアされないのは、かなり重大な機会損失です。早急に直しましょう。

twitter ボタンは公式が提供するサービス「Twitter Publish」で生成できます。

よく見かけるデザインのシェアボタンを作ろうと思って、ページ下部の Twitter Buttons > Share Button と進めると、下記のようなコードが出力されます。

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

この a タグの href 属性に指定されているリンクがモバイル版アプリと相互作用して問題を引き起こしているようです。

リンクを下記のように書き換えることで正常に動作するようになります。

誤)<a href=”https://twitter.com/share?ref_src=…

正)<a href=”https://twitter.com/intent/tweet?ref_src=…

最近 twitter社はてんやわんやでいろいろ問題が巻き起こっていますが、こういう微細なバグが放置されているのもその煽りを受けているのかなと思います。