WEB 作りたい

【コピペ】#ハッシュタグを指定してツイートできるリンク作成

企業や団体の公式ツイッターアカウントでキャンペーンなどを実施する際に、「#(ハッシュタグ)○○○をつけてツイートしてください。」みたいリンクをクリックするとTwitter(ツイッター)でつぶやけるウィンドウが出て来ますよね。

そこに、あらかじめハッシュタグを記入しておく設定の仕方を調べてみましたので、ご紹介します。

些細なことかもしれませんが、それで実施したキャンペーンの応募数が増えたり、ツイートされる頻度が増えたりするようなキッカケになるかもしれません。

会社や個人のアカウントでキャンペーンを実施する際は利用してみてください。

  • リプライ
  • URL
  • フリーテキスト

を仕込んでおく事も可能です!そちらについては下記記事にまとめています。

Check!
【コピペ】@リプライ、URLなどを指定してツイートできるリンク作成
リプライ、ハッシュタグ、URLなどを指定したツイートリンクの貼り方

続きを見る

指定したい#ハッシュタグを決める

まずは、指定する「#ハッシュタグ」を決めていきます。

指定するハッシュタグの数は、いくつでも大丈夫!

ハッシュタグを決めるときは、

キャンペーンで利用する#ハッシュタグを決めるときは、1度ツイッター上で検索をしておきましょう。

すでに投稿がある#ハッシュタグは避け、キャンペーンのオリジナルの#ハッシュタグを指定します。

もし同じ名前のキャンペーンを毎年行なっている場合は、タグの最後に西暦などをつけてどの年のキャンペーンか判別できるようにしておきましょう。

キャンペーンなどで#ハッシュタグを使用する場合は、一度ツイッターで指定したいハッシュタグを検索し調べてみてください。キャンペーン開始前の時点で検索結果が出ないかチェックしておきましょう。

今回はサンプルとして「#ひゃくやっつ」と「 #ブログ」の2つのハッシュタグを、ツイートに入れていきます。

#ひゃくやっつ #ブログ

ハッシュタグ付きのツイートリンク作成

タグが決まれば早速、タグ付きのツイートリンクを作成しましょう。

 html
<a href="https://twitter.com/intent/tweet?hashtags=サンプルハッシュタグA,サンプルハッシュタグB" class="twitter-hashtags-btn" target="_blank">
  Twitterでつぶやく
</a>

上記のソースコードをコピーしてください。
このままホームページのhtmlやブログに貼り付けると下のようなリンクになります。

WordPress(ワードプレス)を利用しているブログに貼り付ける際は、ブロックの種類を「カスタムHTML」を指定し、ペーストしてください。

WordPress(ワードプレス)を利用しているブログに貼り付ける際は、ブロックの種類を「カスタムHTML」を指定し、ペーストしてください。

この「Twitterでつぶやく」リンクをクリックすると、ポップアップウィンドウが現れ
あらかじめハッシュタグが入力された状態でツイートが可能になります。

ポップアップウィンドウが現れ
あらかじめハッシュタグが入力された状態でツイートが可能になります。
ここまでくればもう簡単!
daruma108

あとは「サンプルハッシュタグA」「サンプルハッシュタグB」とリンク文字として表示される「Twitterでつぶやく」の箇所を好きなタグ・リンクテキストに変更するだけ!

 ↓こちらが任意で変更したものです。

 html
<a href="https://twitter.com/intent/tweet?hashtags=ひゃくやっつ,ブログ" class="twitter-hashtags-btn" target="_blank">
  キャンペーンに応募する!
</a>

このコードをhtmlに貼り付けると、↓こうなります!

ポイント

ハッシュタグを表す「#(シャープ)」は自動で挿入されるので、ソースコード内には記載しなくて大丈夫!

「Twitterでつぶやく」の箇所は用途に応じて「キャンペーンに応募する」や「エントリー!」など、クリックして参加したくなるような文章にしておきましょう!

ハッシュタグを1つ指定したツイートリンクの場合

上のサンプルでは2つのハッシュタグを指定したツイートリンクを作成しました。
もちろん指定するタグは1つでも大丈夫です!

 html
<a href="https://twitter.com/intent/tweet?hashtags=ひゃくやっつ" class="twitter-hashtags-btn" target="_blank">
  キャンペーンに応募する!(指定ハッシュタグ1つ)
</a>

1つ目の指定タグの後にある「,(カンマ)」から2つ目の指定タグを削除するだけ!

指定するハッシュタグを3つ、4つと増やしたい場合

