Sharing Webflow page on Twitter and thumbnail is missing

103 views Asked by At

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:

blank thumbnail

no thumbnail

This is what I want:

working thumbnail

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>
0

There are 0 answers