**⚠️ This project has shut down. You can still self-host via [puppeteer-social-image](http://github.com/chrisvxd/puppeteer-social-image).** ---

ogimpact.sh

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

```html ```

Gallery | Template Editor | Pricing

## Quick Start ### Create your first image Create a meta tag, and add it to the `` of each page: ```html ```

When the page is shared, Facebook will show the image at https://ogi.sh?title=Hello%20World. For Twitter, see our [recommended meta tags](#recommended-meta-tags). Try changing the background via the `unsplashId` param: ```html ```

Add your logo via the `logo` param: ```html ```

This is using the default template, `basic`. You can see the [full documentation](#free-templates) for `basic` below. Want to remove the watermark? See the [instructions below](#remove-the-watermark). ### 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. ```html ```

Neat, huh? Check out the [template gallery](#free-templates) to explore our beautiful, free templates covering various use cases. ### Create your own image template > This is a [pro feature](https://ogimpact.sh/pricing). Creating your own, branded template can be done via [the Editor](http://ogimpacteditor.netlify.com). It's as simple as HTML and CSS, with [handlebars](https://handlebarsjs.com/guide/#what-is-handlebars) for templating. We also provide [an API](https://ogimpact.sh/docs#operation/publishPOST) 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: ```html ```

### 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](https://unsplash.com/) image ID for the background - `unsplashKeywords` _string_ - keywords (comma-separated) for a random image from [Unsplash](https://unsplash.com/) for the background - `imageUrl` _string_ - URL for the background image - `googleFont` _string_ - Google Font to render ##### Snippet ```html ``` #### `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](https://unsplash.com/) image ID for the background - `unsplashKeywords` _string_ - keywords (comma-separated) for a random image from [Unsplash](https://unsplash.com/) for the background - `imageUrl` _string_ - URL for the background image - `googleFont` _string_ - Google Font to render ##### Snippet ```html ``` #### `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](https://unsplash.com/) image ID for the background - `unsplashKeywords` _string_ - keywords (comma-separated) for a random image from [Unsplash](https://unsplash.com/) for the background - `imageUrl` _string_ - URL for the background image - `googleFont` _string_ - Google Font to render ##### Snippet ```html ``` ### 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 `` of your webpage, and make sure they're rendered server-side. ##### Open Graph Used by Facebook and many other platforms. ```html ``` ##### Twitter Used by Twitter. ```html ``` > Note that Twitter uses `name` instead of `property`. See [this article](https://css-tricks.com/essential-meta-tags-social-media/) 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 ```