逆に2つ以上のハッシュタグをしてする事ももちろん可能!

 html
<a href="https://twitter.com/intent/tweet?hashtags=ひゃくやっつ,ブログ,キャンペーン,応募フォーム,はこちら" class="twitter-hashtags-btn" target="_blank">
  キャンペーンに応募する!(指定ハッシュタグ5つ)
</a>

2つ目の指定タグの後に「,(カンマ)」を追加し3つ目、4つ目の指定したいタグを記入します。

ハッシュタグを指定したツイートリンクの応用編

設定したツイートリンクももっとクリックしてもらえるように見た目にも気をつかってみましょう!

画像にツイートリンクを貼ってみる

ツイートリンクも通常のリンクボタンと同じでテキストだけでなく、画像にも指定のハッシュタグ付きのツイートリンクを貼ることが出来ます!
「キャンペーンに応募!」みたいな画像を作成し、リンクを貼ってみます。

応募ボタンを画像にしてみる
 html
<a href="https://twitter.com/intent/tweet?hashtags=ひゃくやっつ, ブログ" class="twitter-hashtags-btn" target="_blank">
  ここに画像タグを挿入します。
</a>

リンクテキストを記入していた箇所に、画像タグを挿入します。

他にもリンクテキストへの装飾についてはこちらの記事で詳しく紹介しています。あわせてご覧ください。

あわせて読みたい!
CSSでリンクタグの色や下線の設定変更
CSSでリンクタグの色や下線の設定変更

続きを見る

ツイッターのアイコンを入れてみる

ツイートリンクを設定したリンクテキストに、Twitterのアイコンを挿入すると一目で「ツイートリンク」だという事がわかります。

以前の記事で紹介したアイコンフォントを使うと簡単にTwitter(ツイッター)アイコン付きリンクが作成できます。

アイコンフォントは一度設定をしておくと、コピペだけでいろんなアイコンを表示させることができる便利なサービスです。WEB制作の際には画像を作るよりも、作業時間の短縮につながります。

アイコンフォントの使い方については下記の記事をご覧ください。ご興味のある方はご一読ください。

あわせて読みたい!
WEBアイコンフォント「FontAwesome」の使い方
【超簡単】WEBアイコンフォント「FontAwesome」の使い方を簡単にご紹介

続きを見る

まとめ

いかがでしたでしょうか。

個人でTwitter(ツイッター)を運用していると使用する機会は少ないかもしれませんが、企業や団体などの公式ツイッターを運用している(させられている?笑)方は一度試してみてください。

「それくらい入力してもらえば良いじゃん」と思うかもしれませんが、今のネット社会、こういう些細な気遣いで、キャンペーンの応募数が増えたりツイートされる頻度が増えたりするかもしれません。

もし、会社などのキャンペーンを開催時に、利用できる機会がございましたら、作り方はものすごい簡単、ほぼコピペで完了しますので使用してみてください。

ツイートリンクには#ハッシュタグだけでなくリプライ、URL、テキストもリンクに仕込んでおくことが出来ます。

ハッシュタグ、リプライ、URL、文章を複数指定したツイートリンク

↑こんな感じです。リプライ、URL、テキストをツイートリンクに設定する方法は下記の記事をご覧ください。

あわせて読みたい!
【コピペ】@リプライ、URLなどを指定してツイートできるリンク作成
リプライ、ハッシュタグ、URLなどを指定したツイートリンクの貼り方

続きを見る

  • WEBやプログラミングの知識をつけたい
  • でも、スクールの学費は高すぎる

という方には、安価で始められる侍テラコヤ」をチェックしてみて!

\今なら1ヶ月無料クーポンコードあり/

Check!
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

続きを見る

1月31日まで

「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー

design WEB

2023/1/23

「侍テラコヤ」は安くで始めるプログラミングスクール【リ...

【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も

WEB 作りたい

2022/11/9

【箇条書き】リストタグ[ ul・ol・li ]の使い方...

ブログにコメント欄は必要?非表示にする設定方法【WordPress】

WEB 作りたい

2022/10/5

ブログにコメント欄は必要?非表示にする設定方法【Wor...

誰でもホームページの更新ができるようにする方法【googleドキュメント簡単活用術】

WEB 作りたい

2022/9/11

自社で更新できるホームページ作成【Googleドキュメ...

今、再注目のアニメーションGifの素材サイトまとめ【フリー】

design WEB 作りたい

2022/9/3

今、再注目のアニメーションGifの素材サイトまとめ【フ...

-WEB, 作りたい
-, , ,