Implementing Twitter Cards

The keen-eyed among you may have noticed @averagejoedev’s tweets have recently been including little previews of the linked articles!

This is a feature of Twitter know as Twitter Cards.

Twitter reads the URL you paste in your tweet (av.joe.gl/6991, for example) and looks for some special meta tags.

It’s fairly simple to integrate too. Especially if you’re on WordPress, you can just install the Add Meta Tags plugin. Then validate the cards and apply to whitelist your domain (on the validator page).

If you’re not using WordPress, it’s not much more complicated: fill in the Try Cards section of the Validator and copy and paste the generated meta tags! You’ll obviously need to swap out the sample text with server generated values, but that’s hardly a chore. You’ll then need to validate the cards and apply to whitelist your domain (on the validator page).

Tweepic

To practice a manual implementation of Twitter Cards, I decided to create Tweepic – that’s short for Tweet pictures (from Instagram).

Instagram disabled their Twitter Card integration a while back to gain more views to their own website – you no longer get your photo embedded in tweets.

I thought I’d change this with Tweepic (previously Twinsta.ga). Using the Instagram API and Twitter Cards, replacing instagram.com with twe.epicness.uk in your tweets allows a preview of your photo to be embedded. Clicking the link will redirect you to the Instagram website or app. Neat, eh?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s