LoginSignup
2
1

More than 3 years have passed since last update.

簡単なHTML記述で「ハッシュタグをつけてツイートする」ボタンを作る。

Posted at

Pythonでウェブアプリケーションを作っているときに、Twitterに投稿するボタンを作りたいと思って調べました。

実は、ツイート内容を指定してツイートさせるだけなら(ツイートのリンクに飛ばすだけなら)TwitterAPIは必要ありません。TwitterのAPIを使うために、デベロッパーとして登録して、そのためには英語でウェブアプリケーションの概要を説明して……。など面倒な作業を行う必要はないので安心です。

今回はBootstrapを使ってボタンを作っているので、厳密にはHTMLのみでないです。

実際の挙動はこちらで。ソースコードはこちら

本記事の概要

  • HTMLの記述のみでツイートボタンができる
  • ハッシュタグ、テキスト、@ユーザー、URLなどが指定できる
  • 結局aタグのhref属性の指定でうまくやれる
  • Bootstrapのおかげでボタンが簡単に作れる

実際に書いたコード

btn-primaryを指定したので青いボタンです。Djangoのために書いたものなので繁雑に見えますが、静的ページならより簡潔に書けます。

detail.html
<a class="btn btn-primary" href="https://twitter.com/intent/tweet?url={{ request.scheme }}://{{ request.get_host }}{% url 'app:detail' post.pk %}&text={{ post.comment }}&hashtags=いつでもエア実況_{{ post.title }}_{{ post.episode }}話_{{ post.start_time|date:"Y年m月j日H時i分" }}から" target="_blank">
        ハッシュタグ付きでツイートする
</a>

チートシートっぽく書くとこう。

<a class="btn" href="https://twitter.com/intent/tweet?url=(リンクにしたいURL)&text=(テキスト)&hashtags=(ハッシュタグ)&screen_name=(リプライにしたいアカウント)>
ツイートする
</a>

解説

  • href="https://twitter.com/intent/tweet/" までは定型文。飛べばわかりますが、ツイート画面です。
  • 最初の要素は"?"をつけて始める。以降は"&"で繋げる。
  • 複数のハッシュタグをつけたいときは、半角スペースで区切ってあげる。
  • target="_blank"を指定すると「新しいタブで開く」になる
  • 改行の含め方はわかりませんでした。

感想

思いの外簡単にできて驚きました。APIとかいらないんですね。

それとBootstrapのおかげで、クラス指定だけでボタンになるのもすごい便利ですよね。おかげでCSSが全然わからない。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1