DIY "Click To Tweet" Button


DIY Click to Tweet Button

If you blog for fun, or money, or both, the biggest challenge is getting people to read your content. There are literally millions of bloggers out there, and many have the same niche as you. How do you stand out? You can push out your work over and over again, but that doesn't always work. Either the stars align and one of your posts go viral, or the followers you already have share your content with their family and friends, and then they follow you too.

This is where the famous "Click to Tweet" button comes in. This is a simple WordPress plugin that changes a sentence to a button that users can click and tweet from. If you're promoting a product, raising awareness or just trying to get your content out there, this is a perfect way to do it. I watched a video series by the famous Melyssa Griffin awhile back that talked specifically about this button. She paid $7 for it, and called it a "game changer". To my surprise, I would later find it on another blog I follow called Shifting Roots. I know Kristen personally so I reached out to her. How much was she paying to use it? She said it was about $20 a year.

Before my jaw hit the floor, she corrected herself. It came in a bundle of other social media plugins from a site called Social Warefare. This site offers all sorts of social media sharing plugins. I couldn't see exactly what they offered as I had to pay to see it, but I could check out their prices. Their packages are $29 a year for one site, $135 a year for five sites and $250 a year for 10 sites.

From what I could see, they offered nothing I can't build myself. Granted, there may be some products that I can't replicate, but I can make my own "Click to Tweet" button, so let's do that.

Getting Started

Let's start with a simple paragraph tag. The content of this paragraph tag will be whatever you want your users to share on Twitter. If you're not sure how to write an HTML paragraph tag, check out this piece I wrote earlier about simple tags.

(Hundreds, you know, assuming you have 5+ sites.)

From here, add a class to the paragraph tag so that we can find it with CSS and JavaScript

Making it Link

The actual "Click To Tweet" button is a link, not a paragraph, so we'll have to use some JavaScript to place a link inside the paragraph.

Now it works great! Only problem is, the official "Click to Tweet" button opens Twitter in a new window, not a new tab. This isn't a problem though. We just have to add a few lines:

Bingo!

Making It Pretty

You probably have your own styles for links, but we don't want to use those for this button. Instead, we want this button to look like an official Twitter button. Because we are changing your CSS styles, this might not work for you right out of the box and you'll have to play around with it a bit.

Now there's just one little piece missing. On the official button, there's the text "Click to Tweet" in the bottom right, followed by the Twitter bird. Let's add those with pseudo elements.

The text is easy, so we'll use that in the :before pseudo element. The Twitter bird is a little more complicated. We'll put that in the :after pseudo element. If we were using a jQuery plugin or a Wordpress plugin I could tell you to just download a .png file. Since I want this to be as simple as possible, we will instead use a data-uri string -- which is super long, but simple enough to use:

And there it is. It's a super simple, DIY version of the "Click to Tweet" button. Now you can save yourself $7 or $20 or $30 or $250 or whatever. In exchange of saving you some money, why not hit the button below instead?

Don't buy "Click to Tweet!" Do it yourself and save hundreds!

 

 

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close