Add a Click to Tweet to your Squarespace post

There are many ways for you to create a click to tweet for your blog posts, and today I'm going to show you one easy and fun way to do it in Squarespace!

I'll be showing you the basic structure you can use and three different ways to style them.

You'll be able to change the text color, background color, icon, and add any other brand detail or information you'd like to have.

Because CSS is cool like that.

 

Let's get started!

 

Here's the full code:

HTML

<a href="https://ctt.ec/6C75q" class="clicktweet">
  <p>
    "This is the test message I'm going to use to create my awesome click to tweet!"
  </p>
  <p class="tweetlogo">
    <i class="fab fa-twitter"></i> CLICK TO TWEET
  </p>
</a>

 

CSS

.tweetlogo {
  font-size: 0.7em;
  text-align: right;
}

.clicktweet {
  display: block;
  background: lightblue;
  padding: 30px;
  color: #1084B4;
  font-family: oswald;
  font-size: 1.2em;
  border: 2px solid #1084B4;
  transition: background 0.5s;
}
.clicktweet:hover {
  background: white;
}

 

tutorial

(Don't have time to read through the post? Then watch the video and/or read the important notes at the end)

 

 

Creating a click to tweet link

I believe there's more than one way to create tweetable quotes but in this tutorial I'm going to be using the online tool called Click to Tweet. It's completely free and you don't even have to sign up if you're not planning on keeping track of the stats.

So, to begin, head over to clicktotweet.com and click at the top on Basic Link.

 Creating a click to tweet to add to Squarespace

 

Then, write down your quote, uncheck the little box below the field and click on Generate New Link.

 Creating a tweetable quote to add to Squarespace

 

That's it! Now simply copy the link they give you and we can head over to Squarespace!

 Basic link created for a click to tweet in Squarespace

 

Adding a click to tweet to your Squarespace post

Once you're inside your blog post, go ahead and add a Code Block where you want to insert your link.

 Adding a code block to a blog post in Squarespace

 

Now, we're going to add some <a> tags to create an a element, i.e. a hyperlink.

The HTML structure for this is pretty simple:

<a href="yourlinkgoeshere"> Your text goes here </a>

All we need to do is substitute the information for ours and give our link a class attribute so we can style it with CSS. I'll call mine clicktweet

<a href="https://ctt.ec/6C75q" class="clicktweet"> TWEET THIS! </a>
 Adding a link with the code block in Squarespace

 

And that's it, you already have a working tweetable quote!

Now, let's style this link a little bit, shall we?

 

Creating a branded click to tweet quote

For all style options, in our Custom CSS window we'll be targeting our click to tweet through the class selector like so:

.clicktweet {

}

You can choose to simply style the link a little bit, turn it into a button, or make it a larger click to tweet box.

 

Option #1: Styled link

Let's begin by going back into our code block and switching the current text for the actual tweetable quote:

<a href="https://ctt.ec/6C75q" class="clicktweet"> "This is the test message I'm going to use to create my awesome click to tweet!" </a>

Perfect, now how about we add the Twitter icon too?

To do this, I'll be using the new version of Font Awesome which is extremely simple to set up.

Head over to fontawesome.com, click in Get Started and copy the script into Squarespace by going into Settings > Advanced > Code Injection.

That's all there is to it, now you can look for the Twitter icon with me in the Icons tab!

Once you've found it, click on it, copy the code right below it and head back to your blog page.

 Using Font Awesome's Twitter icon for a Click to Tweet box in Squarespace

 

In the code block we're using, add the icon's code right before your tweetable quote like this:

<a href="https://ctt.ec/6C75q" class="clicktweet"> <i class="fab fa-twitter"></i> "This is the test message I'm going to use to create my awesome click to tweet!" </a>

And now in the Custom CSS window we can add some styles, how about a light blue color for the text and a line to make it clear it's a link?

.clicktweet {
  color: lightblue;
  text-decoration: underline;
}
 Making a click to tweet link in a Squarespace post

 

There you go! The easiest way to style your click to tweet.

 

Option #2: Button style

If you want something a bit more eye-catching, why not make the click to tweet look like a button?

I'm going to switch the text back to TWEET THIS in my HTML:

<a href="https://ctt.ec/6C75q" class="clicktweet"> <i class="fab fa-twitter"></i> TWEET THIS! </a>

And now in the Custom CSS window we can add some styles to make it look like a button:

.clicktweet {
 color: #1084B4;
 background: lightblue;
 padding: 10px 20px;
}
 Adding a background color to the tweet this link in a blog post

 

Now, what if you want it to span across the entire width of the content?

In that case you need to set it to display block so the container takes the full width of its parent container:

.clicktweet {
  color: #1084B4;
  background: lightblue;
  padding: 10px 20px;
  display: block;
}
 Making the click to tweet quote the same width as the blog post content

 

You can also center the text with text-align:

.clicktweet {
  color: #1084B4;
  background: lightblue;
  padding: 20px;
  display: block;
  text-align: center;
}
 Centering click to tweet quote inside blog post content

 

Beautiful!

Keeping these same styles, you could go back to your HTML code and switch the current text for the actual tweetable quote.

<a href="https://ctt.ec/6C75q" class="clicktweet"> <i class="fab fa-twitter"></i> "This is the test message I'm going to use to create my awesome click to tweet!" </a>
 Creating a clickable tweet quote in Squarespace

 

Option #3: Tweetable quote box

Taking it one step further, you can create a larger click to tweet box that screams "look at me".

For this, we can change up the HTML structure a little bit so instead of having everything in one line, we have the tweetable quote with a call to action.

Basically what we're doing is making the <a> tag wrap all the content inside our quote box so everything is clickable inside it.

<a href="https://ctt.ec/6C75q" class="clicktweet">
  
</a>

Then, we set our actual quote inside <p> tags

<a href="https://ctt.ec/6C75q" class="clicktweet">
  <p>
    "This is the test message I'm going to use to create my awesome click to tweet!"
  </p>
</a>

And add a second p element to contain our call to action, which includes our Font Awesome icon and some text

<a href="https://ctt.ec/6C75q" class="clicktweet">
  <p>
    "This is the test message I'm going to use to create my awesome click to tweet!"
  </p>
  <p>
    <i class="fab fa-twitter"></i> CLICK TO TWEET
  </p>
</a>

Lastly, I'm going to give that call to action a class name, tweelogo, so I can add specific styles to it that don't affect the tweetable quote

<a href="https://ctt.ec/6C75q" class="clicktweet">
  <p>
    "This is the test message I'm going to use to create my awesome click to tweet!"
  </p>
  <p class="tweetlogo">
    <i class="fab fa-twitter"></i> CLICK TO TWEET
  </p>
</a>
 Creating a tweetable quote box in Squarespace

Perfect, we're good to go!

 

Now, in our Custom CSS window let's add some background color to our box by setting it to display block and giving it a light blue color

.clicktweet {
  display: block;
  background: lightblue;
}
 Adding a background to a Click to Twwt

Let's also add some padding to separate the content from the inner edges and change the text color, font size and family

.clicktweet {
  display: block;
  background: lightblue;
  padding: 30px;
  color: #1084B4;
  font-family: oswald;
  font-size: 1.2em;
}
 Changing the font of a tweetable quote in Squarespace

 

Nice! Now, remember we gave our call to action a class of tweetlogo? Well, we'll be using that class selector to make some changes to it.

I'm going to make the text smaller and align it to the right

.tweetlogo {
  font-size: 0.7em;
  text-align: right;
}
 Styling a tweet this block in Squarespace

 

Alright, we're pretty much set!

However you can add a few more details to it, for example a border to the box and a nice smooth hover mode so it changes color on mouseover!

.clicktweet {
  display: block;
  background: lightblue;
  padding: 30px;
  color: #1084B4;
  font-family: oswald;
  font-size: 1.2em;
  border: 2px solid #1084B4;
  transition: background 0.5s;
}
.clicktweet:hover {
  background: white;
}
 Changing background color of a click to tweet on mouseover
 Showing the background changing color in a Click to Tweet quote in Squarespace

 

And there you have it!

These are just a couple of ways you can add and style Click to Tweet boxes in Squarespace.


To keep in mind

  • If you're using the new Font Awesome version and your icon isn't showing up, make sure you have it set up in your site's header!
     
  • If you're giving your click to tweet box a different class name, make sure to change the selector in your CSS as well.
     
  • If you want your Click to Tweet to open in a new window, you can add target="_blank" to your opening <a> tag, like so:
<a href="https://ctt.ec/6C75q" class="clicktweet" target="_blank">

 

Until next time,

B.


FOLLOW ME FOR MORE!