Thomas Hop Posted December 7, 2023 Share Posted December 7, 2023 Hello, We recently tried setting up the pages for social share to work. however we noticed that if we for example use Javascript in a specific page to generate these elements it wont work. Now my question is, is it even possible to achieve this within the pages. (even if it is a bit hacky). As mentioned before I tried emptying all elements in the header (except required for styling and security) and added the required tags with JS <head> <meta charset="utf-8"> <!-- Global site tag (gtag.js) - Google Analytics --> <!-- Google Tag Manager --> <!-- End Google Tag Manager --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,500,700,700i" rel="stylesheet" referrerpolicy="origin"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/341e4a57816af3ba440d891ca87450ff_framework.css?v=1a09eeb34e1701771263" media="all"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/05e81b71abe4f22d6eb8d1a929494829_responsive.css?v=1a09eeb34e1701771263" media="all"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/20446cf2d164adcc029377cb04d43d17_flags.css?v=1a09eeb34e1701771263" media="all"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/90eb5adf50a8c640f633d47fd7eb1778_core.css?v=1a09eeb34e1701771263" media="all"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/5a0da001ccc2200dc5625c3f3934497d_core_responsive.css?v=1a09eeb34e1701771263" media="all"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/97c0a48072ce601c9764cb6b00a6588a_page.css?v=1a09eeb34e1701771263" media="all"> <link rel="stylesheet" href="https://www.higherlevel.nl/uploads/css_built_31/258adbb6e4f3e83cd3b355f84e3fa002_custom.css?v=1a09eeb34e1701771263" media="all"> <link rel="shortcut icon" href="https://www.higherlevel.nl/uploads/monthly_2018_11/index.ico.2e1e1d0b98d5eba3b5d08e926875d52a.ico" type="image/x-icon"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://higherlevel.pingvp.com:* https://statistiek.rijksoverheid.nl:* https://fonts.googleapis.com:* https://www.google-analytics.com:*; style-src 'self' 'unsafe-inline' https://www.googletagmanager.com:* https://pingvp.com:* https://translate.google.com:* https://translate.googleapis.com:* https://fonts.googleapis.com:* https://www.gstatic.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com:* https://pingvp.com:* https://translate-pa.googleapis.com:* https://translate.google.com:* https://translate.googleapis.com:* https://statistiek.rijksoverheid.nl:* https://www.google-analytics.com:* https://www.google.com/:* https://pingvp.com:* https://www.pingvp.com:* ajax.googleapis.com www.google.com google.com gstatic.com www.gstatic.com connect.facebook.net https://www.googletagmanager.com/gtag:*; connect-src 'self' https://translate-pa.googleapis.com:* https://translate.google.com:* https://translate.googleapis.com:* https://www.higherlevel.nl:* https://www.twitter.com:* https://platform.twitter.com:* https://statistiek.rijksoverheid.nl:* https://www.google-analytics.com:* https://stats.g.doubleclick.net https://www.google.com/:* doubleclick.net:* ajax.googleapis.com www.google.com google.com gstatic.com www.gstatic.com connect.facebook.net https://www.googletagmanager.com/gtag:* https://region1.google-analytics.com https://region1.analytics.google.com; font-src 'self' https://pingvp.com:* https://fonts.gstatic.com:*; img-src 'self' https: data:; frame-src 'self' https://www.youtube.com:* https://m.youtube.com:* https://youtu.be:* https://www.youtube-nocookie.com:* https://player.vimeo.com:* https://vimeo.com:* https://www.google.com:* https://mychannels.video;"> <title>Dynamic Page Title</title> <meta name="description" content="Dynamic page description."> <meta property="og:title" content="Dynamic OG Title"> <meta property="og:description" content="Dynamic OG Description"> <meta property="og:image" content="https://www.higherlevel.nl/uploads/pages_media/Facebook.png"> <script id="ppas_container_configuration" data-appid="1901" data-host="statistiek.rijksoverheid.nl"></script> <link rel="stylesheet" type="text/css" href="https://pingvp.com/z/58_higherlevel_jaaroverzicht/player/styles/pingvp.min.css"> </head> Or the page itself: higherlevel.nl/video/jaaroverzicht What are we doing wrong? Thanks in advance. Kind Regards, Thomas Link to comment Share on other sites More sharing options...
opentype Posted December 7, 2023 Share Posted December 7, 2023 It’s not clear what you are asking. What’s “social share”? What are you trying to achieve and how? Link to comment Share on other sites More sharing options...
Jim M Posted December 7, 2023 Share Posted December 7, 2023 I am a little confused as well. 23 minutes ago, Thomas Hop said: We recently tried setting up the pages for social share to work. however we noticed that if we for example use Javascript in a specific page to generate these elements it wont work. Do you mean you want something on the page appearing when something is shared to a social network, like embedded in Facebook when a link is shared? If so, this is not possible to have content show in the embed which is rendered by Javascript. The bots which scrape the data for those embeds, do not run Javascript. Link to comment Share on other sites More sharing options...
Thomas Hop Posted December 8, 2023 Author Share Posted December 8, 2023 Social share as when you share the URL of a webpage on social media, for us specifically Facebook, Twitter and LinkedIn. For example Twitter: Link to comment Share on other sites More sharing options...
Marc Stridgen Posted December 8, 2023 Share Posted December 8, 2023 Sorry, its still not clear what you are trying to do here. Are you trying to amend the embed with your own javascript? Link to comment Share on other sites More sharing options...
Jim M Posted December 8, 2023 Share Posted December 8, 2023 17 hours ago, Jim M said: Do you mean you want something on the page appearing when something is shared to a social network, like embedded in Facebook when a link is shared? If so, this is not possible to have content show in the embed which is rendered by Javascript. The bots which scrape the data for those embeds, do not run Javascript. This would then be what I mentioned here. I'm afraid, as these bots don't run Javascript, you can't modify things via Javascript. Link to comment Share on other sites More sharing options...
Solution Thomas Hop Posted December 11, 2023 Author Solution Share Posted December 11, 2023 Fixed it (for our temporary needs by modifying theme) Link to comment Share on other sites More sharing options...
.thumb.png.72c24494603afd7a572d55d4a71e4af2.png)
Recommended Posts