Create a Tweet This link without JavaScript

What do I want?

A pure HTML solution, no JavaScript required to allow my readers to tweet a post. In my case I want to do it with WordPress but today's solution can be used anywhere 😉

How?

Creating a regular link pointing to:

https://twitter.com/intent/tweet?text=Code language: JavaScript (javascript)

More on Twitter Web Intents

Use WordPress functions for title and URL

(get_the_title() . ' - ' . get_permalink() . ' vía @ricard_dev')Code language: JavaScript (javascript)

Encode for URL and make sure characters look good

Your title might have characters that won't work well with just urlencode() function. Let's mix it:

urlencode(html_entity_decode('Title and post URL', ENT_COMPAT, 'UTF-8'));Code language: JavaScript (javascript)

Final output

The whole thing, including an inline SVG for the Twitter icon:

<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(html_entity_decode(get_the_title() . ' - ' . get_permalink() . ' vía @ricard_dev', ENT_COMPAT, 'UTF-8')); ?>" title="Tweet this post">
  <span style="display: inline-block;">Tweet this post <svg style="width: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 276" fill="#3ba9ee">
      <path d="m302 70a195 195 0 0 1 -299 175 142 142 0 0 0 97 -30 70 70 0 0 1 -58 -47 70 70 0 0 0 31 -2 70 70 0 0 1 -57 -66 70 70 0 0 0 28 5 70 70 0 0 1 -18 -90 195 195 0 0 0 141 72 67 67 0 0 1 116 -62 117 117 0 0 0 43 -17 65 65 0 0 1 -31 38 117 117 0 0 0 39 -11 65 65 0 0 1 -32 35"/>
    </svg></span>
</a>Code language: HTML, XML (xml)

Leave a Reply

Your email address will not be published. Required fields are marked *