search

smartchicago / foodborne

Manages tweets about food poisoning in Chicago and presents Open311 form for reporting incidents.
http://foodborne.smartchicagoapps.org/
29 stars 11 forks source link

Add Twitter Card Support #49

Closed GovInTrenches closed 10 years ago

GovInTrenches commented 10 years ago

In order to get more information about Foodborne when we send outbound tweets, we can use Twitter Cards in order to display an image, text, and a link to the form.

The way the Twitter Cards work is that we add metadata to the site's header, then submit the site for validation to Twitter. We'd probably just need the Summary Card (https://dev.twitter.com/docs/cards/types/summary-card) which is what most of the news websites use.

The example text is here: 

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-article.jpg">

I imagine we could set up our site like the following: 

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@foodbornechi">
<meta name="twitter:creator" content="@foodbornechi">
<meta name="twitter:title" content="Foodborne Chicago">
<meta name="twitter:description" content="If you think you have food poisoning in Chicago, please complete this form. The info will be sent through the Chicago 311 service to the Chicago Department of Public Health so they can take any necessary action including sending a food inspector to that restaurant.">
<meta name="twitter:image" content="https://foodborne.smartchicagoapps.org/assets/logo-ccaea6464d2721e73bde30306ca959a1.png">

If we place that in the header, we should be able to validate it and get it going.

srobbin commented 10 years ago

According the documents, the description text will be truncated over 200 characters. The one in there right now is 266 characters. Do you want to take a few words out, or are you okay with truncation?

GovInTrenches commented 10 years ago

I thought it was just the description text in the metadata? Even if it's truncated a bit, I still think it would be ok.

srobbin commented 10 years ago

Added in commit 1c2a3cf455f149db4cd96fa0aae88d34df3778f8. This is live on the server now.