Twitter is a valuable source of website traffic for many businesses, but is it working for you?
If you could get your content shared more on Twitter and increase your traffic, you could also see a rise in conversions, whether that’s more people enquiring about your services, buying your products, or subscribing to your mailing list.
So how do you get more shares and traffic from Twitter?
Firstly, make sure you are sharing your content multiple times. Twitter is a very fast moving platform and only a fraction of your followers are seeing each tweet. So promote your content several times over the week or so after publishing a new post; try posting on different days and at different times to reach more of your followers.
Secondly, make it super-easy for other people to share your content. Add Share buttons to your site – try floating buttons that stay at the side of your site as the user scrolls down so they don’t have to go hunting for them.
You could also add a Click To Tweet plugin to your site. That’s another great way to make it easy for people to share your posts. Click To Tweet lets you easily create tweetable content, like pull quotes and headlines, for your readers to share with just the click of a button.
[Tweet “Use Click To Tweet to make it super-easy for people to share your posts on Twitter”]
My favourite Click To Tweet plugin is CoSchedule’s as it’s quick to use and easy to customise. Today I’ll show you exactly how to do that.
How to install Click To Tweet
To add Click To Tweet to your website, you can either download the plugin from CoSchedule’s website or get it from the WordPress repository.
Check out this post to download a free step by step guide to adding plugins to your site.
Once you’ve installed and activated the plugin, it’s time to configure the settings. You can do that either by going to Settings > Click To Tweet or by going to Plugins > Installed Plugins. Find Click To Tweet in the list and click on Settings.
The Settings screen is really simple. At the top you can see instructions for adding a Click To Tweet box to your post, then the only option to configure is your Twitter handle.
Enter it in the box, without the @ symbol so that ‘via @you’ will be added to the tweets.
How to use Click To Tweet
Now let’s see how to add a Click To Tweet box to a post. In the Visual Editor you should see a new button. Click it and you get a little pop-up where you can type in your tweet. Click OK and it’ll be added to your post.
Or you can manually add the shortcode. Type in [Tweet “your tweet goes here”], placing your tweet between the quote marks.
Keep your tweets to 120 characters or less to make sure there’s room for the post link and the ‘via @you’. If your tweet is longer than that, the end will be cut off and replaced with ‘…’.
How to customise Click To Tweet
As they are, the Click To Tweet boxes are pretty nice. They have a really simple and clean design that will match pretty much any site. But if you want to customise them to fit more with the style of your site, here’s how.
This is going to involve adding some CSS to your site, so if you’re at all unsure of what you’re doing, now’s a good time to make a backup of your site.
Some premium themes come with an option to add custom code, so check your theme options (often found at Appearance > Theme Options), then look for the Custom CSS/Custom Code box.
If you’re using a free or custom made theme you might not have that function, so to edit the CSS of your theme you can go to Appearance > Editor and make sure the Stylesheet (style.css) is selected for editing. If you’re using this method, make sure any changes you make are under the initial block of code containing the theme name, author etc. If it’s easier for you to keep track of your changes, try making them at the very bottom of the file.
You can also use a plugin to add a Custom CSS option if you don’t want to edit the theme files. That’s what I’m going to do. I’m using the Custom CSS option with the Jetpack plugin. Once you’ve activated it, you’ll see Edit CSS under the Appearance menu.
Change the font
By default the plugin will use your site’s body font for the tweet, but if you want to change it, for example if you’d rather use your site’s heading font, here’s how.
This code will change the font to Raleway, to match the site headings:
.tm-click-to-tweet .tm-ctt-text a { font-family: 'Raleway',sans-serif; }
Paste the code into your CSS file and replace ‘Raleway’ with the name of the font you want to use. You can use a tool like Firebug (if you’re using Firefox), or Chrome Developer Tools to find out the name of your headings font, or check your CSS file for the font family specified for elements like h1, h2 etc.
You can also add in extra lines of code to change the colour, size and weight of the font. Only include the lines of the parts you want to change, so if you want to change the font family and colour, leave out the font-size and font-weight lines.
.tm-click-to-tweet .tm-ctt-text a { font-family: 'Raleway',sans-serif; color: #999999; font-size: 24px; font-weight: 100; }
I’ll change all 4 which will give us this:
Change the border
The box has a thin grey border, but if you want to change it here’s the code:
.tm-click-to-tweet { border: 1px solid #dddddd; border-radius: 4px; }
You can see the border attribute has 3 parts: first the thickness of the line, then the line style, then finally the colour. For the line style, you could try a dashed or dotted line – just replace ‘solid’ with either ‘dashed’ or ‘dotted’.
You can also change the border radius to either remove the rounded corners (use 0px for that) or make them bigger. If you want to remove the border altogether, try ‘border: none;’ or ‘border: 0px;’.
I’m going to change the border thickness, colour and radius:
Change the background
You can also change the background colour – here’s the code:
.tm-click-to-tweet { background-color: #fff; }
You can see it’s currently set to #fff, which is the code for white. Let’s change it to black, which is #000000.
Looks awful, doesn’t it?!
So we want to find a combination of font, border and background colours that work well together.
Putting it all together
I’ve decided to change the text size back to 24px so I simply deleted that line of code. I went with a pale orange background colour and dark grey text. I made the border the same colour as the background but added in an extra line to change only the left side to a thick dark orange line. Much better 🙂
[Tweet “How to install, use + customise Click To Tweet on #WordPress”]
So there you go. It’s a pretty easy plugin to use, but if you’d like any help in adding it to your site, customising it or even making other changes to your site, please do get in touch.
Never miss a post
Sign up for actionable WordPress tips and advice, plus exclusive tips and offers, just for subscribers.