Do you like how social media sites such as Facebook and Twitter show link previews when you paste a link in your status? Wouldn’t it be nice if you could add similar content cards functionality on your site? In this article, we will show you how to add links as content cards in WordPress.
What is a Content Card?
Very similar to Twitter Cards or Facebook Link Preview, content cards allow you to display a summary of the link you share on your site.
Think of it as embedding a tweet or embedding a video in your content, except now you’re sort of embedding other articles.
Just like the image in the preview above. Let’s take a look at how content cards work.
How Does Content Cards Work?
Content cards uses open graph meta data to pull the link information. If you don’t know about open graph meta data, then you need to check our guide on how to add Facebook open graph meta data in WordPress.
Facebook started the open graph protocol and now it is used by millions of websites around the world. It allows site owners to provide structured information about an article.
This data is used by Facebook, twitter, etc to show information when someone shares the link on their platform.
Due to popularity and reach of Facebook’s social network most websites have open graph meta data in their articles.
Content Cards also come with a beautiful fallback for websites that do not have open graph meta data. If you add such a link, then it will use the default placeholder image for featured image and will show the linked page’s title.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
How to Add Content Cards in WordPress?
First thing you need to do is install and activate the Content Cards plugin. Upon activation, you can head over to create a new post or edit an existing one.
On the post editor screen, you will notice a new button in visual editor labeled CC.
Clicking on it will show you add content card popup.
Simply provide the link to the page you want to embed as content card, check the target box if you want to open the link in a new window, and click on OK button to insert the link in your post.
You will notice that the link will immediately transform into a content box. It will show an image for the article, title, description and the name of the website.
Article image is displayed directly from the link you shared, and it is not stored on your WordPress site.
You can also add the content card using a shortcode like this:
[contentcards url="http://wpbeginner.com"]
After adding content cards to your post, you can save and preview it. Notice that the content cards are fully responsive and will look great on all devices.
Automatically Convert Links into Content Cards for Specific Sites
If you just want to create content cards for specific sites, then you can do that in plugin settings. Go to Settings » Content Cards and add the domain names that you want to whitelist.
Sites you add here will act like YouTube Embeds in WordPress. All you will need to do is add a link and the plugin will automatically convert it into a content card.
Changing The Look of Content Cards
The plugin comes with two default skins for content cards that can be changed from the plugin’s settings page.
You can also change the appearance of content cards by copying the default skin files to your theme or child theme directory.
The skin files are located in /wp-content/plugins/content-cards/skins/default/ folder. You will need an FTP client to download the files to your computer and then upload them back to your theme or child theme directory.
After that you can edit these files using any plain text editor. If you find it difficult to edit and change CSS, then you may want to try CSS Hero. It is an easy to use plugin that allows you to modify CSS using a simple GUI.
We hope this article helped you add beautiful content cards for external links in WordPress. You may also want to see our guide on how to easily create responsive image galleries in WordPress with Envira.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
This is great. Exactly what I was looking for. I’ll give it a try.
i did the content card but the imag is blank …
do ineed to install the face book open grafe plaug in first?
If the link you added with content cards was for one of your own sites, then you need to install Facebook open graph. If it was an external site, then the site needs to be using Facebook open graph. You can also set a default fallback image in the plugin settings, this image will be used when no image is found.
Now if I can only find a good solution to export firefox bookmarks, sort by url, pull all sites with “thisdotcom” into one category and all sites with “thatdotcom” into another category.. mass import into wordpress – auto sort by category, date url added – and pull these content cards.. very cool it would be.
Need some help?
I did a curated post today, so I tested it with content cards and it works fine. The preview image size is quite large though. Thanks for the post.
Avil Beckford
This is what i needed, Thanks.
I am getting the same message. In the list of plugins it says explicitly that the plugin is not compatible with my WP version (which is 4.3.) A glitch?
You can safely install the plugin. We have tested it with WordPress 4.3.
Thank you. I will give it a try then, :-).
I would use this plugin but incompatible with latest releases of wordpress
It is compatible with WordPress 4.3, which is the latest version. Also please checkout our article should you install plugins not tested with your WordPress version.