クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】Twitterシェアがうまくいかない原因はタイトルだった!!

f:id:clrmemory:20170529192341p:plain

先日【はてなブログにSNSシェアボタンを設置する方法】という記事を紹介しました。

その中で、記事上や記事下にシェアボタンを設置したのですが、幾つかの記事でTwitterとGoogle+ボタンだけシェアがうまくいかないことがありました。

 

その原因がタイトルにあったので、今回はその対処法を紹介します。

 

 

はじめに

 

今回紹介する方法は、以下の記事で紹介した方法でSNSシェアボタンを設置した場合に、TwitterとGoogle+のシェアがうまくいかない時の対処法です。

 

www.clrmemory.com

 

はてなブログのデザインからデフォルトで設置できるSNSシェアボタンであればうまくいったのですが、紹介した記事で設置したシェアボタンだと、以下のようになってしまいました。

 

f:id:clrmemory:20170529184531p:plain

 

このようになってしまう時の対処法を見つけたので早速見ていきましょう。

 

縦棒が原因だった

 

TwitterとGoogle+のシェアがうまくいかない記事に共通するのは、タイトルに入っていた【縦棒( | )】だったので今回は、テスト用に以下の記事を作成してみました。

 

f:id:clrmemory:20170529185745p:plain

 

タイトルにこのような記号を使っている場合、シェアボタンクリック時にURLの取得がうまくいかないようなんですよね。

以下の画像のURL欄を確認してみると、縦棒|がそのまま記述されてしまっています。

 

f:id:clrmemory:20170529185616p:plain

 

これではうまくいかないので、対策してみました。

 

シェア失敗の対処法

 

さて、シェアに失敗する原因は先ほど紹介したように【縦棒( | )】が原因でした。

そこで私が行った対処法は、単純にタイトルから縦棒を消すというものです。

 

f:id:clrmemory:20170529190349p:plain

 

これでうまくシェアできるようになりました。

 

f:id:clrmemory:20170529191019p:plain

 

ですがサイトによっては、縦棒を削除したくない場合もありますよね。

そういった場合は、以下の方法を試してみてください。

 

縦棒を全角にする

 

シェアに失敗した時の記事タイトルは【テスト投稿 | | 】でした。

 

このようなタイトルだった場合、以下のように書き換えてください。

【テスト投稿||】

 

ぱっと見だと違いがわかりにくいかもしれませんが、変更前の縦棒は半角英数で、変更後は全角の縦棒になっています。

このように記事のタイトルを書き換えることで、縦棒を使っていてもTwitterやGoogle+でシェアすることができました。

 

f:id:clrmemory:20170529190921p:plain

 

まとめ

 

今回紹介したように、はてなブログで設置したSNSシェアボタンで、TwitterとGoogle+のシェアがうまくいかない場合は【縦棒( | )】が原因かもしれません。

過去に公開した記事のタイトルに縦棒が使われていないかを、一度確認してみてください。

 

ではまた。

新着記事