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 short 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?
We offer a lot of different integration options for Placid. Besides our REST- and URL API, we also have nocode integrations for Webflow and WordPress. (For other nocode automations, we offer solutions for Zapier & Airtable as well!)
Step 1: Create your Placid template
We're first 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. 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). Within the element settings, you can upload a default image that will appear if your article has no image – a fallback option. We named that layer "bg-img".
In the Image Settings, we 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. Play around with the size and position so it fits your design.
Click on the edit icon of the layer, name it logo and uncheck the dynamic option – we want the logo to stay the same on every share image!
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 with our different integration options.
Webflow: Set up an automation action
If you want to create these images for the content of your Webflow collections, you will have to connect your Webflow site first.
Then you can create an automation action. You will have to tell Placid from which field it should pull in the background image and map it to the bg-img layer.
You can also set an interval for the automation and decide if you want to run it manually, daily, weekly or use a Webhook to create images every time you publish new content.
Choose the collection field you want us to push your generated image to so you can use it directly in Webflow. There's a native Webflow setting that lets you choose this field for your Open Graph image settings:
WordPress: Configure your template
Follow step 4 in our Getting Started guide.
In the Placid plugin settings, you can set up your Open Graph images. 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.
URL 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 integrate button on the template's card and choose the URL API. 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 tool Social Share Preview that also exists as a 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.