chrisvxd / og-impact

A free API for generating social media images
https://ogimpact.sh
230 stars 35 forks source link

Understanding the code #8

Closed RockyDuck closed 4 years ago

RockyDuck commented 4 years ago

Hi Chris, good job congratulations on the hard work!

I would like to understand where we can apply your code on pages on social media

I want to create pages that can in a way build content, both on instagram and twitter, in a somewhat automated way.

chrisvxd commented 4 years ago

Hey @RockyDuck!

OG IMPACT is designed to need minimal integration. The best way to use it is with meta tags. If you're new to meta tags, I recommend reading this guide.

The short version is: you place a meta tag in the <head> of each of your web pages, and when your page is shared to social media, the social media platform scrapes the page, finds the image and renders it.

To create an image, you can just call the URL and adjust the params: http://ogi.sh/?title=Hello%20World

Try changing the Hello%20World and see what happens. You can customise a lot of options as described in the template examples.

Now, if you want this image to show every time your page is shared to Facebook, you need to put this into a <meta> tag in the <head> of your pages.

Here's the snippet:

<meta property="og:image" content="https://ogi.sh?title=Hello%20World" />

You probably want to change the query parameters for each page on your website, so each page is unique.

Here's how it might look in your web page:

<html>
  <head>
    <title>My web page</title>
    <meta property="og:image" content="https://ogi.sh?title=Hello%20World" />
  </head>
  <body>
    Hello, World
  </body>
</html>

For Twitter support, you need to add the following tags:

<meta name="twitter:image" content="https://ogi.sh?title=Hello%20World" />
<meta name="twitter:card" content="summary_large_image" />

If you prefer, you can also save the images and share them however you want.

I don't currently support Instagram sizes yet, but hope to add it in #9.


Most of this is in the project README, if you haven't already read through it. Let me know if you have any more questions!