{"id":40971,"date":"2014-06-04T16:38:08","date_gmt":"2014-06-04T11:08:08","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=40971"},"modified":"2020-05-24T11:03:58","modified_gmt":"2020-05-24T05:33:58","slug":"effective-tweet-buttons","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/","title":{"rendered":"10 Tricks to Super Effective Tweet Buttons"},"content":{"rendered":"<p>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, \u00a0without any javascript.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ac6f1a1d0cdb\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ac6f1a1d0cdb\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#Tweet_Buttons_You_Want_to_Click\" >Tweet Buttons You Want to Click<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#1_Optimal_Tweet_Button_Size\" >1. Optimal Tweet Button Size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#2_Official_Twitter_Brand_Color\" >2. Official Twitter Brand Color<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#3_The_Twitter_Bird_icon\" >3. The Twitter Bird icon<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#4_Call_to_Tweet_action\" >4. Call to Tweet action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#5_Button_Hover_action\" >5. Button Hover action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#6_Open_Tweet_in_New_Tab\" >6. Open Tweet in New Tab<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#7_Hide_Twitter_share_count\" >7. Hide Twitter share count<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#8_Share_Safe_URL\" >8. Share Safe URL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#9_Add_your_Twitter_handle\" >9. Add your Twitter handle<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#10_Fast_loading_Tweet_buttons\" >10. Fast loading Tweet buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/effective-tweet-buttons\/#11_HTML_5_valid_twitter_buttons\" >11. HTML 5 valid twitter buttons<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Tweet_Buttons_You_Want_to_Click\"><\/span>Tweet Buttons You Want to Click<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here is what a typical Tweet button code on our site looks like as seen at end of this article.<\/p>\n<pre><code>&lt;a class=\"btn btn-info\" title=\"Share on Twitter\" href=\"https:\/\/twitter.com\/intent\/tweet?text=&lt;?php echo str_replace( ' ', '%20', get_the_title()); ?&gt;&amp;amp;url=&lt;?php the_permalink(); ?&gt;&amp;amp;via=qot\" target=\"_blank\" rel=\"nofollow\"&gt;&lt;i class=\"fa fa-twitter fa-lg \"&gt;&lt;\/i&gt; Tweet&lt;\/a&gt;<\/code><\/pre>\n<p>There is lot of smart coding in this simple button &#8211; The button has styled classes <em>.btn<\/em> and <em>.btn-info<\/em> by <a title=\"Use Twitter Bootstrap for Powerful Web Design\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/twitter-bootstrap\/\">Bootstrap<\/a>\u00a0here. <a title=\"How to Add Icon Font Awesome to Any Site\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/add-icon-font-awesome\/\">Font awesome<\/a> adds the twitter icons (classes\u00a0<em>.fa<\/em> and <em>.fa-twitter .fa-lg<\/em>). We have replaced <em>&amp;<\/em> with <em>&amp;amp<\/em> 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. \u00a0The via <a href=\"https:\/\/twitter.com\/qot\" target=\"_blank\" rel=\"noopener noreferrer\">@qot<\/a> refers to our twitter account when the article is shared.<\/p>\n<p>This is just a design concept that you might like<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40989\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/tweet-now-buttons.png\" alt=\"tweet now buttons\" width=\"355\" height=\"121\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/tweet-now-buttons.png 355w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/tweet-now-buttons-150x51.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/tweet-now-buttons-300x102.png 300w\" sizes=\"(max-width: 355px) 100vw, 355px\" \/><\/p>\n<p>Here are some secrets to super successful buttons that users want to click.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Optimal_Tweet_Button_Size\"><\/span>1. Optimal Tweet Button Size<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Many websites post very small buttons that are difficult to visualize, and so are hardly ever clicked by site visitors. While\u00a0large sizes may overpower your site design,\u00a0using\u00a0optimal size of sharing buttons is essential to match site web design.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Official_Twitter_Brand_Color\"><\/span>2. Official Twitter Brand Color<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_The_Twitter_Bird_icon\"><\/span>3. The Twitter Bird icon<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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&#8217;t make them think<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Call_to_Tweet_action\"><\/span>4. Call to Tweet action<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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 &#8220;Tweet&#8221; beside the bird icon. Many people add the text &#8220;Twitter&#8221; next to the bird icon, which is not a call to action to click<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Button_Hover_action\"><\/span>5. Button Hover action<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Open_Tweet_in_New_Tab\"><\/span>6. Open Tweet in New Tab<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Hide_Twitter_share_count\"><\/span>7. Hide Twitter share count<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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<\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_Share_Safe_URL\"><\/span>8. Share Safe URL<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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 <a title=\"How to Create Short Retweet Urls for Your Domain Name\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/05\/create-short-urls-for-your-domain-name-to-retweet-easily\/\" target=\"_blank\" rel=\"noopener noreferrer\">shorter Twitter links<\/a>, which is great for branding as well<\/p>\n<h3><span class=\"ez-toc-section\" id=\"9_Add_your_Twitter_handle\"><\/span>9. Add your Twitter handle<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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 <a title=\"10 Surefire Ways to Get More Twitter Followers\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2010\/03\/more-twitter-followers\/\">increase Twitter followers<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10_Fast_loading_Tweet_buttons\"><\/span>10. Fast loading Tweet buttons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Most people like to add Twitter scripts which slows the button loading as well as increases your page load time. We mostly use <a title=\"How to Create Social Media Icons with Pure CSS\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/04\/pure-css-social-media-icons\/\">CSS buttons<\/a>, but now prefer to use <a title=\"How to Add Font Awesome Icons in Bootstrap\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/font-awesome-icons-in-bootstrap\/\" target=\"_blank\" rel=\"noopener noreferrer\">icon fonts<\/a> like Font Awesome to create text buttons styled \u00a0by Bootstrap. These all help to make <a title=\"How to Increase Site Speed by 200% Easily\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2012\/02\/increase-site-speed\/\">site load faster<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_HTML_5_valid_twitter_buttons\"><\/span>11. HTML 5 valid twitter buttons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<p>Do you like this article? Tweet to Share.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you display Tweet Buttons that everyone wants to click? Are your tweet buttons effectively engaging your audience to share&#8230;<\/p>\n","protected":false},"author":4,"featured_media":40989,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6,111],"tags":[52,49],"class_list":["post-40971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","category-social-media","tag-popular","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=40971"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/40971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/40989"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=40971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=40971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=40971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}