Introduction

Twitter makes it easy to add quotable tweets to your blog posts and articles via their web intents. These provide popups that allow Tweets, Replies, Retweets, Likes and Follows to be embedded in your content without the visitor leaving the page or needing to authorize a new app, best still, they are mobile friendly.

No Third Parties, Just HTML

Here is an example of a quotable tweet.

You don’t need third party plugins to make quotable tweets! [tweet this!]

This is just a normal anchor tag with a URL and query parameters. This is what the code looks like:

<a href="https://twitter.com/intent/tweet?text=You Don’t Need 3rd-party Plugins to Make Tweetable Quotes&url=http://readlearncode.com/2017/01/08/how-to-make-tweetable-quotes&hashtags=TwitterTip&via=readlearncode" target="_blank"><sup>[tweet this!]</sup></a>

Let’s break this down:

• The Twitter intent URL: https://twitter.com/intent/tweet
• The tweet’s text: text=You Don’t Need 3rd-party Plugins to Make Tweetable Quotes
• The link to your blog: url=http://readlearncode.com/2017/01/08/how-to-make-tweetable-quotes
• The hashtag: hashtags=TwitterTip
• The sender’s username: via=readlearncode

So the final URL looks like this:

https://twitter.com/intent/tweet?text=You Don’t Need 3rd-party Plugins to Make Tweetable Quotes&url=http://readlearncode.com/2017/01/08/how-to-make-tweetable-quotes&hashtags=TwitterTip&via=readlearncode

As you can see it’s constructed from the Twitter intent URL with appended query parameters. You then use this URL as you would any normal link.

In my example, I have used the text ^{[tweet this!]} but you can use an image if you prefer from the Twitters brand resources such as the little twitter bird .

The official documentation can be found on Twitter’s site for developers.