After implementing the dark mode, I wanted to continue in the process of improving my website with other useful functionalities. Now, if you have a Twitter account, you can send me a private message, much like as you do every day on Facebook, WhatsApp, Instagram, etc. If you feel more comfortable using messages instead of e-mails, you can write me one now. I’ll explain how I implemented this feature.
I’m sure most of you already know what an image like this means, especially in social networks like Facebook, Instagram, or in services like WhatsApp or Telegram:
It means the person is online. Usually, you can click on the icon to start a conversation sending him/her a private message. That’s a handy feature for every website. That simple, sometimes animated green circle is a visual clue that wants to suggest to you, “Hey, I’m online; you can write to me.” I find it to be profitable when it’s used as a mean of support on websites, for example, and I tend to use it much more than slow-to-respond e-mails.
I wrote the button’s code from scratch, an SVG made of three circles. The first one contains an image. The other two are used to represent the animated green icon. The HTML code that generates the button is this:
<svg viewBox="0 0 20 20" width="4rem" height="4rem"> <defs> <clipPath id="circle"> <circle cx="10" cy="10" r="10" /> </clipPath> </defs> <a href="https://twitter.com/messages/compose?recipient_id=724172156796542976"><image href="/imgs/io.jpg" height="20" width="20" clip-path="url(#circle)" /></a> <circle cx="3" cy="3" r="1.5" fill="#6ee559"> <animate attributeName="r" dur="1s" repeatCount="indefinite" from="1.5" to="3" /> <animate attributeName="fill" dur="1s" repeatCount="indefinite" from="#6ee559" to="rgba(110, 229, 89, 0)" /> </circle> <circle cx="3" cy="3" r="1.5" fill="#6ee559" /> </svg>
defs element, which contains a
clipPath one. This lets me make the rectangular image looks like a circle. The image itself is surrounded by an
a element, which makes it a link. The green indicator is made of two green circles, one above the other. The one under uses animations, instead of the one over, which is static. Both the
r and the
fill attributes are animated; the transition lasts for one second.
Where am I going to write my personal message?
The functionality is implemented by the most effective and typical element of the entire World Wide Web: the
a element. Using a simple link, Twitter lets you jump to a conversation with a specific Twitter user. Probably this same behavior is made available by other social media. Twitter makes it extremely simple, providing a snippet like this:
<a href="https://twitter.com/messages/compose?recipient_id=3805104374" class="twitter-dm-button" data-screen-name="@furni"> Message @furni </a>
I removed everything except for the
href attribute. To be clear, Twitter calls these messages “Direct Messages.”
Now you can click on the profile picture you find on the homepage of my website to send me a message. Try this functionality and write to me! I assure you that I’ll reply!
If you have any questions, ideas, advice, suggestion, or if you want to tell me something or get in touch with me, please: do it! You can find me on Twitter (you can click on the profile picture on the homepage to send me a Direct Message), or you can e-mail me.