Make the most of your tweet

Twitter's 'Tweet Button' has become the standard for websites and blogs around the internet. Yeah, it's that little button to the right of this paragraph. twitter bird Run with it (this blog) has had that implemented since day one thanks in large part to the fact that Twitter makes including the button really simple. Just grab the snippet of code and throw it into your html. It took me a little while to realize that the default settings, while great for getting you up and running, do not result in the prettiest of tweets. Here I'll walk you through how to utilize google's url shortener, and get the basic Tweet Button functionality down.

Fundamentals

Twitter allows you to include the button with an iframe or via a snippet of javascript. I'm going to walk through the javascript setup because it's the most convenient and it's also what Twitter recommends. If you go to the Twitter Button resource page you'll be given a set of options to configure your Tweet Button. Once you've figure out how you want it laid out you should have something that looks like this.

</noscript>

This is the basic outline for a tweet button.  The _data_ attributes allow you to customize the behavior of your button.  We'll focus on these [[1]](https://dev.twitter.com/docs/tweet-button):

* _via_ - Screen name of the user to attribute the Tweet to
* _count_ - Count box position
* _counturl_ - The URL to which your shared URL resolves to
* _url_ - URL of the page to share

But before we get to that we need to get set up.

## Shortening


First things first, generate a migration to add a short_url field to your Article/Post table (I'm going to assume a blog style app).


    bundle exec rails g migration add_short_url_to_articles short_url:string
    bundle exec rake db:migrate


Once that's done we can go into the Article model and get to the important stuff.

<script src='https://gist.github.com/2156432.js?file=gist-2.rb'></script><noscript>

```sh
class Article < ActiveRecord::Base
  before_save :populate_short_url

  def populate_short_url
    self.short_url = get_shortened_url
  end

  def get_shortened_url
    http = Net::HTTP.new("www.googleapis.com", 443)
    http.use_ssl = true
    http.verify_mode = OpenSSL::SSL::VERIFY_PEER
    http.ca_file = File.join(Rails.root, "lib", "cacert.pem")
    key = File.read(File.join(Rails.root, "lib", "google_api.txt")).strip
    params = {'longUrl' => get_article_url }.to_json # self.url is your article slug
    resp = http.post("/urlshortener/v1/url?key=#{key}", params, {'Content-Type' => 'application/json'})
    body = JSON.parse(resp.body)

    if resp.code.to_i == 200
      @short_url = body["id"]
    else
      error = body["error"]
      raise "Error: #{error["code"]} : #{error["message"]}"
    end
  end

  def get_article_url
    "YOUR_ROOT_URL" + self.url
  end
end

Now you'll immediately notice a few things about the above code. First is the use of ssl. Do it [2]. I've snagged the curl PEM [3] which is a reliable authority and stored it in /lib/cacert.pem. Also set the verify_mode to OpenSSL::SSL::VERIFY_PEER. The rest is pretty vanilla net/http stuff.

The next thing you'll notice is the line directly under that, which is where I read in my google api key to keep it out of source control. It makes sense to add an after hook on your cap-deploy script to link to a share location on your production server and then add the file to your ./gitignore. Strictly speaking goo.gl does not require that you submit an api key for url shortening, but it lets you track the urls if you do.

Bringing it back around

Alright so now you have the short url for your site we'll come back to our Tweet Button. Only now we'll set the data-url to our short url. Not so fast! We also have to set the data-counturl to the original url so that your count bubble will be accurate.

Now we have a decent looking tweet. It's going to use your <title> for your text by default. I think this is a great default as it encourages you to use the <title> properly. I think the easiest way of setting your title tag is to set '<%= yield :head %>' in your layout's <head> tag then:

And there you have it a nice looking tweet.

Wrap up

Alright, so there you have it a quick and relatively painless way to spruce up your website. There are a number of additional things you can do to further customize your Tweet Button so I encourage you to take a look at the api page which is linked below. If you have you have any questions or ideas let me know in the comments below, or tweet me. Thanks for reading.

References

1.) Tweet Button Docs
2.) Use HTTPS, 2010
3.) Curl PEM

Additional References

Net HTTP cheat sheet
Google Shortener Getting Started

run_with_it Learning, sharing, coding.