How to Use the Bannerbear WordPress Plugin to Generate Dynamic Open Graph Images

The Bannerbear WordPress Plugin is here! Learn how to add the plugin to WordPress and set up a Signed URL to create custom images automatically for your website.
by Josephine Loo · December 2022

Contents

    In the tutorial How to Add Auto-Generated Custom Open Graph Images to WordPress Using Bannerbear, we have learned how to add a Bannerbear Simple URL to the header of a WordPress website via code injection to generate Open Graph images dynamically for WordPress posts.

    The Simple URL is a highly customizable way to generate dynamic images automatically. You can pass any value, including variables that can be retrieved using WordPress Functions to your Bannerbear design template via the URL.

    If the values are some common attributes of a WordPress post (eg. title, date, featured image, etc), there’s an easier and faster alternative. Let me introduce to you—the Bannerbear WordPress Plugin!

    Bannerbear WordPress Plugin

    The Bannerbear WordPress Plugin allows you to use Bannerbear’s Signed URL functionality on WordPress websites without having to add custom code. Similar to the Simple URL, it helps you to generate custom images that are exclusive to each post automatically.

    The major difference between the two types of URLs is that a Signed URL is encrypted with HMAC while a Simple URL is not.

    Using the plugin, you can create a Signed URL for your Bannerbear design template and configure value mapping for the modifiable dynamic objects in the template directly from the WordPress Admin Dashboard.

    You can choose the values from a list of WordPress variables, map them to the dynamic objects, and choose where to display the images.

    wordpress variables selection.png

    Pre-requisites

    To use the Bannerbear WordPress Plugin, you will need a Bannerbear design template and its project API key. The template can consist of layers of static and dynamic objects like images, texts, shapes, etc.

    The values of the dynamic objects are modifiable using API. In our case, we will only have to map the WP variables to these objects in the WP Admin Dashboard to modify the values as the plugin will do the work for us.

    Bannerbear Design Template

    Create a Bannerbear project and add a template to it. This will create a blank canvas and you can design it by adding layers of static and dynamic objects. Otherwise, you can duplicate this tutorial’s template to your project and modify it to your liking.

    bannerbear template.png

    In the template, we have these modifiable dynamic objects:

    • Text - title, date, author, written_by
    • Image - image_container

    They will be shown in the WP Admin Dashboard after you create a Signed URL using the Bannerbear WordPress Plugin. We will do this in the following section.

    🎨 Find more readily available templates from our template library!

    Bannerbear Project API Key

    The project API key will be needed to access your Bannerbear project and design template from the WP Admin Dashboard. It can be found in the project’s Settings.

    api key.png

    Using the Bannerbear WordPress Plugin

    Step 1. Install the Bannerbear WordPress Plugin

    Log in to your WP Admin Dashboard. In the Plugins tab, click “Add New” and search for the Bannerbear plugin. Click “Install Now” and activate the plugin after the installation is complete.

    search bannerbear plugin.png

    Alternatively, you can download the plugin in a zip file and upload it manually.

    upload zip file to install plugin install WordPress plugin from a zip file and activate it

    After installing and activating the plugin, you should see the Bannerbear tab in the admin menu.

    bannerbear tab.png

    Step 2. Create a Signed URL in WordPress

    Normally, you will need to generate a Signed URL from your Bannerbear account dashboard but with this plugin, you can generate it directly in WordPress using your Bannerbear project API key.

    Go to Bannerbear Plugin.

    WP admin screenshot

    Select "Add New" and paste your API Key.

    insert API key in Bannerbear WordPress plugin

    All templates in the project will be shown. Select the template that you want to use to generate dynamic images for your WordPress website so that a Signed URL will be created for it.

    choose a template to create a Signed URL

    Step 3. Map the WP Variables to Your Template Objects

    Click on the Signed URL created to configure the value mapping.

    WP Signed URL.png

    The modifiable objects/layers in the template will be listed and each of them will have a dropdown menu that shows a list of WP variables available for mapping.

    The image below shows an example of mapping the URL of the current post’s featured image to the image_container object.

    mapping.png

    For text objects like title, author, date, and written_by, you will see additional fields for color and background. These selections allow you to set the colors for the text and its background, rather than using the original colors in the template.

    For example, I want to set the text color to this shade of pink, which the hex code is #FF7474.

    color hex.png

    🐻 Bear Tips : You can get your hex color code using a color picker.

    But the hex color code is not one of the available WP variables. What should we do?

    We can set it using Custom Fields. They are hidden by default but you can follow this guide to enable them.

    After enabling Custom Fields, go to your post’s text editor and add a custom field named “_custom_og_color”. S_et its value to the hex color code.

    custom fields.png

    Then, in the Bannerbear Signed URL configuration page, select “Current post’s custom field” for the title’s color and enter “custom_og_color” to map the hex color code (#FF7474) to it.

    custom color.png

    You can create more custom fields for other colors and use them for different text objects. The same goes for background colors.

    Step 4. Select Where to Display the Image

    Choose where you want to apply the template/Signed URL to display the generated images. They can be displayed in the content of your posts/pages or used as the Open Graph image on social media.

    display.png

    Other than selecting the options provided to display the images before or after the content, you can also display them in other places by embedding the shortcode or PHP snippet.

    Both of them will be generated automatically after you create a Signed URL in WordPress. Copy and paste them into the text editor or your theme’s template files to display the images wherever you want.

    embed code.png

    Save the configurations and the Signed URL is ready to generate images for posts on your website on the fly!

    Using the Dynamic Images

    Display Before/After Content

    As mentioned, you can display the images before or after your content by selecting the relevant options.

    This is what it looks like when you select “Display before content” :

    display before content.png

    🐻 Bear Tips : Use CSS—depending on your WordPress theme, your images might not be centered-justified but you can always position them using CSS.

    Display Within Content

    Embed

    In the Signed URL configuration, you have options to display the images before or after the content. If you want to display them within the content, you should use the shortcode or PHP snippet instead.

    embed.png

    Block/Widget

    Another option is to use the Bannerbear Image widget in the text editor. After adding the Bannerbear Image Block to the editor, you will see a list of Signed URLs created using the plugin. Select the one you want to use.

    bannerbear widget.png

    You can also use the Bannerbear widget to display them in your site header, footer, sidebar, and other widget areas.

    This gives you the flexibility to choose where to place the images, so that your website and content will be more engaging.

    embed result.png

    Use as the Open Graph Image

    By selecting “Use as open graph image” , the image generated will be displayed when the post is shared on social media. It will give social media users a preview of what the post is about before clicking on the link.

    You can use Twitter Preview Card Tool or Facebook Open Graph Preview Tool to preview how they will look like without actually posting on social media.

    Here's a preview generated using the Twitter Preview Card Tool:

    OG preview.png

    Get the Most out of Bannerbear

    The Bannerbear WordPress Plugin helps you generate dynamic images quickly for WordPress websites without having to work with the API directly. However, if you only use the plugin, you may miss out on some of the more advanced functionalities that the API offers.

    Using the API, you can:

    👉🏻 Generate videos automatically

    👉🏻 Transcribe a video with auto-transcribed subtitles

    👉🏻 Use multiple templates to generate images at once

    👉🏻 Create animated GIFs

    … and more. If you want to get the most out of Bannerbear, check out the API documentation.

    That said, the fastest way you can start generating dynamic images for your WordPress website is by using the Bannerbear WordPress Plugin. Add it to your website and try it for yourself now. Happy building!

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    FFmpeg 101: Top 10 Command Options You Need to Know (with Examples)

    FFmpeg is a complete, cross-platform solution to edit media files programatically. With hundreds of command options available, it is easy to feel overwhelmed. In this article, we’ll go through 10 essential FFmpeg options you should know.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    6 Pro Tips for Optimizing Web Automation Using Puppeteer

    Using Puppeteer to automate web browser-related tasks is a great way to speed up your work as a developer. In this article, we have listed six tips that will help you optimize them.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to Use the Bannerbear WordPress Plugin to Generate Dynamic Open Graph Images
    How to Use the Bannerbear WordPress Plugin to Generate Dynamic Open Graph Images