Introduction

Welcome to the Beautiful Link Preview Plugin. This plugin allows you to create previews of links 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. Any title, description or image is stored inside this Wordpress' own database and subsequently used from there to render the beautiful link previews.

Note: some websites will not always have an image preview available. In that instance this plugin will render an <img> tag with no src property, and an additional class of empty. You can set a default image for this via CSS. See the CSS Styling section below for an example.

If you find any bugs please report them to the Support Tab at the official Wordpress Plugin Directory and I will be happy to find a solution.

Usage - Gutenberg Editor (WordPress version 5.5 or newer)

  1. Navigate to the plugin settings page in the WP Admin and enable the plugin.
  2. You will now see a Beautiful Link Preview item in your Gutenberg block menu when editing posts and pages with the Gutenberg editor. Provide the URL, click "Save", and you will see your preview rendered in place.
  3. You may also override any of the plugin’s settings on a per-block basis via the override controls.
  4. See the CSS Styling section below for handling previews without images.
  5. Note: if you disable the plugin from the plugin settings page, none of the link preview blocks on your posts and pages will render.

Usage (WordPress Classic editor or version older than 5.5)

  1. add a new HTML block in your (Gutenberg) blog or page editor and copy this shortcode into it:
    [beautiful_link_preview url="https://zeitwesentech.com"]
  2. adapt the URL, click save/publish and view your post/page

Customization

The above shortcode renders each preview with the given default options in Tab Settings.
However you can also override any option on a per-shortcode basis:

Layout

[beautiful_link_preview layout="full" url="https://zeitwesentech.com"]
[beautiful_link_preview layout="compact" url="https://zeitwesentech.com"]

Target

[beautiful_link_preview target="_blank" url="https://zeitwesentech.com"]
[beautiful_link_preview target="_self" url="https://zeitwesentech.com"]
[beautiful_link_preview target="_parent" url="https://zeitwesentech.com"]
[beautiful_link_preview target="_top" url="https://zeitwesentech.com"]

Hide items

[beautiful_link_preview no_img url="https://zeitwesentech.com"]
[beautiful_link_preview no_title url="https://zeitwesentech.com"]
[beautiful_link_preview no_desc url="https://zeitwesentech.com"]

Max. length

[beautiful_link_preview max_title_chars="20" url="https://zeitwesentech.com"]
[beautiful_link_preview max_desc_chars="60" url="https://zeitwesentech.com"]

CSS Styling

You can override any CSS classes starting with name "zwt-wp-lnk-prev*" to fulfill your styling needs. Normally this can be done in the "Additional CSS" section of your theme.

To set a default image for URLs that have no preview image, this is an example of how to define one using CSS.
.zwt-wp-lnk-prev-img.empty { content: url("/path/to/your/image"); }

Manage Previews

In Tab Link Previews you can see any link previews that have been fetched by this plugin. Here you can Refresh or Delete any item.

Important: When you delete a preview do not forget to also remove the shortcode on your page or post as the preview will be refetched once it is displayed the next time!

Legal Terms & Conditions

Using this plugin to render beautiful link previews works by fetching the content of the given URL and extracting meta data given in form of facebook Open Graph properties, Twitter card tags or by simply extracting parts of content like title, first h1 heading or similar.
Any fetched information - including preview images - will be stored to this Wordpress instances' database and subsequently used from there to render any beautiful link previews.

IMPORTANT: By using this plugin you declare that you have all the legal rights to copy, distribute and use all data fetched from any external third party website!

The creator of this plugin provides the functionality as is and can not be held responsible for legal violations of any kind!

License: GPL-2.0+

Links: