Do you display Tweet Buttons that everyone wants to click? Are your tweet buttons effectively engaging your audience to share your amazing content? Every website has tweet buttons to share content online, but how effective are they. This article explains how to create simply Tweet buttons using icon fonts, styled by CSS, without any javascript.
Tweet Buttons You Want to Click
Here is what a typical Tweet button code on our site looks like as seen at end of this article.
<a class="btn btn-info" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=<?php echo str_replace( ' ', '%20', get_the_title()); ?>&url=<?php the_permalink(); ?>&via=qot" target="_blank" rel="nofollow"><i class="fa fa-twitter fa-lg "></i> Tweet</a>There is lot of smart coding in this simple button – The button has styled classes .btn and .btn-info by Bootstrap here. Font awesome adds the twitter icons (classes .fa and .fa-twitter .fa-lg). We have replaced & with & to make it Html valid and there is some smart PHP code to take care of spaces. The title and permalink are incorporated in the share link. The link is no-followed and the is targeted to open in a new tab. The via @qot refers to our twitter account when the article is shared.
This is just a design concept that you might like
Here are some secrets to super successful buttons that users want to click.
1. Optimal Tweet Button Size
Many websites post very small buttons that are difficult to visualize, and so are hardly ever clicked by site visitors. While large sizes may overpower your site design, using optimal size of sharing buttons is essential to match site web design.
2. Official Twitter Brand Color
The light blue color of the tweet button is characteristic. Any other color confuses users. It is essential that your tweet buttons replicates the brand colors for better visitor recall and more likely to get clicked.
3. The Twitter Bird icon
Many people identify the bird icon as being synonymous with Twitter. So adding the bird icon to the Twitter button improves brand recall, and visitors find it the familiar button which they want to click to tweet. Don’t make them think
4. Call to Tweet action
It is very essential that your button asks the reader to click the button and tweet the article. Merely putting a bird icon will not encourage the user to click. It is a good idea to add the text “Tweet” beside the bird icon. Many people add the text “Twitter” next to the bird icon, which is not a call to action to click
5. Button Hover action
The Twitter button should show some response when the mouse is moved over the button. This indicates to the user that the button can be clicked to tweet article. This is an essential feature of good web design
6. Open Tweet in New Tab
If you click the original Twitter button, you will observe it opens a new pop-up window. As modern browsers disable pop-ups, you might want to open the share window in a new tab. This keeps the article in view, while opening the Twitter share option in a new tab in the browser in the background
7. Hide Twitter share count
Do you think people get very encouraged to share your article when they see that it has been shared only a few times. It is well demonstrated that people like to share articles which have been previously shared heavily. So a small count discourages readers to click and share. Hide the share count so that readers will click if they really want to share the article, and not judge it based on previous shares
8. Share Safe URL
While it is a good idea to include your full PermaLink into the URL field of the tweet button, sometimes long URLs might fail to get shorter and would lead to a broken link to the article. For average sized links, Twitter will automatically shorten the URL. Sometimes you can opt to use the post ID to create shorter Twitter links, which is great for branding as well
9. Add your Twitter handle
Adding your twitter profile in the link will help to spread your Twitter account as the source. Not only will it get you more Twitter followers, but all help you track who retweeted your article as a notification in your account. Another secret to increase Twitter followers.
10. Fast loading Tweet buttons
Most people like to add Twitter scripts which slows the button loading as well as increases your page load time. We mostly use CSS buttons, but now prefer to use icon fonts like Font Awesome to create text buttons styled by Bootstrap. These all help to make site load faster.
11. HTML 5 valid twitter buttons
While you try to insert the link code into the button, it is very essential to ensure that it is valid HTML. Sometimes you might need to escape the quotes to make the HTML valid. Remember to deal with the spaces in the title.
Do you like this article? Tweet to Share.