How to add your logo to your social share images automatically
We get flooded with content on social media. When was the last time you scrolled through your feed mindfully, really noticing who posted what? Probably a few years ago! We're all just content-consuming zombies now.
That's why we think it's super important that you make your content distinguishable. People should instantly recognize your articles when a link pops up in their feed. If they trust you and love your brand, this will help you getting their attention.
Make your articles recognizable instantly
To help people recognize your articles as yours, you can do a few things to enhance your share images:
- Use a consistent style for photos or illustrations
- Use your brand's font and put your article title on your images
- Add your logo on your share images
Many newspapers are starting to go with the third option and put their logo on their social share images. We love it!
If you want to have similar images without having to manually create all those images, we can help you. In this article we'll give you a step-by-step guide on how to automatically generate share images with your logo on top with Placid.
Step-by-step guide to automatically put your logo onto your share images
We're going to create images that look like this:
We'll add the logo of a ficticious baking blog – Make & Bake – on to the images of their articles (which sound really delicious, by the way).
We're going to create an example template that's suitable for Open Graph images (the images that Facebook and most other social media will display in a link preview when you share your articles).
Do I need coding skills for this?
If you run a WordPress site, you won't need any coding skills to follow this tutorial. You can use our WordPress plugin to try it out - we offer free trials!
If your site is not running on WordPress, you will need some experience with coding: You'll need to embed our snippets in the header of your sites and use dynamic variables to get different background images on every page. If you're a developer, you can also use our REST API.
Step 1: Create your Placid template
You can follow along our Getting Started guide for WordPress until step 2 to set up the plugin.
First, we're going to create a template that has your logo on it. This will be like a blueprint for your share images.
In your Placid template dashboard, add a new, empty template and open it in the editor (This happens automatically if you're not a WordPress user.) Set the canvas size to the recommended Open Graph resolution (1200 x 630).
Now we can start adding the elements that we need.
Add the background image:
Add an image element and make it as big as the canvas (1200 x 630). Then position it on x=0 and y=0. Within the element settings, you can upload a default image that will appear if your article has no image – a fallback option.
Click on the edit icon of the layer and name it "bg-img".
In the Image Settings, set the image size to cover. (You can read up on all image settings in our guide to add and edit image elements!)
Add the logo:
Add another image element and upload your logo. We used a size of 566 x 92px for our Make & Bake logo. Depending on the resolution and shape of your logo, you will need a different size. Just play around a bit.
Place it where you want your logo to be. We placed it in the lower right corner.
Click on the edit icon of the layer, name it logo and uncheck the dynamic option.
Voilà, your image template is ready! This is how it looks like in the editor right now:
Save and exit the editor to return to your dashboard.
Step 2: Embed your template on your site
The second step shows you how to use your template on your site.
WordPress: Configure your template
Follow step 4 in our Getting Started guide.
Go to the settings for Open Graph images in the Placid plugin settings, activate the option Set Open Graph Image with Placid and change to the Posts tab. Click the checkmark on Set different Image Template for Posts and choose the template we have just created.
Now set the background image (titled "bg-img" like your layer) to Featured Image of Post. If you have set featured images for your posts, they will now be used as a background image of your share image, and your logo will be put on top of them.
If you want to check, you can go to the editing view of a post and scroll down to see the image that has been created.
Snippets / API: Use our embed codes
On your template dashboard, you can test your newly created template: Click on the test button on the template's card. In a popup, you will be able to quickly change the images in your template to check how it looks.
In the popup, you will find the Placid.app URL that points to the images you're creating. The parameters define what content to use to generate your image. Try uploading different images and see how the URL changes!
If you want to embed the template on your site, click on the embed button on the template's card. It will show you embed snippets that look like this for Open Graph:
<!-- Facebook OG Image --> <meta property="og:image" content="https://placid.app/u/xfis1?bg-img=%24DEFAULT%24"/> <meta property="og:image:height" content="630"/> <meta property="og:image:width" content="1200"/>
Add this to the HEAD section of the HTML of your pages and set the image dynamically with the parameters of your URL. Your parameter should end up looking something like this:
That's it! If you have integrated your template, the images will be created automatically for you now. You can go and check them while browsing your site with our free Social Share Preview browser extension.
As every image is created from your template, you can just change your template if you have a new logo, or want to change how your Open Graph images look. Then we'll regenerate all the images for you. New colours? No problem!
We hope this tutorial was fun for you! If you have any troubles along the way, you can always contact us. We're happy to help you with your templates and integration.