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

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

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

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

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

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

あわせて読みたい！

リプライ、ハッシュタグ、URLなどを指定したツイートリンクの貼り方

続きを見る

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

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

#ひゃくやっつ #ブログ

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

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

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

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

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

Twitterでつぶやく

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

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

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

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

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

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

キャンペーンに応募する！

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

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

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

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

1つ目の指定タグの後にある「,（カンマ）」から２つ目の指定タグを削除するだけ！

キャンペーンに応募する！（指定ハッシュタグ１つ）

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

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

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

２つ目の指定タグの後に「,（カンマ）」を追加し３つ目、４つ目の指定したいタグを記入します。

キャンペーンに応募する！（指定ハッシュタグ５つ）

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

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

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

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

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

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

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

あわせて読みたい！

CSSでリンクタグの色や下線の設定変更

続きを見る

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

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

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

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

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

あわせて読みたい！

【超簡単】WEBアイコンフォント「FontAwesome」の使い方を簡単にご紹介

続きを見る

まとめ

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

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

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

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

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

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

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

あわせて読みたい！

リプライ、ハッシュタグ、URLなどを指定したツイートリンクの貼り方

続きを見る

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

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

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