You’ve written another amazing blog post, and you’ve heard it’s nice to have a ‘Tweet This’ quote in it.
This way you can ask your visitors to take a further step. A call-to-action (CTA) asks them to share your content, which is good for your credibility and SEO.
You both (the author and the visitor sharing valuable content) can benefit from it.
If you are a WordPress user, you have an easy way: install a tweet-this plugin.
But what can you do if you have a Squarespace blog?
In this post, you can read about three ways to insert a ‘Tweet This’ quote on your Squarespace website.
Step #1: Creating your quote
To have your quote tweeted you need something that stands out in your stellar blog post (a post being stellar in itself is not enough).
Your quote should be a great sentence, catchy and saying something wise. You can try inserting the title of your blog post if you crafted it well, but sometimes you’ll need more.
You also should have a clear CTA next to it (Tweet This) and it should be tweetable with one click (don’t make your visitors think and figure out how to do the tweeting because they won’t often spend time doing it).
I created a separate quote for my Three Types of FREE – How to Use Free Material to Elevate Your Brand & Sell More post:
When offering free knowledge, free downloads, free inspiration, you establish your credibility.
And this is how it got tweeted:
— Tates (@taylor_trax) April 18, 2016
Step #2: Creating your code
If you have your brilliant quote, let’s create the tweet-this box that makes it stand out from the rest of your text in the post.
You’ll need the URL of the blog post for that. To get this, click on the Settings button when editing your blog post:
Then click on the Options tab and highlight your post URL and copy it:
You’ll need to add your main domain in front of it, so for the above link, the whole URL for me would look like this: https://kreanilledesign.com/blog/3-ways-tweet-this-quote-on-squarespace
Now let’s shorten that URL as it would be too long for Twitter. Use a link shortener service for that, for example, bit.ly, goo.gl or Buffer. I usually go to bit.ly for that.
Paste the URL in the textbox (highlighted in pink) and copy the bitlink you get:
Now, that you have your quote and your short link, let’s create the Tweet This code! I’ll show you three ways for that.
1. ClicktoTweet (free/paid service)
Click To Tweet offers you a free service for 5 tweets (unfortunately, they changed their policy a while ago, before that you could create unlimited free tweet-this codes).
You can login to their site using your Twitter account:
Copy your quote and short URL to create the message you want your visitors to tweet. The 140 character rule applies here too. I like to add my profile link (via @banannamari) to get notified when somebody tweets my message, and you can also add some hashtags (though your visitors can change these).
Then click on the Generate New Link button.
You’ll get a new URL (highlighted in pink) – copy that:
You can also use the embed code if you wish, but I’ll go for something different for my own blog – the embed code from ClicktoTweet would look like this and I’d like something that really stands out:
Another service similar to ClicktoTweet is Spredd.it, as far as I know, it’s free.
Here you can create your message similarly to ClicktoTweet. Click on the Generate button to get your URL. It will be shown in the browser URL bar or you can just click the Copy button to get it.
3. Creating your own URL
If you don’t want to use 3rd party services and like to play with codes, you can create your own.
First, you need to turn your message into an encoded link. I used this free encoding service for that. It’s not complicated, you just hit a button and that’s all.
This is what I got:
Looks a bit ugly, but Twitter needs that. 🙂
Then, insert this gibberish into the Twitter developer URL replacing the Hello World part:
So it would look like this:
And this is the URL we need.
Step #3: Inserting the code in your Squarespace blog post
1. Use only the URL
If you don’t like playing with code, you can insert the URL in a simple way, the same as you link to your own or others’ blog posts like this:
A step-by-step guide on how to have a Tweet This box on Squarespace (Tweet this)
I don’t like this solution as it doesn’t stand out, so let’s do it in a different way.
2. Use an image
If you want something prettier, you can create an image using an image editor (Photoshop, Pixlr, Canva etc.) and upload it to your post and link to it. Make sure you create something that matches your brand.
This is the result:
3. Create a box with some coding
I’ll go with this solution.
Insert a code box into your blog post:
This is the code I’ll use for this post. (Remember the URLs we created before? I pasted the one I got from ClicktoTweet into the code below, but I could go with the other two as well.)
The div with the 5px border creates a handsome box around my quote:
<div style="border: 5px solid #79bbc4; margin: 0 auto 20px; padding: 20px;"> <i style="font-size: 20px;">A step-by-step guide on how to have a Tweet This box on Squarespace</i> <p style="text-align: right; text-decoration: underline; line-height: 0;"> <a href="http://ctt.ec/af1JX">Tweet this</a></p> </div>
The code will look like this:
You can also wrap the opening <a> and closing </a> tag around the div and then the whole box becomes clickable:
<a href="http://ctt.ec/af1JX"><div style="border: 5px solid #79bbc4; margin: 0 auto 20px; padding: 20px;"> <i style="font-size: 20px;">A step-by-step guide on how to have a Tweet This box on Squarespace</i> <p style="text-align: right; text-decoration: underline; line-height: 0;">Tweet this</p> </div></a>
By further tweaking this code, you can have a box without a border but with full background color if you like:
<a href="http://ctt.ec/af1JX"><div style="background-color: #79bbc4; color:#fff; margin: 0 auto 20px; padding: 30px;"> <i style="font-size: 20px;">A step-by-step guide on how to have a Tweet This box on Squarespace</i> <p style="text-align: right; text-decoration: underline; line-height: 0;">Tweet this</p> </div></a>
A step-by-step guide on how to have a Tweet This box on Squarespace
Phew! This post became quite long, but don’t worry, doing it is easier and takes shorter time than writing or reading about it.
Will you tweet it if you like it? 🙂
Have fun creating Tweet this boxes on Squarespace!