Pre-Set Tweets (aka "Click to Tweet")
One of the easiest ways for your readers to share your content is using preset tweets like this one:
Adding "click to tweet" quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them! https://bit.ly/3glZE2jClick to Tweet
When your reader clicks this link, Twitter will automatically load in a new window (with their account open if they're already logged in, prompting them to log in if they aren't) and a new tweet already composed with your preset message.
This is a fantastic feature because it takes all the effort, guesswork, and (really) thought out of sharing snippets from your blog. It's also a great way to prevent the "wall of text" and visually break up an otherwise monotonous-looking section.
Step 1: Create a shortened link to your blog post using Bit.ly.
This takes a long URL (like https://scarytechforbloggers.com/blogs/free-blogging-tools-to-take-your-posts-to-the-next-level) and gives it a shorter link (like https://bit.ly/3glZE2j) that will take the user to the exact same place when clicked.
Step 2: Create a link to your pre-set tweet using Click to Tweet.
You'll have to log in using your Twitter account, but then you can input your tweet text (aka what you want the tweet to say) including the shortened link to your blog (see step #1) in the text box and hit "Generate Basic Link" to get a single URL (e.g. https://ctt.ac/8r054).
Step 3: Create an "example" tweet in the correct location of your blog post.
The link you generate in Step #2 won't actually show the tweet on your post; it will just take the user to Twitter. You want them to be able to see what they're going to be tweeting in your post. Put the same text you used in Step #2 in your blog, with a link to the Click to Tweet URL you generated. The most basic way to do this will look something like this (in HTML):
<p>Adding "click to tweet" quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them! Click <a href="https://ctt.ac/8r054">here</a> to Tweet this important message.</p>
Step 4: Style Your Tweet (like a Tweet).
What you did in Step #3 will give you all the functionality, but it will still look like a basic paragraph of text. To style your tweets to actually look like tweets will involve a little bit of HTML/CSS magic. Here's what the HTML for the little speech bubble you see above looks like in HTML:
<p>Adding "click to tweet" quotes in your blogs makes it easier for your readers to share your content! Check out this step-by-step guide on how to use them!</p>
<a href="https://ctt.ac/8r054">Click to Tweet</a>
If you want to see how the CSS makes it look all fancy (i.e. gives it a speech bubble shape, adds the Twitter logo, etc.) you can check out this interactive HTML/CSS example where you can play around and see how it works 'under the hood', so to speak. (If this makes your eyes gloss over, you can check out our HTML basics guide for a quick tutorial).
YouTube and Videos
Scary Tech for Bloggers | Blogging since 2003
Liz is the founder of Scary Tech for Bloggers and runs a total of seven blogs (as of right now). She works as a digital consultant for startups and small businesses and has her PhD in business psychology, but inside she's still that nerdy little girl that thinks coding is reeeeeeeally fun.
Take the Next Step
New to HTML? Print this out and stick it on your desk. You'll never get confused mid-blog again.