DEV Community 👩‍💻👨‍💻

Mike Barkmin for OpenPatch

Posted on • Originally published at

[Devlog #002] Social First!

One important factor to get OpenPatch going and to spread the word about it is to talk about it and share content on social media, like Twitter, Facebook, or Reddit.

Of course, you have to have great content which is of interest to people. But you also have to present it in such a way that people will click on a shared link and examine the content in more detail. Therefore, your social media strategy needs to be on point.

For OpenPatch we will think about our social media strategy first before we start with our rebuild. We think that building an audience that is interested in the stuff we do, while we are rebuilding our platform, could be a Kickstarter.

In the upcoming posts, we will explain what we are doing and planning to do to build an audience interested in OpenPatch. In this post, we will explain how we are creating beautiful and appealing social media posts.

For social media posts, you need to understand how previews of shared links are created. All big social media networks make use of the open graph protocol. The open graph protocol basically defines some metatags which need to be placed inside the head of HTML documents. Even though there are many, we will focus on these:

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "".

For example, for our Blog (copy of our blog) we know what the title, type, and URL should be. We could also create a unique image for each blog post and just set the image manually. But we would like to have a consistent style for the images. Therefore, we have created a microservice which just creates these images on-the-fly depending on URL query parameters. It is built on top of og-image by vercel, but was adapted to fit our custom style. It supports light and dark images, usernames, avatars, markdown, and additional icons. Here are two examples:

Opengraph light

OpenPatch dark

The url for the second image looks like this:*Type%20or%20not%20to%20Type*%3F%20That%20is%20the%20Question!%20%F0%9F%A4%B7.png?theme=dark&md=1&fontSize=100px&username=mikebarkmin&

What do you think? Would you stop scrolling through social media, if you encounter one of our images?

You can find the source code of the open graph microservice here:
You can test out the open graph microservice here:

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.