Beautiful Link Preview for WordPress

Create Link Previews similar to common social networks when you share a link.

It works by fetching the link URL and examining either the facebook Open Graph properties or Twitter card tags including any preview image.

Link Previews with Title, Description and Image.

Any fetched title, description or image is stored inside your WordPress’ own database and subsequently used from there to render the beautiful link previews.

Demo

Full layout

zeitwesentech | fullstack software developer
fullstack software developer focused on java technologies

Compact layout

zeitwesentech | fullstack software developer
fullstack software developer focused on java technologies

Try it now!

  • Log into your WordPress Admin
  • Go to Plugins – Add new
  • Search for “Beautiful Link Preview”, install and activate it
  • Inside an HTML block in your editor paste the following shortcode:
[beautiful_link_preview url="https://zeitwesentech.com"]
  • adapt the URL, click save/publish and view your post/page.

Screenshots

Customizable

Choose from full and compact layout.

Full layout
Compact layout
  • Hide title, description or image if you do not like what was fetched
  • Override maximum chars of title or description to show
  • Override CSS Styling: HTML elements are styled via CSS. Just override any classes that start with name zwt-wp-lnk-prev* in your “Additional CSSS” section of your theme.

Links

Find the plugin at the official WordPress.org Plugin Directory: https://wordpress.org/plugins/beautiful-link-preview

Credits

If you like this plugin please support my work by donating some coffees.

This plugin is brought to you by zeitwesentech.com.

5 thoughts on “Beautiful Link Preview for WordPress

  1. macguy says:

    Great plug in. Works wonderfully. Is there any way to control the width of the plug in? Perhaps a width short code? It seems to go very wide on a blog post when the page is wider. Thanks!

    • johannes says:

      thanks four your feedback!
      you can change the styling of the block via css, e.g. via
      WP-Admin – Appearance – Customize – Additional CSS.
      Add the following to adapt width to 50%:

      .zwt-wp-lnk-prev.full{
      width: 50%!important;
      }
      .zwt-wp-lnk-prev.compact{
      width: 50%!important;
      }

Leave a Reply

Your email address will not be published.

*