3 Ways to Have a 'Tweet This' Quote on Your Squarespace Website

You've written another amazing blog post, and you've heard it's nice to have a 'Tweet This' quote in it.

Why?

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.

3 Ways to Have 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.

Tweet this

And this is how it got tweeted:

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:

How to get your blog post url in Squarespace for a Tweet This quote

Then click on the Options tab and highlight your post URL and copy it:

Tweet This quote on Squarespace: how to get your post URL

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

Bit.ly url shortener for your Tweet This code

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:

ClicktoTweet website

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.

How to create a Tweet This message with ClicktoTweet

You'll get a new URL (highlighted in pink) - copy that:

Tweet This quote with ClicktoTweet on a Squarespace blog

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:

2. Spredd.it

Another service similar to ClicktoTweet is Spredd.it, as far as I know, it's free.

spredd.it to create click to tweet quotes

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.

Tweet This quote on Squarespace with Spredd.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:

A%20step-by-step%20guide%20on%20how%20to%20have%20a%20Tweet%20This%20box%20on%20Squarespace%20http%3A%2F%2Fbit.ly%2F1T7dAKo%20via%20%40banannamari%20%23squarespace%20%23blogging

Looks a bit ugly, but Twitter needs that. :)

Then, insert this gibberish into the Twitter developer URL replacing the Hello World part:

https://twitter.com/intent/tweet?text=Hello%20world

So it would look like this:

https://twitter.com/intent/tweet?text=A%20step-by-step%20guide%20on%20how%20to%20have%20a%20Tweet%20This%20box%20on%20Squarespace%20http%3A%2F%2Fbit.ly%2F1T7dAKo%20via%20%40banannamari%20%23squarespace%20%23blogging

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.

Adding a link to an image in Squarespace

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:

Inserting code into Squarespace

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

A step-by-step guide on how to have a Tweet This box on Squarespace

Tweet 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; 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; 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>

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!

xoxo,

Annamari