Thomas Hop Posted December 7, 2023 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
opentype Posted December 7, 2023 Posted December 7, 2023 It’s not clear what you are asking. What’s “social share”? What are you trying to achieve and how?
Jim M Posted December 7, 2023 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.
Thomas Hop Posted December 8, 2023 Author 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:
Marc Posted December 8, 2023 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?
Jim M Posted December 8, 2023 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.
Solution Thomas Hop Posted December 11, 2023 Author Solution Posted December 11, 2023 Fixed it (for our temporary needs by modifying theme)
Recommended Posts