WEBマスターの手帳 > ブログ > 解決!チャットワークのシェアボタンとEightのシェアボタンで日本語URLの記事がエンコードできなかった件。

ブログ

2016年8月9日

解決!チャットワークのシェアボタンとEightのシェアボタンで日本語URLの記事がエンコードできなかった件。

解決!チャットワークのシェアボタン、Eightのシェアボタンで日本語URLの記事がエンコードできなかった件。
Twitter 9 Facebook 9 Google+ はてブ 1 Pocket 1 チャットワーク Eight Feedly

チャットワークの公式シェアボタンと名刺アプリEightの公式シェアボタンを実装したという記事を公開して、どちらでも「日本語URLがエンコードされない問題」があることを書きました。

その後、お世話になっている株式会社再喜動の中島さんがEightでシェアしてくださり、Eightの方が調査してくれるとの流れになりました。

が、自分でなんとかならないのかと調べて、あれこれと試してみたところ、問題解決できたのでシェアしておきます。今回はシェアボタンの仕組みやphpが多少わかる方向けなので細かい解説はしません。

スポンサードリンク

WordPressで記事の日本語URLをエンコードして読み込む必要がある

WEBマスターの手帳はWordPressで作られています。そしてシェアボタンでは「シェアするURL」を指定する必要があります。

つまり各記事にシェアボタンを設置するには、phpを利用して動的に、その記事URLを読み込む必要があるわけです。この時に日本語URLでなければ、チャットワークのシェアボタンもEightのシェアボタンも何の問題もなくシェアすることができます。

ですが、WEBマスターの手帳では日本語URLを使っています。これが今回の問題の根源です。

日本語URLの問題点

日本語URLをリンク先などに指定する場合は日本語URLをエンコードと呼ばれる英数字に変換する必要があります。(日本語部分をそのまま書いても認識されません)

つまりシェアボタンでも記事URLがエンコードされずに日本語のまま読み込まれるとURLとして正しく表示されないわけです。

日本語URLをエンコードの例

エンコード前の日本語URL↓

homepage-reborn.com/2016/08/09/名刺アプリ「eight」の公式シェアボタンを実装しま/

エンコード後の日本語URL↓

https://homepagereborn.com/2016/08/09/%E5%90%8D%E5%88%BA%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8Ceight%E3%80%8D%E3%81%AE%E5%85%AC%E5%BC%8F%E3%82%B7%E3%82%A7%E3%82%A2%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%BE/

このエンコード後のURLが長くなるので嫌がる人もいます。

記事URLの読み込み方が間違っていた

WordPressで記事のURLを表示するには、一般的に以下のphpタグを使います。

<?php the_permalink(); ?>

記事のリンク先として使うこともできます。

<a href="<?php the_permalink(); ?>">リンク</a>

Facebookやはてブのシェアボタンをオリジナルデザインで実装する場合に、このphpタグをシェアするURLの指定に使っても機能します。

ですがチャットワークの公式シェアボタンも、Eightの公式シェアボタンも、このphpタグを使うと正しくURLが読み込まれないようで、シェアする際に正しい表示になりません。

チャットワークのシェアボタンがエンコードされない
Eightのシェアボタンがエンコードされない

そこでTwitterのシェアボタンで使用している、以下のphpタグを使ってみましたが、それでもうまく表示されませんでした。

<?php echo $url_encode ?>

あれこれと調べて最終的に辿り着いた解答が以下のphpコードです。このコードをURLの指定に入れたところ、日本語URLが正しくエンコードされました。

<?php $url = get_permalink(); echo urlencode($url);?>

やっとチャットワークのシェアボタンもEightのシェアボタンもシェアボタンとして正しく機能するようになりました!

チャットワークで日本語URLがエンコードされた
Eightで日本語URLがエンコードされた

やっぱり自分で試行錯誤して解決するのが、他の人の手を煩わせなくて済むし、解決する最速の手段かもしれない。外に頼むとどうしても時間がかかってしまうのは仕方ないんだけど…

この記事をシェアして頂けると嬉しいです

LINEで送る
Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

解決!チャットワークのシェアボタン、Eightのシェアボタンで日本語URLの記事がエンコードできなかった件。
友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • @webmaster_note
  • Instagram

最新記事一覧

ピックアップ記事一覧

カテゴリー

Webマーケティングスキルを習得するならテックアカデミー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事