Dynamic Data passing to Facebook and linkedIn sharing

Question

I have a HTML page where I am using javascript to load contents based on query string value.. In javascript, I have some dynamic code to load separate data on the page based on this query string value.

Now my page link looks like

https://example.com?datatype=1
https://example.com?datatype=2
https://example.com?datatype=3

Based on this my page data will vary. Now I want to Add Facebook and LInked in Sharing on this and want to send custom information to share on facebook and LinkedIn.

As per my R&d, this data can be posted using metatags. As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.

Can anyone suggest how I can Post URL, title, and description to this linkedIn and facebook.

Thanks in Advance

For normal shares on Facebook, you will _have to_ use OG meta tags. The only context in which title, description and thumbnail can still be set while posting, is when you post to your own Facebook page via API, as your page, and have claimed _domain ownership_ before. For normal users sharing your URLs on their own timelines, it needs OG meta tags. You will have to involve some form of server-side rendering here. — 04FS, Nov 04 '19 at 07:42

score 1 · Answer 1 · answered May 30 '20 at 18:18

So, I want to focus in on one thing you have stated here:

As per my R&d, this data can be posted using metatags. As I told you that My page is a pure client-side page. So these meta tags will not work for dynamic data.

That's actually not the complete story. Even if your webpage is "pure client-side", you still absolutely need to have an HTML framework to hold this, even if it's as minimal as: <html><head><script type="text/javascript" src="...."></head></html>. What you will need to do is to edit the document being served for your client-side application.

You did not mention a language, so, let's just assume you're using ReactJS. The procedure here will be the same for other client-side pages.

After making a react project, I have this file, ./public/index.html, and in it is...

<!doctype html>
<html lang="en">
    <head>
        <title>Scheduler</title>
        <meta charset="utf-8" />
        <link id="css-root" href="" rel="stylesheet" type="text/css" />
    </head>
    ...
</html>

All you need to do is to insert the og: tags to your for LinkedIn. Just use the tags as described by the Official LinkedIn Share Documentation. This should look like this...

<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />

Hope this helps!

Dynamic Data passing to Facebook and linkedIn sharing

1 Answers1