DEV Community

loading...
Cover image for Add a DM Button to Your Tweet

Add a DM Button to Your Tweet

vonhyou profile image Your 🍟 Classmate ・2 min read

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.

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

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:

# 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

# 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)

pic
Editor guide