Today we are going to learn how to share a web app on Facebook and twitter.
The first step that you need to do is, add a JavaScript activity before you “Page” activity. We will be setting the metadata for the
Use the below code in the JS activity.
ctx.sharing.title = "Title for Social Media"
ctx.sharing.author = "Author"
ctx.sharing.description = "Social description"
ctx.sharing.image = "https://Public image URL used for sharing"
The next step is to include the ctx data into your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
[...]
<!-- Title -->
<title>Subscription</title>
<!-- meta For Google -->
<meta name="description" content="<%= ctx.sharing.description %>" />
<meta name="keywords" content="" />
<meta name="author" content="<%= ctx.sharing.author %>" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />
<!-- meta For Facebook -->
<meta property="og:title" content="<%= ctx.sharing.title %>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<%= ctx.sharing.image %>" />
<meta property="og:url" content="" />
<meta property="og:description" content="<%= ctx.sharing.description %>" />
<!-- meta For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<%= ctx.sharing.title %>" />
<meta name="twitter:description" content="<%= ctx.sharing.description %>" />
<meta name="twitter:image" content="<%= ctx.sharing.image %>" />
<!-- Common CSS -->
[...]
</head>
<body class="container"><!-- or .container-fluid -->
[...]
</body>
</html>You can test your markup for Facebook on https://developers.facebook.com/tools/debug/sharing/:
Hope this helps.
Source:
https://stackoverflow.com/questions/11616697/how-to-use-the-og-open-graph-meta-tag-for-facebook-share#answer-16822848
https://developers.facebook.com/docs/sharing/webmasters#images
