4

I am using react-helmet to display the meta og tags and react-snap to prerender the html pages. I was able to render the proper display with the image description and title when i shared it on slack, but if I share it on facebook, the page does not render with anything but the title and the url.

import React, {Component} from 'react'
import {Helmet} from "react-helmet";
class Footer extends Component {

    render(){
        let { description, parameter,id ,imageURL, badgeImageURL} = this.props
        if(id ===3||id==9||id==10||id==6){
            description='description 1'
        }else if(id ===5||id==11||id==7||id==2){
            description='description 2'
        }else if(id ===4||id==1||id==8||id==12){
            description='description 3'
        }else{
            description='description 4'
        }
        return(
        <div className="row social-media-logos">
            <Helmet>
                <title>Page Title</title>
                <meta property="og:url" content={`http://www.sample.com${parameter?parameter:''}`} />
                <meta property="og:description"  content={description} />
                <meta property="og:image"              content={imageURL!==''?`${imageURL}`:badgeImageURL} />
                <meta property="fb:app_id" content="sample_id" />
            </Helmet>

                <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=www.sample.com"><div className="facebook" ></div></a>    
                <a target="_blank" href={`http://pinterest.com/pin/create/button/?url=http://www.sample.com${parameter?parameter:''}&media=${imageURL}&description=${description}`}><div className="pinterest"></div></a>
                <a target="_blank" href={`https://twitter.com/intent/tweet?text=${description}&url=http://www.sample.com${parameter?parameter:''}`}><div className="twitter"></div></a>
            </div>
        )
    } 
}

export default Footer

Having the same problem with twitter. Any ideas? This site is being hosted on aws as an s3 bucket.

jdip88
  • 427
  • 2
  • 9
  • 23
  • I think Facebook needs a server rendered html in order to pick up the image, I am having the same problem and I am trying to figure it out. Did you manage to solve it? – Matteo Mar 22 '19 at 09:15

0 Answers0