Igor's Blog
Programming, DIY, Games, Hacks, and Tech

I've recently added Banggood banner links to my Blog and noticed that Facebook started to use images of those banners whenever I shared a post that didn't have its own image. This was of course an undesirable behaviour and I looked into various ways of removing it and finally settled on a simple JavaScript approach.

When using the Facebook Debugger this is the kind of summary that I was getting...
fbshareimg_remove3.png


The ad image is clearly part of the thumbnail of my shared post. I looked into different ways to fix this and there were a few - I could have used a nested iframe with the ad page loaded inside it, this would require me to generate a whole new HTML page for each banner. I could have also loaded the image using CSS instead of leaving it as an img tag - this required me to change my banner code significantly. These didn't sit well with me so I looked at yet another option which was to use some JavaScript, jQuery in my case, to set the content of a div element that held the ad - this required no change to my banner code.

I already had a div element to hold the ad, all I needed to do was give it an ID, like so:
 HTML
<div id="banggood_banner" class="banggood_banner"></div>


Notice this is an empty div. This is where my Blog's template engine (Smarty) would typically inject ad code, I removed that injection. The template still needed the ad code however, but it was going to be used differently now.

At the bottom of my page (after jQuery scripts were loaded) I added the following bit of code that set the innerHTML value for the div element I've defined above, by calling the html() function...
 JavaScript
<script>
$('#banggood_banner').html('{$ad_code_html}');
</script>




The actual ad content was held in the $ad_code_html template variable, if you want to do this for any other image, just place the literal img tag here instead. Since the Facebook scraper doesn't run JavaScript, it will always see an empty div and not the image content that has been injected into it! In a web browser however the bit of JavaScript will ensure the image/ad is loaded and displayed.

The debugger confirms this change works...
fbshareimg_remove4.png


-i

comments powered by Disqus
Other posts you may like...

Recent Blog Posts

A hack to create an uber jar with the Maven Shade Plugin using local jar files

Is it worth it? Apple USB-C Digital Multi AV adapter vs a cheap eBay clone

Running X11 graphical applications after changing to another user using 'sudo su'

How to stop Facebook using ad images as post sharing thumbnails

Picking lists for Atari Lynx capacitor replacement kits

Performance - 2012 Retina MacBook Pro vs 2017 MacBook Pro

Look and feel - 2012 Retina MacBook Pro vs 2017 MacBook Pro

Using math to work out the diameter of hard to reach water cooling pipes

How to get the unreachable shard in the Hinterlands in DragonAge Inquisition

Measy RC12 wireless 2.4Ghz keyboard touchpad review

Recent Galleries

Monument Valley 2 is released and does not disappoint

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

DIY spare parts computer build with a RAIDMAX Anura case

Fake 'Lepin' brand Lego packaging

Hardwood garden bench with clear resin void filler

Fixing a 3D printer extruder that stopped heating up

Easily increase disk space in a Lenovo Ideapad 100S 14" laptop with an M.2 SSD

Making a multi-piece 3D printed solder spool holder stand

DIY indoor apartment grow light wiring

My Other Web Sites

Igor and Elise's Travels
Riverside Expressway Cam
300 George St Blogumentary

My Online Tools

UUID to OID Converter
Guru JSON-RPC Tester
Extrudifier Object Designer
Travel ┬ÁBlog

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity
Don't forget to
me for more great articles!
Don't show this again