Any Social Media aware blog these days uses Twitter Card Meta Tags. They’re what Twitter uses to generate the cool thumbnails and post descriptions when someone shares your posts. We’ve added them to the NixMash Blog Application (on GitHub). Here’s what they look like in a typical post HTML source.
A Single UI Addition
The action is all behind-the-scenes for creating Twitter Cards. The only UI addition for Cards is a dropdown selector on the Post Edit Form. As you see we support two types of Twitter Cards: Summary and Summary_Large_Image, as well as “None” for no Twitter Card.
We created a post_meta table and its accompanying PostMeta Entity. We can expand PostMeta to include meta tags for other Social Services like Facebook. For now we have only the essential elements in the post_meta table for Twitter, post_id, twitter_cardtype, twitter_creator, twitter_image and twitter_description. Everything else we’ll get from the Post Entity. (We’re storing twitter_creator in a table to support blogs with multiple authors.)
We’ll associate the PostMeta object with our Post Entity.
Jsoup to the Rescue
Jsoup is so awesome in making any HTML parsing task a non-event. We want to grab the URL path of the first image in the Post Content for display with the Shared Tweet, and of course we’ll use Jsoup for that. We also want the first 200 characters or so of the Post to use as the Shared Tweet Description in text format. We’ll let Jsoup handle that as well. To hold the parsed data in creating the PostMeta object we’ll use a JsoupPostDTO object.
We have three different test points to consider. 1) Creation of the JsoupPostDTO object from Post content, 2) Creation and Update of PostMeta Entities from new and updated Posts, and 3) Correct Display of Twitter Meta Tags on the page when rendered.
The Tests: Jsoup
We want to make sure that 1) the first image in the Post Content is successfully extracted, and 2) the site Default Twitter Image (with its path in an external properties file) is saved for posts with no images. We only save the image path for site independence, so our third test to is ensure that any full image urls are stripped of their protocol and domain. Our final test is to confirm that the Twitter descriptions for posts with less than 200 characters are saved in their entirety.
The Tests: PostMeta Creation and Updates
We’re in the Administration Post Edit area now, confirming that PostMeta objects are saved and updated correctly. The third test is a “MultiPhoto Post” Twitter Card test. The NixMash Blog app supports several types of posts. A MultiPhoto Post, for instance, displays lightbox-enabled images at the conclusion of the post, uploaded with a BlueImp File Upload Plugin described in this NixMash post.
The Tests: Meta Tag Display
The final testing point is for the display of posts, that the correct Card Type is displayed, or none at all.
Generating the Meta Tag HTML
We use a lot of FreeMarker in the NixMash Blog application and we’re going to use it again here for simple meta tag generation. Emphasis on the simple.
Source Code Notes for this Post
Source code discussed in this post can be found in my NixMash Blog project located on GitHub.