Twitter Gallery Card How-to

If you don't know twitter cards, it's a way to tweet a rich media context of your website. It's awesome for social bookmarking and give a nice value to web development (kind of). Long story short; lets make a twitter gallery cards.

First determine your target url (ex. http://mysite.xx.xx/gallery/index.htm), then go to https://dev.twitter.com/docs/cards/validation/validator (requires webkit browsers: chrome/safari, they say). Shortly after logged-in with your twitter account, select the gallery card from the card catalogue. The next step, that page will help you create the twitter meta tags, just fill the forms required to modify meta tags content to match your account and webpage. You can skip all tags for apps. Copy all the tags, edit your webpage by paste them under the keywords, description, etc meta tag in your head section of your targeted webpage.
Here's the meta tag mapping (kind of) of the gallery card.

You will going to need twitter's approval, just enter the simple contact form. The approval won't take long, you will be notified via email of your account. I've tried to just put the metas without approval action--didn't work, so i guess twitter's approval is a must.

After you receive the notification, go back to dev.twitter page, validate by entering your target url. You will see the preview in twitter card tester on the right pane.

Login to your twitter and tweet anything along with your targeted url, and your gallery card pops up whenever your tweet's expanded. The way gallery card's photo thumbnail opens is exactly like the ones from your twitter media grid.

That's all. \m/

Tweet

» Latest Entries

• 
• 
• 
• 
•