How to Easily Make Tweetable Quotes

0001-28530130Why make Tweetable quotes?

  • People are more likely to tweet your post from a quote.
  • Some readers will tweet one post as many times as you have tweetable quotes in it!
  • You can include a hashtag and/or direct your post to a person on Twitter. These don’t show up in your post, but form part of the tweet.

Which Blogs will these instructions work for?

The simple-to-follow instructions in this post will work for self-hosted WordPress blogs (WordPress.org) and for Blogger blogs. If you are on the free version of WordPress (.com)  sometimes they work but more often they don’t. After  a lot of investigation I’ve learned this is because WordPress.com does not allow Javascript code in posts, so it deletes the word “script” when saving a post – and this breaks the code. I have tried several workarounds, but as yet have not been able to get anything to work consistently. (I will keep trying!)

How to make tweetable quotes

Create a block quote in a line of its own, as in the example below. 

How to easily create Tweetable quotes.

Tip: Keep your quote short. Twitter automatically reduces links to 20 characters, leaving 120 for your quote, a hashtag and your Twitter handle.

Absolute beginners tip: to create a block quote, select your text and click on the quote button. (In the screen shots below, you will see where the quote button is in WordPress and Blogger visual editors.)

quotewp&blogger

Copy your quote.

Now click on this link. (It will open in a new tab, so you can still follow these instructions.)

You will see this:

twitter buttons

Notice that at the bottom, it says, “Or browse your options below. That’s what we are going to do! Scroll down until you see this:

Screen Shot 2016-08-31 at 15.38.18

 

Now click on the option on the right – Twitter Buttons.

That takes you to:

Screen Shot 2016-08-31 at 15.41.46

This time, click on the first option, “Share Button.” You will see this:

Screen Shot 2016-08-31 at 14.58.22 Click on “set customization options.”

You should now see the page shown in the screenshot below.

Twitter resource buttons

 

Paste your quote into the first box (where it says,”Do you want to prefill the Tweet text?”)

Add your username in the next box.

Add a hashtag.

If you want to include another person in your tweet, then insert their Twitter user name in the box marked: “Do you want to recommend accounts.” This would be useful for guest posts, interviews, book reviews, or any other time when you want to recommend another person on Twitter.

(If you click: “Large button” it will show up as a large button on your blog post. I don’t generally use this option, but have included an example later in this post so you can see what it looks like.)

Click the blue “Update” button (in the bottom right.) Clicking this brings you to the same page that we started with, but this time you will see your quote in the dialogue box along with some code. (You can see this in the screenshot below.)

tweet quote

 

 

Click the blue button – Copy Code – which is to the right of the dialogue box. This automatically copies your code and you will see this message:

 

copy code twitter

 

Back in your blog editor, switch from Visual mode (WordPress) or Compose mode (Blogger) to Text or HTML mode.

Scroll down till you find your quote. It will look something like the screenshot below, with <blockquote> before it and </blockquote> after it.

Block quote HTML Now it’s time to paste the code you copied from Twitter.

  • If you would like the Tweet button to show up on the same line as your quote, position your cursor between the . and  </blockquote>

Screen Shot 2015-06-16 at 18.16.21

  • If you would like the Tweet button on a separate line, position your cursor just after </blockquote>

tweetquote In the first of these examples, I have used the large Tweet button, the second is the usual size.

Test your tweet to make sure it has no more than 140 characters. If it does, you can edit it without going back to Twitter. You will need to make any changes to your quote twice – in the original quote and in the code you pasted in from Twitter. In the screenshot below I have underlined the quote in red to show where it appears twice.

quote

That’s it! You now know how to make Tweetable quotes.

If you found this post useful, please share it, using one (or more) of these easy-to-share Tweetable quotes!

How to easily create Tweetable quotes.

The easiest way to make Tweetable quotes.

Comments

    1. Author

      You could, and some people aren’t keen on plug-ins and suggest we limit the ones we use to essentials so it’s good to have an alternative. And Blogger doesn’t do plug-ins as far as I’m aware.

I love getting comments and reply to every one. Tell the world (and me) what you think!