The DIY tweet: A guerrilla web designer’s guide to tweeting your quotes from your Squarespace website or anywhere else

Collage by Tug Wells

Collage by Tug Wells

One of the trickiest parts of growing an audience for your services, mission or brand is simply building awareness for what you’re doing. Creating shareable content, like articles, about things you’re passionate about is a huge step in the right direction. But you've still got to share it.

Snappy teasers with links to your articles via social media channels is what most of us do to draw an audience. Quirky visuals and headers that stop readers dead in their tracks are always good for some clicks too, if you have a designer or copywriter on your team. 

But if you want to give new readers something more meaty than a headline—and a better idea of what they can expect to read once they click on your article—you should try making a DIY tweet button for your pull quotes.

Tweet buttons let readers share your best content with the world by themselves, and they don’t require a designer or copywriter to set up.

Like them apples?

Here’s how to make one—from simple HTML and artwork (which we’ll give you a link to) straight to Twitter—in 7 pretty easy steps. 


This is what a pull quote looks like. It takes a shareworthy chunk of text and extracts it from the body of your article so it stands out. There are many ways to design pull quotes. We designed this one on Adobe Illustrator.

This is what a pull quote looks like. It takes a shareworthy chunk of text and extracts it from the body of your article so it stands out. There are many ways to design pull quotes. We designed this one on Adobe Illustrator.

Step 1: Choose a pull quote from your article

Good writing is memorable. That doesn’t mean you need to fill every paragraph with a tweetable gem, like Liberace’s evil blog writing twin. But you should always aim at putting down words that count. Words, as we say on this very website (ahem), that are meant to be read, not skimmed and forgotten. Writing between one to three stand-out nuggets per 750-word article should work for most of us. These are your pull quotes.

Here’s a nice one from Twitter founder and CEO, Jack Dorsey.

The idea of Twitter started with me working in dispatch since I was 15 years old, where taxi cabs or firetrucks would broadcast where they were and what they were doing.
— JACK DORSEY

Adapted from  Arne Ratermanis . This illustration cleverly shows the difference between a crisp, non-pixel-based vector graphic, which you can blow up to infinity without losing crispness, and a pixel-based raster graphic, which holds form at about the size you build it. For icons, always design vectors and save about 4 times bigger than you need as pngs.

Adapted from Arne Ratermanis. This illustration cleverly shows the difference between a crisp, non-pixel-based vector graphic, which you can blow up to infinity without losing crispness, and a pixel-based raster graphic, which holds form at about the size you build it. For icons, always design vectors and save about 4 times bigger than you need as pngs.

Step 2: Design your tweet button (or use ours)

If you work on Adobe Illustrator, creating your own tweet button, or icon, is fun. If you need ideas, check out the Noun Project.

Once you make your vector icon, save it with an .ai extension and then open it back up in Photoshop.

In Photoshop, you’ll need to save your vector as a pixel-based png, so websites can read it. Save it at 800x800px, because shrinking down is way better than enlarging in terms of avoiding fuzziness and pixelation.

If you want to use ours, just click on one of the graphics below. If you’re not sure how to customize your icon’s color, just get in touch and we can help you out.

Download the png icon!

Download the ai icon!


Step 3: Insert your tweet button onto your webpage underneath your pull quote

The idea of Twitter started with me working in dispatch since I was 15 years old, where taxi cabs or firetrucks would broadcast where they were and what they were doing.
— JACK DORSEY
A little HTML: You can use this code block (grab it below) to insert any images you want into your web layouts. It gives you more control over image size, margins, alignment, etc. The highlighted url shows where our icon image file lives in the cloud. If you’re using our graphic, you don’t need to change anything. If you’re customizing yours or creating a different icon, you’ll need to replace that url with your own.

A little HTML: You can use this code block (grab it below) to insert any images you want into your web layouts. It gives you more control over image size, margins, alignment, etc. The highlighted url shows where our icon image file lives in the cloud. If you’re using our graphic, you don’t need to change anything. If you’re customizing yours or creating a different icon, you’ll need to replace that url with your own.

This may look complicated. If it does, don’t look at it. Just copy the code below and dump it into a markdown or code block directly beneath your pull quote (on Squarespace). 

If you’re using another website builder, this is HTML. It goes wherever you add code to your pages.

Just remember to replace the img src attribute (highlighted in blue above) with your own file if you have your own icon or are customizing ours.

Here’s the code:

<div style="width: 100%; text-align:center; margin-top:-30px; margin-bottom:30px"><a><img src="https://static1.squarespace.com/static/575d4fa140261d88043e649c/t/5d30cc0356e46e0001755084/1563479043352/Twitter+Drop.png/?format=100w" style="width: 40px;"></a></div>

--> HTML TIP

Adjust the size of the icon by tweaking the width. Ours is set to 40px. Increase the white space on the top or bottom of your button by adjusting the top and bottom margins. Ours are set to 30px. Adjust the alignment by tweaking text-align (left, center, right.) Ours is set to center.

And now that we’ve made it halfway there, set that code aside for a minute.


Step 4: Shrink your url

On Twitter, you don’t have much space, and you want to give as much of it as you can to your words. Tiny url works here. You put a big, sloppy url in and a shiny, tiny url comes out. Copy your new tiny url and save it for the next step.

Before (our original url)

After (our tiny url)


