Skip to content

Generate OG images on the fly for your website through SocialSplash

License

Notifications You must be signed in to change notification settings

socialsplash/nuxt-socialsplash-module

Repository files navigation

Nuxt SocialSplash module

npm (scoped with tag) npm js-standard-style CircleCI

Generate OG images for your webpages through SocialSplash

Table of Contents

Install

$ npm install --save nuxt-socialsplash-module
// or
$ yarn add nuxt-socialsplash-module

Getting Started

Add nuxt-socialsplash-module to modules section of nuxt.config.js.

{
  modules: [
    'nuxt-socialsplash-module',
  ]
}

Usage

To generate an image, you can use the generate method by passing the theme to use and it's parameters. To know what parameters to use, please refer to the theme documentation in www.socialsplash.xyz.

this.$socialsplash.generate('enterprise-website', {
  title: 'Increase your social media reach with SocialSplash',
  subtitle: 'Visit website',
  website: 'www.socialsplash.xyz',
  logo_url: 'https://socialsplash.s3.fr-par.scw.cloud/static/logos/socialsplash.png',
  background: '#2b6cb0'
})

Per example, in your head hook you could do:

head () {
  const image = this.$socialsplash.generate('enterprise-website', {
    title: 'Increase your social media reach with SocialSplash',
    subtitle: 'Visit website',
    website: 'www.socialsplash.xyz',
    logo_url: 'https://socialsplash.s3.fr-par.scw.cloud/static/logos/socialsplash.png',
    background: '#2b6cb0'
  })

  return [
    { hid: 'og:image', name: 'og:image', content: image },
    { hid: 'og:image:width', name: 'og:image:width', content: '1200' },
    { hid: 'og:image:height', name: 'og:image:height', content: '628' },
    { hid: 'twitter:image', name: 'twitter:image', content: image },
    { hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
  ]
}

Module options

List of possible options in the module:

Option Default Required Description
domain https://images.socialsplash.xyz false Use a different domain if needed as base. This should not be the case most of the time.

License

MIT License

About

Generate OG images on the fly for your website through SocialSplash

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published