
Twitterでのことなんだけど、ツイート内に「メッセージで送信」ってDMに飛ぶボタンを見かけたんだけど、あれってどうやって表示させるんだろう……?

このような悩みにお答えします。
▼実際に作って表示させたツイートがこちら▼
背景がダークモードと通常モードだとこんな感じです。

この記事で、ツイートの一番下にボタンを表示させる方法を解説します。

フリーランス歴5年のグラフィックデザイナー。制作実績は500件以上。月間20万PV/10万円以上稼ぐ当ブログは2019年1月にスタート。
✓ 詳しいプロフィール >>
✓ デザインのポートフォリオ >>
✓ お問い合わせはこちら >>
Twitterのツイートに表示させるDMボタンを作る条件
ツイートにDMボタンを表示させるには、1つだけ条件があります。
条件1:誰でもDMが送れるように設定しておく
条件といっても、誰でもDMが送れるように設定されている必要があるだけです。
設定方法はカンタン。

[すべてのアカウントからのメッセージリクエストを許可する]がオンになってればOKです。

緑がオンの状態です。
Twitterのツイートに表示させるDMボタンの作り方
作り方1:DMのIDを調べる
下記のURLにアクセスしてユーザー名(ID)を入力します。

ユーザー名は@から始まるIDで、僕の場合は『 @osunnotsubuyaki 』になります。

確認するには、Twitterのプロフィールを見ると分かります。
入力したら Convert をタップ。

すると下に、
『 @osunnotsubuyaki =>1067032214888534016 』
と表示されるので、 => 以降の部分をコピーします。

僕の場合は『 1067032214888534016 』です。
DM作成用URLに先ほどのDMのIDを追加する
https://twitter.com/messages/compose?recipient_id=
DM作成用URLに先ほどのDMのIDを追加します。
https://twitter.com/messages/compose?recipient_id=ここに先ほどの自分のDMのIDを追加

僕の場合は、このようになります。
https://twitter.com/messages/compose?recipient_id=1067032214888534016
完成したらURLをツイート内に貼り付ける
完成したURLをツイートの最後に入れてツイートすると、URLがボタンに変化します。




※ちなみにURLをクリックしてもDMに飛びます。
DMのメッセージ入力欄に予め好きな文字を表示させたい

ツイート内の『メッセージで返信(DMボタン)』をタップしたあと、DMの画面に移動します。

画像のようにメッセージの入力欄に表示する文字を、予め設定することができます。
メッセージ入力欄に表示させたい文字をURLエンコードする
まずは、設定したいメッセージをURLエンコードする必要があります。
URLとして使用できない日本語や記号などの文字を、使用できる文字の特殊な組み合わせによって表記する変換規則です。
メッセージ入力欄に表示させたい文字を、下記サイトに入力するだけでURLエンコードに変換できます。


- エンコードするにチェック
- 表示させたい文字を入力する
- 変換ボタンをクリックする
するとエンコードされた文字が表示されるのでコピーしてください。

「ご相談内容を入力してください」と入力変換すると、こんな感じにエンコードされました↓
%E3%81%94%E7%9B%B8%E8%AB%87%E5%86%85%E5%AE%B9%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84
DMのIDを追加したURLにエンコードを追加する
先ほど『DM作成用URLに先ほどのDMのIDを追加する』で作ったURLに、&text=URLエンコードされた文字を追加します。

&text= を追加するのも忘れずに。
少し分かりづらいですが、全部合わせるとこういう感じになります。
https://twitter.com/messages/compose?recipient_id=1067032214888534016&text=%E3%81%94%E7%9B%B8%E8%AB%87%E5%86%85%E5%AE%B9%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84
- 青太字=DMのID
- 黒太字=新しく追加する文字
- 赤太字=メッセージにしたい文字のURLエンコード
最後に完成したURLを入れてツイートするだけ
あとは、完成したURLをツイートの最後にペーストすれば完了です!
無事にDMボタンやメッセージは表示されましたか?

うまくできなかったり表示されない場合は、この記事の最後にあるLINEからご質問してください。
ツイートにDMボタンを表示させて問い合わせを増やそう
ツイートにDMボタンが装飾されるだけでなんだか他のツイートとは一味違った特別感があります。
ツイートにDMボタンが追加されるだけで、問い合わせや相談がしやすくなりそうです。
問い合わせや相談が欲しい内容のツイートをするときにはぜひDMボタンを挿入してみてください。
この記事が気になった方はこちらの記事もおすすめ!

フリーランス歴5年のグラフィックデザイナー。制作実績は500件以上。月間20万PV/10万円以上稼ぐ当ブログは2019年1月にスタート。
✓ 詳しいプロフィール >>
✓ デザインのポートフォリオ >>
✓ お問い合わせはこちら >>