Step 5: Convert your quote into Twitterese

The last step in setting up your tweetable quote is to put it into a language Twitter can understand, which is pretty much gibberish to us.

First, go here to convert your pretty words into gibberish that Twitter can read.

Don’t forget to add your tiny url from Step 4 (so readers can link to your article), your Twitter handle (so readers can find you), and hashtags (so you can be cool like the rest of us).

What our quote looks like going in (not gibberish)

"The idea of Twitter started with me working in dispatch since I was 15 years old, where taxi cabs or firetrucks would broadcast where they were and what they were doing." https://tinyurl.com/y6agj2dn @storylinecy #GreatIdeas

What it looks like coming out (total gibberish)

%22The%20idea%20of%20Twitter%20started%20with%20me%20working%20in%20dispatch%20since%20I%20was%2015%20years%20old%2C%20where%20taxi%20cabs%20or%20firetrucks%20would%20broadcast%20where%20they%20were%20and%20what%20they%20were%20doing.%22%20%20https%3A%2F%2Ftinyurl.com%2Fy6agj2dn%20%40storylinecy%20%23GreatIdeas

Next, add the gibberish to the end of the url below. It’s basically telling your browser that this is a quote that a reader wants to share via Twitter.

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

Just remember to cut out the “Hello%20world” and replace it with your gibberish.

The full url that we’re going to add to our tweet button will look like this:

https://twitter.com/intent/tweet?text=%22The%20idea%20of%20Twitter%20started%20with%20me%20working%20in%20dispatch%20since%20I%20was%2015%20years%20old%2C%20where%20taxi%20cabs%20or%20firetrucks%20would%20broadcast%20where%20they%20were%20and%20what%20they%20were%20doing.%22%20%20https%3A%2F%2Ftinyurl.com%2Fy6agj2dn%20%40storylinecy%20%23GreatIdeas

Your full markdown code. The destination url that lets readers click and retweet is the humungous chunk of gibberish highlighted in blue between the quotes. You need to add yours in the exact same place. Your browser will take care of the rest.

Your full markdown code. The destination url that lets readers click and retweet is the humungous chunk of gibberish highlighted in blue between the quotes. You need to add yours in the exact same place. Your browser will take care of the rest.

Step 6: Add your url back into your HTML markdown or code block (from Step 3)

Remember the HTML code block we built in Step 5? You’re going to drop the full url there as an href attribute (see above), so that when readers click on your tweet button, they end up at the right url destination. The href attribute is the url highlighted in blue in the graphic above.

--> HTML TIP

If you want a new browser tab to open when users click on your button (so that they stay on your website), add “target="_blank" to the end of the url, like we did.

This is what your finished code will look like:

<div style="width: 100%;text-align:center;margin-top:-30px;margin-bottom:30px"><span class="tweet"><a href="https://twitter.com/intent/tweet?text=%22The%20idea%20of%20Twitter%20started%20with%20me%20working%20in%20dispatch%20since%20I%20was%2015%20years%20old%2C%20where%20taxi%20cabs%20or%20firetrucks%20would%20broadcast%20where%20they%20were%20and%20what%20they%20were%20doing.%22%20%20https%3A%2F%2Ftinyurl.com%2Fy6agj2dn%20%40storylinecy%20%23GreatIdeas" target="_blank"><img src=" https://static1.squarespace.com/static/575d4fa140261d88043e649c/t/5d30cc0356e46e0001755084/1563479043352/Twitter+Drop.png
/?format=100w" style="width: 40px;"></a></span></div>

You’ll notice that we snuck a separate “tweet” class in there. That’s so we can target that specific graphic and create the funky CSS hover animation effect you’ll see in the final step, which we dedicate to the man that took the funk from funky and funked it up to 11, Bootsie Collins.


While the funk may be optional for your CSS, the funk is never optional for Bootsie Collins.

While the funk may be optional for your CSS, the funk is never optional for Bootsie Collins.

Step 7: Animate your tweet button when readers hover over it

If you can access your CSS stylesheet, dump this snippet of CSS in there to create a shaking effect when readers hover over your tweet button.

Not a shaker? There are tons of other options besides shaking. Check out CSS Tricks or W3Schools for ideas and a basic run-through of CSS animation properties.

Here’s our CSS, which targets screens above 768px:

@media only screen and (min-width:769px) {.tweet img:hover {
  animation: shake .5s; 
  animation-iteration-count: infinite}}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

And here it is in action. (Please don’t share it though. It’s not our quote.)

The idea of Twitter started with me working in dispatch since I was 15 years old, where taxi cabs or firetrucks would broadcast where they were and what they were doing.
— Jack Dorsey

Share this. (It’s ours.)

A DIY tweet button for your pull quotes lets your readers share your best content directly with the world.
— Storyline Creatives

Not sure you’re ready for this?

As I was writing this post, I realized that for you readers who aren’t guerrilla web designers with a basic grasp of HTML and CSS, setting up your own functioning tweet button might be a steep challenge.

If you like this idea but aren’t sure how to make it happen, just get in touch. Seriously. We’d be happy to make you happy.


When Max Sheridan isn't designing tweet buttons, he creates comeback campaigns for Nicolas Cage. (What, you don't think he needs a comeback campaign?) His second novel Hubble is coming fall 2020 from Run Amok Books. Talk to Max at your own risk here.