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.

11 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;
      }

  2. Nele says:

    Hi,
    not always an image and a description text is displayed automatically. How can I add them manually?

    Thanks in advance.

    • johannes says:

      If the site does not provide an image then only the first heading in fetched.
      Manual editing of previews is currently not supported. Of course you can always have a look into your WordPress database (table name “zwt_wp_link_previewer”) and edit the preview there. Warning: please be aware that you can disrupt your database/previews by doing so

  3. Josh says:

    Hi Johannes, something I have noticed is some websites don’t allow images to be fetched by bots. I updated the plugin code by adding a method to linkpreviewer-utils to render an empty img tag instead of an empty string when there’s no image. The empty img tag can be styled with CSS in the theme to provide a default image. I also updated the linkpreviewer-shortcode file to deal with the different function signature for the method, since it doesn’t need the MD5 to retrieve the image from the DB. I’d love to submit my changes to the plugin, as I’m sure other users might want this functionality. Is there a way I can contribute? It looks like wordpress.org’s SVN repo isn’t set up for contributions – would you be willing to put a repo on GitHub so I can submit a pull request?

    Thanks, love the plugin!

Leave a Reply

Your email address will not be published.

*