leocardoso94 / social-tags-webpack-plugin

A wepback plugin to generate social meta-tags

social-tags-webpack-plugin

social-tags-webpack-plugin is a webpack plugin that generates a the meta-tags to facebook and twitter, like this:

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="http://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="http://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="http://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="http://example.com/image.jpg">

Install

npm install --save-dev social-tags-webpack-plugin
yarn add -D social-tags-webpack-plugin

Usage

In your webpack.config.js:

// ES6+
const SocialTags = require('social-tags-webpack-plugin')

...

plugins: [
    ...
    new SocialTags({
      appUrl: 'http://example.com/',
      facebook: {
        'fb:app_id': "123456789",
        'og:url': "http://example.com/page.html",
        'og:type': "website",
        'og:title': "Content Title",
        'og:image': 'src/img/book.png',
        'og:description': "Description Here",
        'og:site_name': "Site Name",
        'og:locale': "en_US",
        'og:article:author': "",
      },
      twitter: {
        "twitter:card": "summary",
        "twitter:site": "@site_account",
        "twitter:creator": "@individual_account",
        "twitter:url": "http://example.com/page.html",
        "twitter:title": "Content Title",
        "twitter:description": "Content description less than 200 characters",
        "twitter:image": './src/img/book.png'
      },
    })
]

Test your page with :

• 🛠 Facebook Sharing Debugger
• 🛠 Twitter Card Validator

social-tags-webpack-plugin's Issues

deprecation warning emitted when used with webpack 4

Using this plugin with webpack 4 produces this warning:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

presumably from this line:

social-tags-webpack-plugin/src/index.js

Line 33 in a007e2e

compiler.plugin('emit', (compilation, callback) => {

Is there a compiler.hooks alternative that can be used inside the webpack 4 branch?

Image tags write local import filepath, instead of web ready export URL

Issue:

With a webpack config something like...

module.exports = {
  entry: {
    //our main app entry
    app: path.resolve('src'),
  },
  output: {
    //output to path
    path: path.resolve('dist'),
    //output name, including path
    filename: 'app/[name].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png)([\?]?.*)$/,
        loader: 'file-loader',
        query: {
          limit: 10000,
          name: 'assets/[name].[ext]'
        },
        include: /src/
      },
  },
  plugins: [
    new SocialTags({
      appUrl: 'http://foo.com',
      facebook: {
        'og:image': path.resolve('src/assets/images/share.jpg'),
      }
    })
  ]
}

the html output is something like:

<meta property="og:image" content="http://foo.com/Volumes/Data/Users/me/Work/foo.com/src/assets/images/share.jpg" />

expected result was:

<meta property="og:image" content="http://foo.com/assets/share.jpg" />

image tag generation not working

Thanks for this library, looks very useful. However, I tried to set this up using a config that looks like:

      new SocialTags({
        appUrl: 'https://www.mywebsite.com/',
        facebook: {
          'og:url': 'https://www.mywebsite.com',
          'og:type': 'website',
          'og:title': 'mywebsite',
          'og:image': './src/assets/locationbackgroundxlarge.jpg',
          'og:description': 'blah blah blah',
        },
        twitter: {
          'twitter:card': 'summary_large_image',
          'twitter:site': '@mywebsite',
          'twitter:image': './src/assets/locationbackgroundxlarge.jpg',
        },
      }),

and when I build, the plugin just hangs. I traced this down to this code:

social-tags-webpack-plugin/src/process_image/index.js

Line 21 in a007e2e

error.code === 'ENOENT' ? processImage(imagePath, publicPath) : console.error(error);

readImage is throwing ENOENT, and therefore processImage is being called in an endless loop.

That leaves me with two questions:

• readImage strips the path to the image before trying to load it, and the process.cwd() in this code is the root of my source tree. I don't see how that is supposed to work - why strip the path before trying to read the file?
• why does this code try again infinitely on ENOENT?

I'm puzzled as to what I'm missing here :)

Getting error "callback is not a function" with Webpack 4.10

Hi, first of all, thanks a lot for this plugin, it is really nice and helpful 👏 👍
I'm using it on Webpack 3 projects and it works well, but using it with Webpack 4.10 doesn't work (I didn't test previous versions of Webpack).

I get the following error :

  - index.js:72
  [social-tags-webpack-plugin]/dist/index.js:72:11

  - new Promise
  - Hook.js:35 AsyncSeriesWaterfallHook.lazyCompileHook [as _promise]
    [tapable]/lib/Hook.js:35:21

  - index.js:673
    [html-webpack-plugin]/index.js:673:47

  - index.js:178 Promise.resolve.then.then.then.then.then.then.html
    [html-webpack-plugin]/index.js:178:18

I don't think it's related to the html-webpack-plugin, I'm using both social-tags and html-plugin together in other projects and it works well.

Any help would be greatly appreciated 😄