DEV Community

Cover image for Add a DM Button to Your Tweet
Regular 🍟
Regular 🍟

Posted on

Add a DM Button to Your Tweet

Inspired by my twitter friends, I intended to simplify the way of creating Direct Message Button.

What the Twitter DM Button is?

The Twitter DM Button is an elegant way for you to help others send DM to you. It's default content can be customized.

and it's effect(on mobile device):

Alt Text

default message is "hello, 🍟

~~~" here.

Alt Text

It seems that it doesn't work out of twitter environment(like web or mobile app), but you can see the origin tweet by clicking it.

{% twitter 1386690916694380551 %}

How I Started

At the beginning, I analyzed the link of this button.

https://twitter.com/messages/compose?text=hello,%20%F0%9F%8D%9F~~~

&recipient_id=1190406529922416641


Enter fullscreen mode Exit fullscreen mode

Easy to find, the text= part defines the default message and recipient_id= is your twitter id(not handle)

so it's not hard to combine a link like this by ruby


ruby
def make_permlink(content, twitter_id)
  baselink = "https://twitter.com/messages/compose?"
  greetings = URI.encode content
  "#{baselink}text=#{greetings}&recipient_id=#{twitter_id}"
end


Enter fullscreen mode Exit fullscreen mode

URI.encode convert spaces to %20 or something.

How it Ended

I decided to share this "widget" and obviously sharing .rb files is not a good idea. So I began to write a web app.

At first I chose Rails but it's like using a cannon to hit a mosquito. So I take some time learning another web framework Sinatra and use it.

Alt Text

Its simplicity fits this simple web app best. You can see the core code of this project:


ruby
# twitter.dm.rb

get '/' do
  erb :index
end

post '/' do
  unless params[:handle].empty? or params[:content].empty?
    @permlink = make_permlink params[:content], params[:handle]
  end
  erb :index
end


Enter fullscreen mode Exit fullscreen mode

and view


erb
# views/index.erb

<% if @permlink %>
  <div>
    Your DM Button's link is:
    <%= escape_html(@permlink) %>
  </div>
<% end %>


Enter fullscreen mode Exit fullscreen mode

The Repo: vonhyou/get-twitter-dm-btn

Web App: Twitter DM Button

ps: I am not familiar with the front-end, if you are interested, welcome to pr 🥺

Discussion (0)