Skip to content
This repository has been archived by the owner on Jul 2, 2024. It is now read-only.

chrisvxd/og-impact

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

90 Commits
media
media
 
 
src
src
 
 
.gitignore
.gitignore
 
 
.prettierrc.json
.prettierrc.json
 
 
Procfile
Procfile
 
 
README.md
README.md
 
 
package.json
package.json
 
 
server.js
server.js
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

⚠️ This project has shut down. You can still self-host via puppeteer-social-image.

ogimpact.sh

Instant social images, one line of HTML. Hosted version of puppeteer-social-image.

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

Gallery   |   Template Editor   |   Pricing

Quick Start

Create your first image

Create a meta tag, and add it to the <head /> of each page:

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

When the page is shared, Facebook will show the image at https://ogi.sh?title=Hello%20World. For Twitter, see our recommended meta tags.

Try changing the background via the unsplashId param:

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

Add your logo via the logo param:

<meta
  property="og:image"
  content="https://ogi.sh?title=Hello%20World&unsplashId=phIFdC6lA4E&logo=https%3A%2F%2Fi.imgur.com%2FyKp8kEI.png"
/>

This is using the default template, basic. You can see the full documentation for basic below. Want to remove the watermark? See the instructions below.

Trying another template

Let's try another template called article by pointing to /article. The query params are broken onto new lines so you can see what's going on.

<meta
  property="og:image"
  content="https://ogi.sh/article?
           eyebrow=27%20AUGUST&
           title=INTO%20THE%20OCEAN&
           subtitle=Explore%20the%20depths%20of%20the%20deep%20blue%20sea&
           unsplashId=gGX1fJkmw3k"
/>

Neat, huh? Check out the template gallery to explore our beautiful, free templates covering various use cases.

Create your own image template

This is a pro feature.

Creating your own, branded template can be done via the Editor. It's as simple as HTML and CSS, with handlebars for templating. We also provide an API to publish custom templates if that's more your thing.

IMPORTANT: Your template will be public, so it's important to watermark the template with your brand or URL.

Using your template:

<meta
  property="og:image"
  content="https://ogi.sh/infGC5AQ&title=MIND%20BLOWN"
/>

Free Templates

basic (the default)

Renders text on a background image.

Params
  • title string - text to render
  • logo string - URL for the logo
  • unsplashId string - Unsplash image ID for the background
  • unsplashKeywords string - keywords (comma-separated) for a random image from Unsplash for the background
  • imageUrl string - URL for the background image
  • googleFont string - Google Font to render
Snippet
<meta
  property="og:image"
  content="https://ogi.sh?title=Hello%20World&unsplashId=WLUHO9A_xik"
/>

article

Display a title and subtitle on a background image, with an optional eyebrow

Params
  • title string - title text
  • subtitle string - subtitle text
  • eyebrow string - eyebrow text that renders above the title. Use for date
  • logo string - URL for the logo
  • unsplashId string - Unsplash image ID for the background
  • unsplashKeywords string - keywords (comma-separated) for a random image from Unsplash for the background
  • imageUrl string - URL for the background image
  • googleFont string - Google Font to render
Snippet
<meta
  property="og:image"
  content="https://ogi.sh/article?
           eyebrow=27%20AUGUST&
           title=INTO%20THE%20OCEAN&
           subtitle=Explore%20the%20depths%20of%20the%20deep%20blue%20sea&
           unsplashId=gGX1fJkmw3k"
/>

fiftyfifty

Multi-use template for an array of use cases

Params
  • title string - title text
  • subtitle string - subtitle text
  • logo string - URL for the logo
  • unsplashId string - Unsplash image ID for the background
  • unsplashKeywords string - keywords (comma-separated) for a random image from Unsplash for the background
  • imageUrl string - URL for the background image
  • googleFont string - Google Font to render
Snippet
<meta
  property="og:image"
  content="https://ogi.sh/fiftyfifty?title=INTO%20THE%20MOUNTAINS"
/>

Integrations

Recommended Meta Tags

Here's a full list of the social tags we recommend using on your webpage. These will be picked up by social platforms whenever your webpage is shared in order to enhance the preview.

Place these inside the <head> of your webpage, and make sure they're rendered server-side.

Open Graph

Used by Facebook and many other platforms.

<meta property="og:image" content="https://ogi.sh?title=Hello%20World" />
<meta property="og:site_name" content="EuroTravel" />
<meta property="og:type" content="website" />
<meta property="og:title" content="European Travel Destinations" />
<meta property="og:description" content="Offering tour packages for groups." />
Twitter

Used by Twitter.

<meta name="twitter:image" content="https://ogi.sh?title=Hello%20World" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="European Travel Destinations" />
<meta name="twitter:description" content="Offering tour packages for groups." />

Note that Twitter uses name instead of property.

See this article for a much more in-depth explanation of meta tags.

Instagram

Call the API directly and specify the size parameter with value as one of:

  • ig-landscape
  • ig-portrait
  • ig-square
  • ig-story
https://ogi.sh/preview?title=Hello%20World&size=ig-square

Pinterest

Call the API directly and specify the size parameter with value pinterest.

https://ogi.sh/preview?title=Hello%20World&size=pinterest

License

MIT © Chris Villa

About

A free API for generating social media images

ogimpact.sh

Topics

api social facebook twitter open-graph saas opengraph puppeteer saasify

Resources

Readme
Activity

Stars

230 stars

Watchers

7 watching

Forks

35 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages