Facebook Share Button Missing Image

Facebook Share Button Missing Image

 

On one of my client’s sites they have the regular social sharing icons. When a visitor clicks on the share to facebook link it populates that share with some default info, and very importantly the image. This is important to them because they run image voting sites.

I was asked to see if I could fathom why the image was missing on facebook sharing. The first thing I checked was the open graph (OG) tags on the site.

The code in the head section of the page looked like this:

<meta property="fb:app_id" content="XXXXXXXX" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Johnny - Cute Kid South Africa" />
<meta property="og:description" content="For 1 Vote: Text KID zzzz to 41868. Texts costs R2. Read more..." />
<meta property="og:url" content="https://www.scutekid.co.za/competition/june-2015/?entry=xxxx" />
<meta property="og:site_name" content="Cute Kid South Africa" />
<meta property="og:image" content="https://www.scutekid.co.za/wp-content/uploads/2015/05/my-image.jpg" />

<script type="text/javascript">

jQuery( function( $ ) {
    $.post( 'https://graph.facebook.com', {
            id: 'https://www.scutekid.co.za/wp-content/uploads/2015/05/my-image.jpg',
        scrape: true
    },
    
    function(response){
        console.log(response);
    }
    );
});

</script>

 

Not being an expert in open graph, this looked correct, and besides, it was working on 2 other sites in the exact same way, but for some reason  on this site it did not load the image.

Social share missing image

 

 

 

 

 

 

 

 

I then took at a look at Facebook’s share debugger where you can enter your URLs to see what facebook will see.

That showed me this warning. Facebook’s share debugger was warning me that the og image tags were missing width and height dimensions and so it would not show the image.

Facebook share debugger

 

 

 

 

 

 

If you click on their “Learn More” link they explain that without the width and height of the image, facebook’s sharing will not display the image to the first person to share the page but that they will get the image asynchronously and then show it to subsequent visitors. In my experience that didn’t actually happen. Once the imageless share took place, it never seemed to get the image. This does make sense as facebook caches the shares they’ve fetched and they don’t refetch the page each time.

The explain that there are 2 ways to get your images showing with facebook’s social sharing:

  1. Specify the width and height of the image
  2. Preload their cache by going to the share debugger and fetching the page from there.

The javascript code in the snippet above now made sense to me. This was the previous developer’s attempt at preloading the sharing cache. This did seem to work for the most part.

 

The problem with that approach is that some of these sites get very heavy peak periods where we have to manage server loads very carefully. As I had not worked on that part of the site before I was blissfully unaware. But essentially this meant that if we were hitting a peak of 250 new unique visitors per second then we were also doing 250 posts to facebook per second. And were were doing that every time, regardless of whether that image had been sent to facebook or not. Craziness!

I then updated the og tags to output the following:

<meta property="fb:app_id" content="XXXXXXXX" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Johnny - Cute Kid South Africa" />
<meta property="og:description" content="For 1 Vote: Text KID zzzz to 41868. Texts costs R2. Read more..." />
<meta property="og:url" content="https://www.scutekid.co.za/competition/june-2015/?entry=xxxx" />
<meta property="og:site_name" content="Cute Kid South Africa" />
<meta property="og:image" content="https://www.scutekid.co.za/wp-content/uploads/2015/05/my-image.jpg" />

<meta property="og:image:width" content="720" />
<meta property="og:image:height" content="720" />

and now my sharing worked beautifully, with the facebook share image attached, and no more posts to facebook with each page load.

 

facebook share images

John McMurray is a freelance PHP developer. Experienced in PHP, Laravel and WordPress he can code anything you need.

Based in Plettenberg Bay, Western Cape I am available for PHP, Laravel or WordPress freelance jobs in Johannesburg, Pretoria, Cape Town, Port Elizabeth. I also often do remote PHP freelance work all over South Africa and the rest of the world.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *