チャットワークの公式シェアボタンと名刺アプリEightの公式シェアボタンを実装したという記事を公開して、どちらでも「日本語URLがエンコードされない問題」があることを書きました。
その後、お世話になっている株式会社再喜動の中島さんがEightでシェアしてくださり、Eightの方が調査してくれるとの流れになりました。
が、自分でなんとかならないのかと調べて、あれこれと試してみたところ、問題解決できたのでシェアしておきます。今回はシェアボタンの仕組みやphpが多少わかる方向けなので細かい解説はしません。
Webマーケティングに関する法律・権利を学ぶオンライン講座
WordPressで記事の日本語URLをエンコードして読み込む必要がある
WEBマスターの手帳はWordPressで作られています。そしてシェアボタンでは「シェアするURL」を指定する必要があります。
つまり各記事にシェアボタンを設置するには、phpを利用して動的に、その記事URLを読み込む必要があるわけです。この時に日本語URLでなければ、チャットワークのシェアボタンもEightのシェアボタンも何の問題もなくシェアすることができます。
ですが、WEBマスターの手帳では日本語URLを使っています。これが今回の問題の根源です。
日本語URLの問題点
日本語URLをリンク先などに指定する場合は日本語URLをエンコードと呼ばれる英数字に変換する必要があります。（日本語部分をそのまま書いても認識されません）
つまりシェアボタンでも記事URLがエンコードされずに日本語のまま読み込まれるとURLとして正しく表示されないわけです。
日本語URLをエンコードの例
エンコード前の日本語URL↓
エンコード後の日本語URL↓
このエンコード後のURLが長くなるので嫌がる人もいます。
記事URLの読み込み方が間違っていた
WordPressで記事のURLを表示するには、一般的に以下のphpタグを使います。
記事のリンク先として使うこともできます。
Facebookやはてブのシェアボタンをオリジナルデザインで実装する場合に、このphpタグをシェアするURLの指定に使っても機能します。
ですがチャットワークの公式シェアボタンも、Eightの公式シェアボタンも、このphpタグを使うと正しくURLが読み込まれないようで、シェアする際に正しい表示になりません。
そこでTwitterのシェアボタンで使用している、以下のphpタグを使ってみましたが、それでもうまく表示されませんでした。
あれこれと調べて最終的に辿り着いた解答が以下のphpコードです。このコードをURLの指定に入れたところ、日本語URLが正しくエンコードされました。
やっとチャットワークのシェアボタンもEightのシェアボタンもシェアボタンとして正しく機能するようになりました！
やっぱり自分で試行錯誤して解決するのが、他の人の手を煩わせなくて済むし、解決する最速の手段かもしれない。外に頼むとどうしても時間がかかってしまうのは仕方ないんだけど…
スポンサーリンク
