ブログ記事内に任意の語句で自由にTwitterシェアリンクを設置する方法

about blog

ブログ記事を投稿すれば、ほとんどのテーマには記事の上下に Twitter のシェアボタンが設置されていて、読者がその記事に対して簡単にシェアして共有させることができます。

ただ、投稿記事の上下にある Twitter シェアボタンは「その投稿記事に対してのシェアリンク」限定です。

ブログ運営を続けていれば、例えば・・・

記事の本文内に別の記事に対しての Twitter シェア用リンクを設置したり、プレゼント企画用の特別な Twitter シェア用リンクを設置する…といったことをしたい場合もあるんじゃないかと思います。

今回は「ブログ記事内に任意の語句で自由に Twitter シェアリンクを設置する方法」を紹介したいと思います。

記事本文内に投稿記事とは別の Twitter シェアリンクを設置

例えば、先日、本ブログではプレゼント企画を行なったのですが、応募は Twitter で行い、任意のハッシュタグを応募者計測の指標としました。

その際、記事内には以下のような任意の Twitter シェアリンクを設置しました。

記事本文内に投稿記事とは別の Twitter シェアリンクを設置

このリンクをクリックするだけで、

記事本文内に投稿記事とは別の Twitter シェアリンクを設置

このようにあらかじめ設定してある語句が記載されている Twitter シェアウィンドウが開き、応募者にテキストをコピー&ペーストさせる手間が要らず、とてもユーザビリティに優れています。

では、以下に実際に可動するリンクを設置してみます。

About PCWindows歴20年のぼくがオススメするパソコンブランドの選び方
先日、友人に「新しいパソコンを買おうと思うんだけど、どこのブランドが良いの?」と尋ねられました。皆さんも同じような質問を誰かに...

例えば、上の別記事に対する Twitter シェアリンクを任意で設置すると、

こんな感じです。試しにクリック(タップ)してみてください。別ウィンドウで Twitter のシェアページが開くはず。

  • シェアして欲しい任意のハッシュタグが記述されている
  • シェアして欲しい任意の記事のタイトルが記載されている
  • シェアして欲しい任意の記事 URL が記載されている

この3つが設定されてリンク化してあります。

実際にシェアされて Twitter に反映されると、

この様に表示されます。ハッシュタグもバッチリで、URL もしっかり反映されています。

任意の Twitter シェアリンクを設置する手順

以下で紹介する HTML コードを記事内に貼り付けてください。

WordPress の Classic Editor ならテキストエディタ、Gutenberg ならカスタム HTML で、その他のブログサービスであれば、HTML を直接記述できるエリアに貼り付け。

ハッシュタグ入りの Twitter シェアリンク

テキスト部分は任意で変更してくださいね。

実際に反映させると以下。

実際に記事内に表示されるテキスト

ハッシュタグ無しバージョンの Twitter シェアリンク

テキスト部分は任意で変更してください。

実際に反映させると以下。

実際に記事内に表示されるテキスト

 

ここがポイント!

「https://twitter.com/home?status=」が Twitter のシェア起動 URL です。「%23」がハッシュタグのスターター記号「#」を表しています。

あとがき

今回は、ブログ運営時における Twitter の便利な使い方、ちょっとした小技「ブログ記事内に任意の語句で自由に Twitter シェアリンクを設置する方法」を紹介いたしました。

使う機会自体は少ないかも知れませんが、ここぞというときには役に立つ小技です。

そんな機会が訪れた時に本記事を思い出していただけたら幸いです。