Social Media Cards with @vercel/og

1

Unsplash

After I worked my way around the size limitation of the edge function, The deployment was successful but the og endpoint responded with an error 500. The error in the vercel log did not help at all. So I started to look at the code and began to comment out parts of the code. Fortunately It didn't take very long to find out that the image of the post was the problem. It looked like there is another size limitation. The image was loaded from Unsplash and about 7mb in size. Luckily Unsplash has an api to resize the image, So we can fetch the image in exactly the size we need.

#Photos & Graphics #Image Marketplace #Vector Art 487 social mentions

2

Social Share Preview

Now we can test the results with socialsharepreview.

#Social Media Tools #Productivity #Wordpress Plugins 9 social mentions

3

Opentype.js

With an SVG we can define our image as code, which is pretty neat. But SVG is not able to wrap texts. We can use opentype.js to calculate the width of our texts and to wrap it manually. Finally we have to convert the SVG to a PNG, because the most of social media platforms do not support SVG. This approach could work, but requires a lot of code and it is very complicated.

#Design Tools #Image Marketplace #Web Icons 2 social mentions

4

Figma

The simplest way is to create the social media cards manually. Just open figma or a similar tool and create a card for each post. This approach works, but it is very error prone and time consuming. We had to remember to create a new card, every time we create a new post.

#Design Tools #Prototyping #Design Collaboration 101 social mentions

5

Cloudinary For Video

We could also use an external service like cloudinary. The post of Jason describes this approach very detailed. Cloudinary is able to break texts on a certain width, But the api is not very intuitive and the largest part of the card is an image which must be build with an external tool.

#Developer Tools #Javascript UI Libraries #Runtime 112 social mentions