10 Tricks to Super Effective Tweet Buttons

By Posted 2014 Updated   BloggingTutorialsTwitter

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()); ?>&amp;url=<?php the_permalink(); ?>&amp;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 &amp 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

tweet now buttons

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.


10 comments on “10 Tricks to Super Effective Tweet Buttons

  1. Aaron Diaz says:

    Really helpful post and your points to helpful for the websites, I’ll follow your tip on my site. Thanks for sharing with us.

  2. Suraj Rai says:

    P Chandra, your article is really useful for me. I am using plugin for flying Twitter image. Can you share code or script for same purpose? I am not coding expert due to this not have idea how to do this.

  3. Abhishek Jain says:

    These are general tips but the idea of bird color with your brand color is a really good idea….

  4. Bradley Elliot says:

    the button shows awesome clicks.

  5. Vivek Shukla says:

    it works. your tips is really good and very effective. this twitter button allow users to tweet your post in twitter easily. just click on it

  6. Lak says:

    Good tip chandra. It worked for me.

  7. Altaf Gilani says:

    Really helpful tips! it worked for me.Thanks for sharing.

  8. Shabbir Ahmad // Online Earning Way says:

    Great post. It is very helpful in my twitter account. Thanks a lot for sharing this post.

  9. syed ahad says:

    your tips is really good and its work for me.
    thanks for sharing .

  10. Kang Dani says:

    Open in New Tab plugin for wordpress is very useful, So I can do automatically and save my times.

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php