Skip to content →

Introducing Content Cards

Today, I’d like to introduce our latest addition to the 40k+ pile of plugins in WordPress.org repository – Content Cards. As it says in the description, this plugin makes ordinary web links great by making it possible to embed a beautiful Content Card to link to any web site.

Unlike the oEmbed API feature plugin, that was just proposed to be merged into the WordPress Core, Content Cards tackles the problem of creating rich content cards out of simple links from the other end. Instead of trying to provide a new way for the embeding side to get information (oEmbed endpoint), we focused on using the information that most modern websites already provide – Open Grahp meta data.

Open Graph is a meta data format, that was introduced by Facebook and is now used by most mayor social networks to generate those nice, rich link previews whenever you try to share a link. Like in a picture below. You only paste in a link, and Facebook grabs an image, a title and a description from the website automatically.

Sharink a link in Facebook

For this system to work, the website in question has to provide the required information via special <meta> in its HTML. There are quite a few WordPress plugins that set those tags for you automatically (Yoast SEO and Jetpack being the most popular ones) and some WordPress themes are also programmed to do that. Because social sharing has become a significant traffic source, most modern, active websites provide Open Graph data.

The website owner might not care how his link looks like when shared on some blog, but he/she sure cares how the link looks on Facebook.

Usage of Content Cards plugin is quite straight forward – You can embed a link in WordPress post editor by clicking a button in the toolbar, or by typing in a shortcode. If you embed some websites quite often, you can even white-list them as oEmbed providers. Then you can just paste the link in a separate line and it will be embeded automatically (the same way it works for Youtube, Twitter, Facebook, etc.). WPBegginer has written an extensive tutorial on how to use this plugin and they even have a video tutorial, that you can watch below.

Unlike oEmbed API (which uses <iframe> to embed content from the original site), embeding a link with Content Cards in a popular site will not cause the Reddit effect. Our plugin will make one request to the site that is being embeded and then cache the result for at least a few hours (or days, depending on settings you choose). The preview image is also cached localy.

Also, with Content Cards you are in full control of the appearance of embeded links – you can choose one of our provided skins, or use your own styling and templates, by putting those files in the directory of your theme. Our default skins are quite flexible and try to adapt to current theme by inheriting the same font-face and colors where possible.

This plugin began as an idea on Advanced WordPress Facebook group. 4 hours later, the first prototype was published on GitHub and 10 days later landed on WordPress.org. Most of the code is mine, but I’s like to thank the original author of the idea, Stanislav, who helped out a lot, too. We are quite happy with the results – Content Cards already has 100+ active installs and more than 300 downloads and we haven’t even reached the stable 1.0.0 version (it is coming very soon).

Please, try it out if you haven’t already. And leave us a nice review in the Plugin directory.

Don’t forget to share this via , , Google+, LinkedIn and Reddit.

 

Published in Plugins