I am trying to share a page on Twitter. My website is built using Webflow and I've set up correctly the page's open graph image.
Using the same template, the same webp images (1000px wide), and the same JS; I am getting 3 different outcomes when sharing one of my event pages.
These two outcomes below are not what I want:
This is what I want:
Is there any way to ensure this chosen outcome by editing the code:
<script>
$(document).ready(function() {
let title = document.title;
let url = window.location.href;
$('#copyme').val(url);
$('[data-share-facebook').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + url + '%2F&title=' + title + '%3F');
$('[data-share-facebook').attr('target', '_blank');
$('[data-share-twitter').attr('href', 'https://twitter.com/intent/tweet?text=' + url + '%2F&title=' + title + '&summary=');
$('[data-share-twitter').attr('target', '_blank');
$('[data-share-linkedin').attr('href', 'https://www.linkedin.com/shareArticle?mini=true&url=' + url + '%2F&title=' + title + '&summary=');
$('[data-share-linkedin').attr('target', '_blank');
$('[data-share-email').attr('href', 'mailto:?&subject=' + title + '&body=' + url);
$('[data-share-email').attr('target', '_blank');
$('[data-share-whatsapp').attr('href', 'https://wa.me/?text=' + url);
$('[data-share-whatsapp').attr('target', '_blank');
});
const viewBtn = document.querySelector(".btn-calendar1"),
popup = document.querySelector(".popup"),
close = popup.querySelector(".close"),
field = popup.querySelector(".field"),
input = field.querySelector("input"),
copy = field.querySelector("button");
viewBtn.onclick = (e) => {
e.preventDefault();
popup.classList.toggle("show");
}
close.onclick = () => {
viewBtn.click();
}
copy.onclick = () => {
input.select();
if (document.execCommand("copy")) {
field.classList.add("active");
copy.innerText = "Copied";
setTimeout(() => {
window.getSelection().removeAllRanges();
field.classList.remove("active");
copy.innerText = "Copy";
}, 3000);
}
}
document.querySelector('.backdrop').addEventListener("click", function(e) {
popup.classList.remove("show");
});
</script>