Have you ever seen custom quotes in a blog post with a "tweet this" link? It's cool, right? Instead of focusing your Twitter links on your blog post title, you can have several tweets with unique content for each of your posts. And by highlighting your best quotes, you increase your chance that readers will share your posts.

Here's an example of a completely customized Twitter link for this post:

"Add tweetable quotes to blog posts without a plugin!" -- Tweet this.

Have you wondered how you could offer these kinds of customized tweets in your own posts?

Joy Collado asked a question along these lines over in Sophie Lizard's Be a Freelance Bloggercommunity. I shared a tip with her explaining how she could manually add a text-based "tweet this" link to any page or post. And I thought it might also be of interest to bloggers here, especially if you want to minimize your plugin installations.

How to Add Tweetable Quotes to Your Blog Posts

Add custom tweetable quotes to your blog posts

Let's work with my example from above. Let's say I want readers to tweet the following quote:

"Add tweetable quotes to blog posts without a plugin!"

And I would want that tweet to link to this blog post, include my Twitter handle, and also include the Twitter hashtag (#Twitter). It should ultimately look something like this:

Add tweetable quotes to blog posts without a plugin! https://allfreelancewriting.com/tweetable-quotes/ #Twitter via @AllIndieWriters

To manually add a link that will create this pre-formatted tweet, we'll use something called Web intents. You can think of it in terms of a user's intent when they click the link. In this case, their intent is to create and post a new tweet. (Other options might be to retweet something, favorite a tweet, or follow a user, but creating those links is outside our scope at the moment.)

Creating Your Link

Let's start by reviewing what a standard link looks like in html, using the "Tweet this." anchor text.

[codesnippet pb_margin_bottom="yes" width="1/1" el_position="first last"]

<a href="http://yoursite.com">Tweet this.</a>


What we want to do is swap out the http ://yoursite.com part and instead add your link that opens a pre-populated tweet window. If you're an advanced user and you want to encode your text manually, you can check out the tweet intent parameters from Twitter. For the rest of us, there's an easier solution:

Use a Twitter intent creator (like this one). 

Twitter Intent Creator

  • Visit the page to access the form.
  • Add the tweet text or message you want people to tweet in the "tweet text" field.
  • Enter the URL to the page you want to link to.
  • Add your Twitter handle (without the @) under the "Via" section to encourage follows.
  • Add any hashtags you want to include, separated by a comma (no spaces).
  • Hit the "Generate" button and copy your Twitter Web Intent URL.

Here's an example of a Twitter Web Intent URL based on the example tweet I mentioned earlier:
[codesnippet pb_margin_bottom="yes" width="1/1" el_position="first last"]https://twitter.com/intent/tweet?url=http%3A%2F%2Fallfreelancewriting.com%2Ftweetable-quotes%2F&via=AllIndieWriters&text=Add%20tweetable%20quotes%20to%20blog%20posts%20without%20a%20plugin%21%20&hashtags=Twitter&[/codesnippet]

Don't get caught up in how unruly it looks. Remember, this is just a URL -- just like http ://yoursite.com. And you'll use it in the same way. Here is what my full code would look like then for the Tweet this link I want to add:

[codesnippet pb_margin_bottom="yes" width="1/1" el_position="first last"]

<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fallfreelancewriting.com%2Ftweetable-quotes%2F&via=AllIndieWriters&text=Add%20tweetable%20quotes%20to%20blog%20posts%20without%20a%20plugin%21%20&hashtags=Twitter&" target="_blank">Tweet this.</a>


And here is what readers would see when reading your blog post. Test it out.

Tweet this.

Here is what you should see in a new window when you click it:

Example preformatted tweetable quote

Now that you've created your customized "tweet this" link, you just have to add your quotable text and format it.

Formatting Your Quotable Tweet This Link

If you want to keep things incredibly simple you would just add your quote before your link code. For example, it would look like this:

Add tweetable quotes to blog posts without a plugin! Tweet this.

If you wanted to get a little bit fancier using the blockquote formatting already in your WordPress theme (or other CSS), you could wrap it in those blockquote tags to get something like this:

"Add tweetable quotes to blog posts without a plugin!" Tweet this.

If you have a basic understanding of CSS, you can format things even more.

"Add tweetable quotes to blog posts without a plugin!" Tweet this.

For example, I might combine blockquote formatting and use CSS to float a quote to the right like a traditional pull quote. I can also control the width the quote can take up. In this case, I'm floating a blockquote to the right, giving it a width of 350px:

Using basic CSS you can control anything from the tweetable quote's font size and color to placing it in a box with a colored background to make it pop. You can even add an image like I did at the top of this post.

What about you? Have you ever added tweetable quotes to your blog posts? If so, did you know you could do it manually (and even easier with the online URL generator listed above)? Or do you use a plugin? Do you have other tips on customizing these Twitter sharing links? If so, leave a comment and tell us about it.

Tweetables: Share This Post on Twitter

Have you ever wondered how you can share customized tweets in your blog posts? Tweet this.

Learn how to add tweetable quotes to your blog posts (without a plugin). Tweet this.

Pin It on Pinterest

Share This