【htmlコーディング】固定ツイートを仕込んだボタンの作り方

今回は、固定ツイートを仕込んだボタンの作り方をご紹介します。

固定ツイートとは？

固定ツイートとは、ツイート文とURL、ハッシュタグがすでに仕込まれているツイートのことです。
ハッシュタグをツイートしてキャンペーンに参加するようなサイトによく見かけます。

仕組みはとても簡単で、aタグのhrefに設定することで実現できます。

固定ツイートの例

以下のボタンをクリックしてみてください。

別ウインドウで開き、固定ツイートと、このページのURL、ハッシュタグも入力された状態でTwitter投稿画面に遷移するかと思います。

固定ツイートの作り方

固定ツイートは、aタグのhrefに以下のように記述します。

<a href="https://twitter.com/share?text=【htmlコーディング】固定ツイートを仕込んだボタンの作り方&url=https://www.good-f-design.com/fixed-tweet/&hashtags=固定ツイート" target="_blank">

• text：ツイート文
• url：シェアさせたいページのURL
• hashtags：ハッシュタグ

ハッシュタグを複数入れたいときは、カンマ「,」で区切れば複数入れることができます。

文字をエンコードする

上記のままでも可能ですが、環境によって文字化けしてしまうことがあるので、エンコードをするようにしましょう。

エンコードをすると下記のようになります。

<a href="https://twitter.com/share?text=%E3%80%90html%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%80%91%E5%9B%BA%E5%AE%9A%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E3%82%92%E4%BB%95%E8%BE%BC%E3%82%93%E3%81%A0%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9&url=https://www.good-f-design.com/fixed-tweet/&hashtags=%E5%9B%BA%E5%AE%9A%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88" target="_blank">

一気に複雑になりましたが、textのツイート文と、ハッシュタグを下記サイトでエンコードしただけです。

→ Web便利ツール/URLエンコード・デコードフォーム – TAG index

エンコードしたものを、差し替えればOKです。

最後に

以上、固定ツイートを仕込んだボタンの作り方をご紹介しました。
覚えておくと、シェアさせたいページがあった際に便利です。

また何か便利ツールなどがあればご紹介したいと思います。