Clicking it opens up a nice preview of the linked content, often with an image. These previews are generated by setting up what the Twitter API calls a “Twitter Card.”
I wanted to set this up for BecauseFinanceIsBoring.com, which uses Tumblr, but runs on a custom domain. I found a great article reviewing how to do this by Samantha John, founder of Hopscotch (an iPad programming language to get kids coding!). Her overview was super helpful, but her gist didn’t work for me–she’s using a different Twitter Card than the one I wasted to use (summary_large_image).
So, I forked it, played around, and made it work! Here’s my forked gist https://gist.github.com/alexisgo/9822047 with all the code you need to add a large image preview Twitter Card.
There was one wrinkle for me, which is that on my tumblr, I almost exclusively use Text Posts. Tumblr has a variable to grab images from an individual post, but it’s only available to Photo type posts–and I use Text type posts. So I didn’t know what to set the content to on the twitter:image:src meta tag: <meta name=”twitter:image:src” content=”http://placekitten.com/250/250/”>.
But what I discovered is that if I leave out this meta tag, twitter seems to pick the final image in the post, and use that for the preview image, which works well enough for my purposes.
Filed under: programming | 0 Comments