Whatsapp sharing with dynamic title and description

949 Views Asked by At

I have a website built using React, which is hosted under the domain www.url.com and i set the following meta on my index.html

<meta name="description" content="My description">
<meta property="og:title" content="My title" />
<meta property="og:url" content="https://www.url.com" />
<meta property="og:description" content="My description">
<meta property="og:image" content="https://www.myimage.com">
<meta property="og:type" content="website" />

Contained inside my website are posts, in which each post has its unique URL (like www.url.com/post/thispost), title, description and images. I used ShareThis reactjs plugin (https://github.com/sharethis-github/sharethis-reactjs) to create the share button for each post, and have the following setup

<InlineShareButtons
    config={{
    alignment: 'center',  // alignment of buttons (left, center, right)
    color: 'social',      // set the color of buttons (social, white)
    enabled: true,        // show/hide buttons (true, false)
    font_size: 14,        // font size for the buttons
    labels: 'cta',        // button labels (cta, counts, null)
    language: 'en',       // which language to use (see LANGUAGES)
    networks: [           // which networks to include (see SHARING NETWORKS)
                'whatsapp',
                'facebook'
              ],
    padding: 12,          // padding within buttons (INTEGER)
    radius: 4,            // the corner radius on each button (INTEGER)
    show_total: false,
    size: 40,             // the size of each button (INTEGER)
    // OPTIONAL PARAMETERS
    url: window.location.href, // (defaults to current url)
    description: {description},       // (defaults to og:description or twitter:description)
    title: {title},            // (defaults to og:title or twitter:title)

 }}
/>

Where description and title are the contents and title for every post. Since every post is a pop up, and title and description are only available upon opening the pop up, so i designed it that it will only initialize the InlineShareButtons when the popup is open.

But problem here is that, when i shared the post, it doesn't show the description and title in the way that i want it. Instead it displays the description and title from the meta tag on index.html whenever i tried to share each post.

Is there a way to make it, so that when i share any post, it will use the title and description on the post?

0

There are 0 best solutions below