The 30 Day Marketing Boot Camp for Freelance Writers

How to Add Custom Tweetable Quotes to Your Blog Posts (Without a Plugin)

on April 14, 2014 in Blogging

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! #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.

<a href="">Tweet this.</a>

What we want to do is swap out the http :// 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:

Don't get caught up in how unruly it looks. Remember, this is just a URL -- just like http :// 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:

<a href="" 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.

Thanks for sharing!
Tweet about this on TwitterGoogle+Share on FacebookPin on PinterestShare on LinkedIn
Short URL:
The following two tabs change content below.

Jennifer Mattern is a professional blogger, freelance business writer, and indie author. Through her company, 3 Beat Media, she operates All Indie Writers,,, and numerous other blogs.

Jenn has over 15 years experience writing for others, over 11 years experience in blogging, and 9 years experience in indie e-book publishing. She is an Active member of the Horror Writers Association.

Subscribe to the All Indie Writers newsletter to get personal updates from Jenn in your inbox.


  1. Alicia Rades April 14, 2014 Reply

    Very cool. Thanks for sharing! I needed this info, too.

    • Author
      Jennifer Mattern April 14, 2014 Reply

      No problem. I only bothered figuring it out a couple of weeks ago after the tweet plugin discussion at BAFB. I’m a big fan of being able to customize things, so I had to learn eventually. Might as well share. 🙂

  2. Cathy Miller April 14, 2014 Reply

    Oh yay! I do love those but I tend to drag my feet on adding plugins. I am the same way about downloading free software. I figure the more you have, the more likely you will have problems.

    Thanks for providing an alternative, Jenn.

    • Author
      Jennifer Mattern April 14, 2014 Reply

      Everything tech-related poses a risk of problems, right Cathy? 🙂 Hopefully this alleviates one of them for the time being. Of course it has its downsides too. If Twitter were to change how these links are created or what parameters can be used, I could see it being a pain to manually update or remove them all later. That might be a case for using unique link text — something you can simply search old posts for if you ever need to find them all.

  3. Amandah April 15, 2014 Reply

    Thanks Jenn!

    I use TweetThis, but I’m always on the look out for something new. I’m not a big fan of having too many plugins on my website and will try out your suggestion this weekend.

  4. joycollado April 17, 2014 Reply

    I’m so grateful you shared this resource Jennifer. Twitter is not really my area. Your advice on BAFB community was a great help. 🙂

  5. vaghawan ojha April 28, 2014 Reply

    thanks for this article. It would be better if you share how can i use share this quote in facebook also.

  6. Very useful indeed, thank you Jenn!

  7. Chris May 14, 2014 Reply

    Thank you so much for this! This was exactly the kind of thing I was looking for. Most tweet-this plugins I’ve tried, either come with a preformatted CSS that can’t be changed, an uglyass quotebox that also does not go with my themes or just does not include “via” on the tweet.

    Or they simply don’t work .. I tried this solution, and it works like a charm. What is great, is that now I don’t have to use different plugins for different sites, because WITHOUT a plugin,I can style my tweetable quotes, any damn way I please 🙂

    The only issue, is having make sure to count the characters before applying the code-snippet, but then I would say that is a small price to pay for getting the benefit of full customization.

    Oh – and your tutorial was delightfully easy to follow too.

    • Author
      Jennifer Mattern May 15, 2014 Reply

      Thanks for commenting Chris. I’m glad this method is working out for you! 🙂

      It does suck that you can’t get the character count directly. What I’d do is take the intent URL generated for you and simply visit that URL in the browser (because you’re there anyway to use the intent creator). Not only does that give you the character count, but it lets you preview things so you can test for errors. I’m a big tester, so I do that anyway. And it can be done in about 3 seconds, so it shouldn’t add too much to the workload (though I admit it’s not ideal, especially it you want to add several tweetable quotes to a post).

  8. Tim Soulo November 7, 2014 Reply

    Hey Jennifer!

    I didn’t know about “Twitter Intent Creator” before and I think it’s quite neat 🙂

    My guess is that will add those additional fields that they lack right now really soon.

    But for now I think “Twitter Intent Creator” is much more handy than ClickToTweet!

    Thanks a lot for the article, I love discovering new tools 😉

    • Author
      Jennifer Mattern November 7, 2014 Reply

      Yeah, it’s a neat tool. There might be others out there. This was just the one I came across when I was looking for plugin-free options a while back. What I love is that it breaks everything down to give you a simple link, and you can format that link in any way you want — pull quotes, link an image, feature boxes, buttons, etc. It’s nice knowing we can style calls to action in different ways for testing. 🙂

  9. Brittany Witt May 17, 2015 Reply

    Hey Jennifer! I love this post & followed it to a T, unfortunately I’m not seeing any results. I generated my code & posted it to my blog where I wanted it to show but I’m just seeing the code & no “Tweet This.”

    I’m using SquareSpace.

    Thanks so much in advance!
    XO, Brittany

    • Author
      Jennifer Mattern May 18, 2015 Reply

      Hi Brittany,

      Make sure you’re taking the link that’s generated and putting it into an actual link structure with anchor text like the example in the post. If you don’t add the anchor text, you won’t have any text tied to your generated link.

      Also make sure you’re in html / text mode when you paste the code in. If you paste it into your blog’s visual editor screen (the one with all the buttons that look kind of like a word processor – bold, italics, etc.), it’ll show the code.

      I hope that helps!

  10. Bunny White July 20, 2015 Reply

    This is seriously great – thank you sooo much! I also picked up some additional tips just by reading the comments 🙂 Very much appreciated <3

  11. Yvonne I. Wilson July 24, 2015 Reply


    I was so happy when I went to research how to do this I came across this article fro you. Unfortunately like Brittany Witt I followed this to the T and I have not seen the results. Yes I generated the code and added the anchor text at the opening and ending like you instructed and placed it where I wanted it in the post and all it came out as was the link and no “Tweet this”

    I use and my blog is not self hosted

    • Author
      Jennifer Mattern July 26, 2015 Reply

      Did you remember to paste it in the text editor rather than the visual editor?

      Save the code you have in a .txt file (in Notepad or a similar program) and email it to me at I’ll take a look and see if I can figure out where the problem is for you. 🙂

Add comment

By using this comment form you agree to the site's Comment Policies.

Leave a Reply

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