Twitter Cards for Octopress blogs

technical

The first time I heard about Twitter Cards is from the GitHub blog entry announcing they have implemented it for all the GitHub respositories. And if you haven’t heard about them, go to either of those posts and you’d get a quick overview.

Anyways, since the time I read that blog, I have been thinking of trying to implement it here on this blog as well as on the other website I’ve been actively maintaining lately - flickrdownloadr.com. Finally got around to doing it yesterday on the static pages at flickrdownloadr site (even though I am still waiting for Twitter to approve my site).

Today, I took it one step further by implementing it here and on the blog there, which are both built with the awesome Octopress platform. Turned out to be pretty straight-forward - just add the below snippet into the source/_includes/custom/head.html and you should be all set.

1
2
3
4
5
6
7
{% raw %}{% if site.twitter_user %}
    <meta property="twitter:card" content="summary">
    <meta property="twitter:site" content="{{ site.twitter_user }}">
    <meta property="twitter:url" content="{% if canonical %}{{ canonical }}{% else %}{{ site.url }}{% endif %}">
    <meta property="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
    <meta property="twitter:description" content="{{ description | strip_html | condense_spaces | truncate:200 }}">
{% endif %}{% endraw %}

P.S: Also, you would need to apply (or “opt-in”) for Twitter Cards here and they will have to approve it for the cards to start showing up.