0

Dynamically Generating Images in Facebook and Twitter Cards: How to Achieve It?

I would like to implement a "Share to Facebook" or "Share to Twitter" feature in my React app.

In my React app, each user can have multiple sessions identified by a session ID. If a user wishes to share a particular session with their social media friends, they can do so by clicking the "Share via Facebook" or "Share via Twitter" option. The shared content will include a link to the session's view page. Additionally, I would like to include an image related to particular session in the Facebook or Twitter post.

Currently, I am able to generate static image using meta tags as shown below:

<meta property="og:title" content="Bullitt - Tracking Session" />
    <meta property="og:description" content="Hey check out my latest post!" />
    <meta property="og:image" content="%PUBLIC_URL%/gmap.jpg" />
    <meta property="og:image:width" content="1500" />
    <meta property="og:image:height" content="786" />
    <meta property="og:url" content="https://ui-zidi53gvka-uc.a.run.app" />
    <meta property="og:type" content="website" />

    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content="Bullitt - Tracking Session" />
    <meta property="twitter:description" content="Hey check out my latest post!" />
    <meta property="twitter:image" content="https://ui-zidi53gvka-uc.a.run.app/gmap.jpg" />

I am using the react-share package to trigger the Facebook and Twitter share functionality, as demonstrated here:

<Tooltip title={t("facebook_tooltip_text")} placement="top" arrow>
                  <FacebookShareButton                                         
                    // hashtag="#Bullitt!"
                    url={liveSessionURL}                    
                    className="social-icons"
                  >
                    <img src={FbIcon} className="share-icon-style" alt={t("facebook_logo_text")} />
                  </FacebookShareButton>
                </Tooltip>
                <Tooltip title={t("twitter_tooltip_text")} placement="top" arrow>
                  <TwitterShareButton
                    title="Hey, check out my latest post!:"            
                    // hashtags={["Bullitt", "Satellite"]}
                    url={liveSessionURL}
                    className="social-icons"
                  >
                    <img src={TwitterIcon} className="share-icon-style" alt={t("twitter_logo_text")} />
                  </TwitterShareButton>                                
                </Tooltip>

My objective is to have a specific image associated with each shared session. How can I accomplish this?

sai v
  • 1
  • 1

0 Answers0