https://github.com/harrisjose/social-image
OpenGraph and Twitter Image Service that runs on deta.sh
https://github.com/harrisjose/social-image
deta open-graph social-media social-share
Last synced: 3 months ago
JSON representation
OpenGraph and Twitter Image Service that runs on deta.sh
- Host: GitHub
- URL: https://github.com/harrisjose/social-image
- Owner: harrisjose
- License: mit
- Created: 2021-08-29T06:33:30.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-11-08T02:11:47.000Z (over 4 years ago)
- Last Synced: 2025-04-13T08:55:19.162Z (about 1 year ago)
- Topics: deta, open-graph, social-media, social-share
- Language: HTML
- Homepage:
- Size: 312 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Open graph image service that runs on deta.sh
[](https://go.deta.dev/deploy)
A deta micro that generates a dynamic image that you can embed in your tag.
## Usage
You can simply pass the title and description of your blog post to the micro and it will generate an image for you!
```html
Hello World
```
## Why use this service?
From [og-image](https://github.com/vercel/og-image/blob/main/README.md#why-use-this-service):
> The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter
## Deploying to deta.sh
You'll want to fork this repository and deploy your own image generator.
1. Click the fork button at the top right of this page
2. Clone the forked repo to your local machine
3. [Customize](#Customizing-the-image) the html template in public/index.html
4. Push your changes
5. Use the `Deploy to Deta` button to deploy the micro into your project
6. (Optional) Put your micro behind cloudflare and configure caching
## Customizing the image
You can start the demo server to preview how the image will look like
```bash
npm run demo
```
To customize, change the code in `public/index.html`. Query params in the URL are directly used to replace placeholders in the html file using [ETA](https://eta.js.org/).
You'll also want to have a fallback image in case something breaks. Replace the file at `public/default.png` with your own.
## Credits
- Guide on [generative images with SVG](https://georgefrancis.dev/writing/generative-svg-social-images/) by [@georgedoescode](https://twitter.com/georgedoescode)
- Examples and other approaches at [CSS Tricks](https://css-tricks.com/auto-generated-social-media-images/)
- A lot of code borrowed from [Open Graph Image as a Service](https://github.com/vercel/og-image/blob/main/README.md#why-use-this-service)