Menu
I have tried to share images on facebook with React. I have dynamically added og:image tags using react-helmet npm and also pre-rendered the build using react-snapshot. while view the source the og:image URL's are present but when I try to share the image it won't share.
if I provide the static og:image URL in index.html the facebook works as expected. I have tried the pre-render with react-snapshot and add meta tags
import {Helmet} from "react-helmet";
fbshare1 = () => {
window.open(
'https://www.facebook.com/sharer.php?u='+encodeURIComponent(window.location.href),
'facebook-share-dialog',
'width=626,height=436');
return false;
}
<Helmet>
<title>About us Title</title>
<meta property="og:url" content="https://little-parrot-19.localtunnel.me" />
<meta property="og:title" content="Welcome to Passup" />
<meta property="og:description" content="A URL with no session id or extraneous parameters. All shares on Facebook will use this as the identifying URL for this article." />
<meta property="og:image" content="https://external-preview.redd.it/QB5Nv2dee5NmtpgFOxdjBrfp4MitMx_7OPoYVOLceVk.jpg?width=960&crop=smart&auto=webp&s=1fb548e43b8e5fe9b2fd7ba26af6da4221efcddb" />
<meta property="og:image:type" content="image/png" />
<meta property="og:type" content="Free Web" />
<meta property="fb:app_id" content="12345678900" />
<meta property="article:author" content="Passup" />
<meta property="article:publisher" content="Passup trioangle" />
<meta property="og:image:secure_url" content="https://external-preview.redd.it/QB5Nv2dee5NmtpgFOxdjBrfp4MitMx_7OPoYVOLceVk.jpg?width=960&crop=smart&auto=webp&s=1fb548e43b8e5fe9b2fd7ba26af6da4221efcddb" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
</Helmet>
<a href="#" onClick={this.fbshare1}> Share on Facebook without sharer fb2 </a>
on the otherhand my server side rendering looks like this with express
import path from 'path';
import fs from 'fs';
import React from 'react';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from "react-router-dom";
import { Helmet } from 'react-helmet';
import App from '../src/App';
const PORT = 3006;
const app = express();
app.use(express.static('./build'));
app.get('/*', (req, res) => {
const app = ReactDOMServer.renderToString(<StaticRouter location=
{req.url}><App /></StaticRouter>);
const helmet = Helmet.renderStatic();
const indexFile = path.resolve('./build/index.html');
fs.readFile(indexFile, 'utf8', (err, data) => {
if (err) {
return res.status(500).send('Oops, better luck next time!');
}
res.send(formatHTML(app, helmet));
});
});
const formatHTML = (appStr, helmet) => {
return `
<!doctype html>
<html prefix="og: http://ogp.me/ns#"
${helmet.htmlAttributes.toString()}>
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body ${helmet.bodyAttributes.toString()}>
<div id="app">
${appStr}
</div>
</body>
</html>
`
}
app.listen(PORT, () => {
console.log(`😎 Server is listening on port ${PORT}`);
});
541
Check next framework. It have server side rendering for react. It is very easy to setup and use it. They have pretty good documentation. Read the documentation and see how _document.js works in this framework it will do the job. Good luck :)
More info about the next server side rendering here
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
