Twitter recently introduced the notion of 'Twitter Cards'. In a nutshell, it's an enhanced (and automated) way for any link that is shared on Twitter to show a preview snippet instead of an url.


Both the desktop/web and mobile (iOS/Andriod) apps benefit from this service and instead of a simple t.co link, users will see something similar to:

Twitter Cards sample web snippet
Fig: Twitter Card sample for the web
Twitter Cards sample iOS snippet
Fig: Twitter Card sample for iOS

Nice no? Perfect for our Sitefinity news items and blog posts. While we could go fancy and probably inherit some type and incorporate it according to best practices, I'm going for the lazy approach today.


Extending classes, or building a template with a code behind and tieing that to our widgets are simply not worth the time for something so easy.


First extend news with an image field.

In the backend choose Content >> News and in the new screen click bottom right on 'Custom Fields for News Items'.


When we click add field, we give it the name 'Image'. Set the 'Interface widget for entering data' to custom and for the 'Type or Virtual path of the custom widget' we chose Telerik.Sitefinity.Web.UI.Fields.ImageField

Sitefinity Custom Field screenshot
Fig: Sitefinity - Adding a custom Field

Next, we have to repeat that step for blogposts. Remember to be lazy ;) and use the same fieldname so we don't have to tweak our individual templates.


Next stop: Detail templates.

In the backend choose Design >> Widget templates and in the overview screen look for the widget applied to 'news-single' and click on its title.


Just before the closing </ItemTemplate> we insert 3 <input type="hidden" /> tags, one for each of our necessary fields.



Next directly below the closing </telerik:RadListView> we add a bit of Javascript.



That's all. Just save and repeat the step for our 'blog item - single' template and we're done.


Go to Twitter Cards Validator to test out your page and happy sharing!