Hire freelance writers

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

By 
on April 14, 2014 in Social Media for Bloggers
13
0

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! http://allindiewriters.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.

<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:

https://twitter.com/intent/tweet?url=http%3A%2F%2Fallindiewriters.com%2Ftweetable-quotes%2F&via=AllIndieWriters&text=Add%20tweetable%20quotes%20to%20blog%20posts%20without%20a%20plugin%21%20&hashtags=Twitter&

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:

<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fallindiewriters.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.

Like this? Please share.
Tweet about this on TwitterGoogle+Share on FacebookPin on PinterestShare on LinkedInBuffer this pageShare on RedditShare on StumbleUponEmail to someone
Short URL: http://3bm.co/1nmcexq
The following two tabs change content below.

Jennifer Mattern is a professional blogger, freelance business writer, and indie author. She began writing for clients in 1999 and started her first blog in 2004.

She owns 3 Beat Media - a publishing and client services company which operates All Indie Writers as well as several other websites and blogs including The Busy Author's Guide and BizAmmo. Jenn comes from a background in online PR and social media consulting, having owned a small PR firm for several years before choosing to pursue a full-time writing and publishing career.

Jenn also writes fiction under multiple pen names in the areas of children's fiction, mysteries, and horror fiction. Jenn is an active member of the Horror Writers Association (HWA) and currently serves as the organization's Assistant Coordinator of Promotions and Social Media.

13 Comments

  1. Alicia Rades April 14, 2014 Reply

    Very cool. Thanks for sharing! I needed this info, too.
    Alicia Rades recently posted…5 Ways You and Your Freelance Blogger Can Build a Rock Solid RelationshipMy Profile

    • 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.
    Cathy Miller recently posted…Social Media Pill-Popping MentalityMy Profile

    • 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.
    Amandah recently posted…How to Choose the Right Social Media Network without Pulling Your Hair OutMy Profile

  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.
    Chris recently posted…Take charge – it’s empowering.My Profile

    • 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).

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 *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *

CommentLuv badge