WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Add Links as Content Cards in WordPress

How to Add Links as Content Cards in WordPress

Last updated on September 9th, 2015 by Editorial Staff
154 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Links as Content Cards in WordPress

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?

Preview of a content card embed in a WordPress post

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

Subscribe to WPBeginner

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.

Adding a content card in post editor

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.

Content card embed in post editor

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.

Settings page for content cards plugin

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.

154 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

20 Comments

Leave a Reply
  1. Brent Wilson says:
    Sep 30, 2020 at 3:59 am

    This plugin has been removed. Is there no alternative?

    Reply
    • WPBeginner Support says:
      Sep 30, 2020 at 9:56 am

      We do not have a specific alternative at the moment, we will be sure to keep an eye out for one we would recommend.

      Reply
  2. Dave says:
    Jun 4, 2019 at 7:33 am

    This is really bad advice.. the plugin has some MAJOR flaws and appears to be abandoned…

    Reply
    • WPBeginner Support says:
      Jun 4, 2019 at 11:50 am

      Thank you for letting us know, we’ll be sure to look into updating this article from 2015 with a new plugin as we’re able :)

      Reply
  3. Jeff Whitmore says:
    May 24, 2019 at 9:21 am

    Got the plugin to work, then when I published, BAM. Blank page except for the words “The site is experiencing technical difficulties. Please check your site admin email”

    Reply
    • WPBeginner Support says:
      May 24, 2019 at 10:22 am

      If you’re still running into that issue, you would want to take a look at our troubleshooting guide here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/

      Reply
  4. Lazarus says:
    Jan 11, 2019 at 7:33 am

    Hallo,

    The plugin doesn’t work with WordPress 5.0.3. Is there any patch or the new version?

    Reply
    • WPBeginner Support says:
      Jan 11, 2019 at 1:38 pm

      You would want to reach out to the Plugin’s support for information about updates to the plugin. If you mean it is not tested then you would want to take a look at our article: https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/

      Reply
  5. Dennis Herman says:
    Sep 22, 2018 at 3:30 pm

    This is great. Exactly what I was looking for. I’ll give it a try.

    Reply
  6. yair says:
    Sep 19, 2015 at 11:11 pm

    i did the content card but the imag is blank …
    do ineed to install the face book open grafe plaug in first?

    Reply
    • WPBeginner Support says:
      Sep 21, 2015 at 2:32 pm

      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.

      Reply
  7. Steve Media says:
    Sep 9, 2015 at 7:03 pm

    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.

    Reply
    • Arūnas says:
      Sep 11, 2015 at 4:47 pm

      Need some help? :)

      Reply
  8. Avil Beckford says:
    Sep 9, 2015 at 4:41 pm

    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

    Reply
  9. Abhishek says:
    Sep 9, 2015 at 7:46 am

    This is what i needed, Thanks.

    Reply
  10. Rikki says:
    Sep 9, 2015 at 3:37 am

    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?

    Reply
    • WPBeginner Support says:
      Sep 9, 2015 at 2:36 pm

      You can safely install the plugin. We have tested it with WordPress 4.3.

      Reply
      • Rikki says:
        Sep 10, 2015 at 2:51 am

        Thank you. I will give it a try then, :-).

        Reply
  11. fergal walsh says:
    Sep 8, 2015 at 4:33 pm

    I would use this plugin but incompatible with latest releases of wordpress :(

    Reply
    • WPBeginner Support says:
      Sep 8, 2015 at 8:08 pm

      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.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Shop Plugins
Shop Plugins Coupon
Get 15% OFF on Shop Plugins WordPress WooCommerce plugins.
Rocket coupon code
Rocket Coupon
Get 50% OFF on Rocket managed WordPress hosting plans for 3 months.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.