Easiest Way To Create Custom Tweet Button?

Question

I am trying to design a custom tweet button for every post on my site. Below is the original twitter code I am using right now, and it works. I want to change this into a custom design with my own 'designed image' at the background. Just like npr.org.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.example.com{$story_url}" data-text="{$title_short}" data-count="none">Tweet</a>

{literal}<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>{/literal}

The below (on comment) Custom design code works but when I tweet it comes without title. It will be really great if somebody can please help me out.

Twitter

Answer 1

Regarding the code you posted as a comment: the data parameters don't work when you don't use the official Twitter class & Javascript. You then have to include everything in the link url and be sure to escape spaces etc from the message. This works for me (in Ruby):

<% tw_text = "I just finished lesson #{@lesson} of unit #{@unit} on LearnYu.com! #Chinese " %>
<% tw_text = URI.escape(tw_text, Regexp.new("[^#{URI::PATTERN::UNRESERVED}]")) %>
<a href="https://twitter.com/share?url=http://www.learnyu.com&via=LearnYu&text=<%= tw_text %>" target="_blank"><img src="/assets/twitter_button.jpg" alt="Share this on Twitter!" /></a>