WEB 作りたい

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

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

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

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

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

リプライ、URL、テキストをあらかじめ仕込むんでおくツイートリンクの作り方については、下の記事をご覧ください。

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

続きを見る

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

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

#ひゃくやっつ #ブログ

指定するハッシュタグの数は1つでも2つでも10個でも問題ありません。

ポイント

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


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

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

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

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

 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などを指定したツイートリンクの貼り方

続きを見る

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ!まずは無料体験!

私も現在phpを勉強中!
daruma108

テックアカデミー公式ホームページへ

※無料体験だけならいっさいお金はかかりません。

-WEB, 作りたい
-, , ,

© 2021 ひゃくやっつ