CODEWITHSUNDEEP
facebookfacebook-graph-apilinkedin-apifacebook-social-pluginssocialsharing-plugin
Dalvir Singh
Dalvir Singh

Reputation: 443

Dynamic Data passing to Facebook and linkedIn sharing

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

Upvotes: 0

Views: 401

Answers (1)

HoldOffHunger
HoldOffHunger

Reputation: 20946

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!

Upvotes: 1

Related Questions