How to Add Animated Click-to-Tweet Quotes to Your Squarespace Blog Posts

Want to skyrocket the number of people sharing your amazing content on Twitter? In this tutorial, I’m going to show you step-by-step how to create a boss ass Click-to-Tweet quote you can add to your blog posts. Here’s what it will look like:

Ready? Let’s go.

 Want to take your Squarespace blog to the next level? Learn how to add a banging' animated Click-to-Tweet widget to your blog posts in this step-by-step tutorial. http://bit.ly/animatedctt | Click to Tweet Squarespace | Squarespace Tips | Squarespace Tutorial | Squarespace Blog #Blogging

1. Add animation code.

First, we’re going to need to add some CSS code to your site. It’s super easy. Just copy and paste the code below into your Custom CSS editor. You can find it in the Design menu of your Squarespace site.

/*CLICK-TO-TWEET*/

.blinking {
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

This will allow us to animate the "Tweet This" text in the CTT widget we’re going to create in a few minutes.

The Toolbox

Toolbox

Subscribe to get the complete list of tools I use to run my blog + biz!

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

2. Choose a header tag for your CTT quotes.

We’re going to style our widget by using one of your header tags. It doesn’t matter which one, but it needs to be designated specifically for Click-to-Tweet use. This may pose a challenge because Squarespace only gives you 3 header tags: h1, h2, and h3.

If designating one of these headers solely for Click-to-Tweet use is a problem for you, I highly recommend Squint by 3Rail. Squint is a Squarespace plugin that adds 3 additional header classes to your website. You’ll want the advanced version of the plugin, which costs $50.

3. Style your header tag.

Now, we need to style the header tag you’ve chosen to use for Click-to-Tweet. If you're using h1, h2, or h3, you can do this easily in the Style Editor.

 Squarespace Style Editor - Header Styling

If you're using Squint and you want to style the h4, h5, or h6 tag, you'll need to add more Custom CSS. Here's the code you'll need:

h6 {
    color:#000000;
    font-size:17px;
    border-style:solid;
    padding:15px;
    }
h6 a { 
    text-decoration:none; 
    }

You can customize this code however you want. For example, you can change #000000 to your brand color's hex code. You can also change the font size and padding to whatever value looks best on your blog. 

Altogether, the code should look like this:

/*CLICK-TO-TWEET*/

.blinking {
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

h6 {
    color:#000000;
    font-size:17px;
    border-style:solid;
    padding:15px;
    }
h6 a { 
    text-decoration:none; 
    }

4. Embed your CTT code in your blog post.

Next, we’re going to navigate to the blog post you want to add the Click-to-Tweet quote to and insert a code block where you want it to go. Drop in the following code:

<h6 align="center"><p class="blinking"><a href="YOUR LINK HERE" target="_blank"> >> TWEET THIS << </a></p><p align="center"><a href="YOUR LINK HERE" target="_blank">YOUR TEXT HERE</a></p></h6>

Change the opening and closing h6 tag to whichever header tag you're using.

5. Customize the code with your CTT link.

Now, we need to head over to ClicktoTweet.com. You’ll have to loginto your Twitter account. Then, type in the message you want your readers to tweet and click “Generate New Link.”

 Click-to-Tweet Generator

Scroll down and select the “Basic Embed” tab. Copy your CTT link to your clipboard. DO NOT copy the entire HTML code. The Click-to-Tweet link starts with https://ctt.ec/. I’ve highlighted it in the screencap below.

 Click-to-Tweet Embed Code URL

Head back over to your blog, but don't close out of the Click-to-Tweet website just yet. Replace YOUR LINK HERE in the code with your CTT link.

6. Customize the code with your text.

Toggle back over to the Click-to-Tweet website and copy your text. Paste it in place of YOUR TEXT HERE in the code.

 Click-to-Tweet Quote

Your code should now look something like this:

<h6><p class="blinking" align="center"><a href="https://ctt.ec/sJa7v" target="_blank"> >> TWEET THIS << </a></p><p align="center"><a href="https://ctt.ec/sJa7v" target="_blank">This is my quote.</a></p></h6>

And there you have it!

If you’ve tried this on your blog, I’d love to see the results. Drop me a note in the comments below!

The Toolbox

Toolbox

Subscribe to get the complete list of tools I use to run my blog + biz!

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit