How to add “Click to Tweet” link within posts to encourage social sharing

Today’s post will show you how to add Click to Tweet boxes in your posts on both Blogger and WordPress. You can add these Tweet boxes throughout your posts allowing readers to click and easily share pre-written content that links back to your blog. It’s an effective way to increase engagement and get more shares on Twitter.

Adding a Click to Tweet call to action encourages your readers to share specific content and sections of your blog post. Don’t forget that social shares have an SEO impact too! You could use it for giveaways, quotes, stats or extra tips and link back to your post.

Embedding Click to Tweet links in your content is a great way to encourage sharing on Twitter

Add “Click to Tweet” to your blog posts

There are a number of ways to add this feature to your blog, so I’m going to share some examples of how you can tweak the code to display the text link differently.

Firstly, here is the base code to start with. You can add this to your blog post, change the message and customise the code to suit how you want the link to appear on your blog.

<a href="http://twitter.com/home/?status=Add your message here via @username" target="_blank" >Tweet: Add your message here via @username. </a>

How do you customise the code to change how the text will appear? Well it’s a simple HTML tag so there’s lot of ways to change it. Here are some quick examples taken from my HTML basics series and we’ll get into customising it further with CSS later in the tutorial.

First Example: we’ve added the message before the link and used the action as the anchor text instead.

Add your message here [<a href="http://twitter.com/home/?status=Add your message here via @username" target="_blank" >Tweet This</a>]

which will result in the following very simple text link, using the colour you’ve set for links

Add your message here [Tweet This]

Second Example: we’ve added a graphic as the anchor text

<a href="http://twitter.com/home/?status=Add your message here via @username" target="_blank" > <img src="DIRECT IMG URL" alt="Description" > </a>

which will result in the following, showing whatever graphic you’ve created

Third Example: we’ve added a class so that we can change the link to look like a button which you could further customise to include a Twitter icon.

<a href="http://twitter.com/home/?status=Add your message here via @username" class="blackbtn" target="_blank" >Tweet: Add your message here </a>

which will result in the following that can be customised to match your blog design.

Tweet: Add your message here

Don’t want to manually write the message? Head over to Click to Tweet. You can add the message you want Tweeted, click Generate New Link and then paste the embed code into your blog post instead. From there you can tweak it as shown above.

If you’re on WordPress and prefer to use a plugin, there’s a number of them available. Just search for “Click To Tweet” within the plugin menu. Remember to choose one that is updated regularly and supports your version of WordPress.

So now that we have the Click to Tweet link embedded, we can move onto styling the Tweet link.

Customize the style of Click to Tweet links

You can use CSS to change the style of the Tweet Link so that it fits better with your design and stands out within the post. Again, there’s so many ways you can do this so I’m going to run through an example showing how to customise the colours and fonts and how to add an icon.

First thing we’re going to do is give the link a class so that we can target it in the CSS. We do this by adding the attribute class="tweet-link" within the tag.

<a href="http://twitter.com/home/?status=Add your message here via @username" target="_blank" class="tweet-link" >Add your message here via @username. </a>

Now in the CSS we can use .tweet-link to apply styling. If you’re using WordPress you’ll be adding the CSS to your style.css file. On Blogger you’ll be adding it to your CSS Section which is before ]] </b:skin>.

We’ll start by giving it a background colour, padding for space and displaying it as a block element. We’ll also add a background colour change on hover.

/* START XOMISSE - Customise Tweet Link */
.tweet-link {
background: #baeeff;
padding:20px;
display: block;
}

.tweet-link:hover {
background: #e2f8ff;
}
/* END XOMISSE - Customise Tweet Link */

I’m learning how to customise a Click To Tweet link https://xomisse.com/blog/add-click-to-tweet-link/ via @xomisse.

Next we’ll customise the text itself by changing the font family, font weight and font size. We’ll also add spacing between the letters and change the text to uppercase.

/* START XOMISSE - Customise Tweet Link Text */
.tweet-link {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
letter-spacing: 5px;
text-transform: uppercase;
}
/* END XOMISSE - Customise Tweet Link Text */

I’m learning how to customise a Click To Tweet link https://xomisse.com/blog/add-click-to-tweet-link/ via @xomisse.

Finally we’ll add a Tweet bird before the text using Font Awesome. If you don’t have Font Awesome installed in your theme already you’ll need to do that before continuing, head over to Font Awesome, enter your email address and copy the embed code that is sent to you. Add this code above </head> in your template.

Then add the following CSS

/* START XOMISSE - Add Twitter Icon */
.tweet-link:before {
content: '\f099';
font-family: FontAwesome;
font-size: 20px;
line-height: 20px;
margin-right: 10px;
vertical-align: middle;
}
/* END XOMISSE - Customise Tweet Link */

I’ve learned how to add and customise a Click To Tweet link

Done! Now just add that class to each Tweet link within your posts and they’ll all be styled the same. You could have different variations too if you wanted, using different classes.