Like box/header image not showing

Hey Mark,

Can you provide a link to the site page where the feed is installed and then we can test this first hand from this end and see if the problem occurs here. It may be a setting or extension added in your Chrome browser that is preventing this but we will check across the different browsers (Chrome, Firefox, Firefox Developer, Microsoft Edge, and Safari) to see if the problem is duplicated here.

Thanks.

Hi David,

It is just happening at mobile on https://www.bhealthandfitness.co.uk/

Thanks

Hey Mark,

I’m responding on behalf of David as the plugin developer. I’ve tested this on Chrome on an iPhone 6 and iPhone 8 and the Like Box seems to be displaying correctly (screenshot).

Is this only happening on one specific mobile device, or is it occurring on multiple devices?

The Like Box widget is actually embedded into the feed in an iframe directly from Facebook’s server and so if it’s not showing up then it usually means that something is blocking it – usually a security setting or browser add-on.

John

I experienced this problem and was about to raise a query when I noticed the above response suggesting that something might be blocking the display. Double checked on another browser (Chrome) and found that the header and like boxes displayed OK there. My problem was just happening on Firefox.

As well as not displaying the header and like box, the browser was also not displaying the author avatar at the head of each post. It displayed the author name instead.

Dug a bit deeper and discovered that it was the Firefox ‘Tracking Protection’ option which I had set to ‘Always’ that was doing the blocking. As soon as I unset that option the header, like box and avatar displays returned.

So next I turned to my phone (Samsung S8) where, same as marktaylor55, I was not seeing the header etc on the Facebook Feed on my web page. A bit more digging and I discovered the ‘Tracking blocker’ under Settings|Extensions. (Temporarily) switching the tracking blocker OFF, fixed the problem.

But I (and probably lots of other people too) don’t want to be tracked and prefer to keep the Tracking blocker on which does rather spoil the Facebook Feed display on our web site. See https://www.pushingouttheboat.co.uk

As long as I have the ‘View Facebook Link’ option set in the ‘Link to Facebook’ section of the plugin’s settings, I do at least get a text heading above the posts but it’s not very pretty. Is there any chance that the plugin could have an option to display an image when the FB image is blocked?

Hey @aenea,

Unfortunately, we don’t have any control over how the contents of the “Like Box” widget is loaded by Facebook, or whether they use image redirects in their API (which is what causes the issue with the avatars). However, I understand your concern and so I put together a code snippet for you which should hopefully solve your problem. Could you try adding the following to our plugin’s Custom JavaScript section (Facebook Feed > Customize > Misc > Custom JavaScript) and let me know whether it resolves the problem for you?

$('#cff .cff-author-img img').attr("onerror", "this.src='https://link-to-fallback-image-here.jpg'");

I tested this on a test site with Firefox Tracking Protection on and it seemed to work well.

Let me know if it works for you too, and I hope you’re having a good start to your week!

John

Yes, that fixes the missing avatar for Firefox, thanks. Doesn’t fix it for Samsung’s default browser on my phone but I’m not too bothered about that, since it just leaves a blank space where the avatar should be (whereas Firefox displayed the author name).

I’m also not too bothered about the missing Like Box but is there any way you could do a similar fix for the header image? It looks rather ugly at the moment with the text ‘View of Facebook’ against a large blank background.

Hey @aenea,

Glad to hear that worked for you. In regards to the Like Box, it’s a little different as the content is loaded by Facebook into an iframe. You could set a background image on the Like Box element which will be revealed if the Like Box has no content. It would still show the “View on Facebook” link, but it would avoid the blank space if the iframe script is blocked. Add the following to our plugin’s Custom CSS section, which is above the Custom JavaScript section:

.cff-likebox{
  background: url("https://link-to-fallback-image.jpg");
}

Let me know whether that helps.

John

Yes, that works a treat. Thanks.
I also added a wee bit extra, to change the colour of the ‘View on Facebook’ text to make it readable against my chosen background image.

.cff-likebox a {color:#faebd7;} /*antiquewhite*/

Awesome, that looks great! Just let me know if you have any other questions at all.

John