Social Media Icons vs Adblock Et Al

As ad blocking becomes the norm for savvy web users, if you want to link to your social media presence, it's no longer sufficient to only use icons featuring Twitter and Facebook logos. They are liable to be invisible!

Whilst I certainly don't think it's acceptable to attempt to deceive users and/or their browsers, consider the example below, a typical website footer (mine!) with some company logos displayed beside text-only links. There is no insidious functionality hidden from visitors in this scenario. They are simply an aesthetic part of the page design; a very small logo alongside a text link.

Example of Website Footer

I recently noticed that the icons were not displaying on several of my installed browsers, and the common factor was my use of Adblock Plus. Disabling it for my page brought the logos back.

I'd also made the mistake of naming the image above "footer_social.png", and subsequently had to rename it "footer_example.png" just so that it would be visible in my browser. As a general rule it seems like you need to be quite careful with ALT tags and image filenames, if you don't want them to mysteriously disappear.

The following is a quick and easy solution to get those logos back. At the bottom of the page I've also included a simple script to detect ad-blocking and display a message.

Display Social Icons to an Ad-blocked Browser

Create a PHP file (twitter.php in this example) as follows:

<?php
/* Twitter */
header("Location: https://twitter.com/joncraddock");
exit;
?>

Use this file as the href in your social link, and do not include an alt tag. In my testing, the use of "twitter.php" and the "Twitter" text in the anchor did not seem to trigger Adblock. However, the use of a PNG image named "twitter.png" does act as a trigger, and so I renamed the file "footer1.png". (Obviously there are other ad blockers, and perhaps they would respond differently?)

<a href="https://jonathancraddock.com/docs/links/twitter.php" target="_blank" rel="nofollow"><img src="./images/footer1.png" /> Twitter</a>

Are there better solutions? Possibly. I'd initially considered "disguising" the link via a redirect in .htaccess, but it felt wrong, and the solution above seemed relatively clean, and I think will be very easy to decipher if I have to look at it again in the future. A URL shortener might be a further option.

Simple "Ad Blocking" Notification Message

There are undoubtedly some very clever solutions to this. A quick search on StackExchange revealed numerous approaches, including checking height changes of page elements, etc. It doesn't feel sufficiently important to me that I would want to implement anything that in depth. The following is a quick and easy solution.

Create a JavaScript file named advert.js. The specific details are less important than ensuring you have the various uses of the word "advert".

document.write('<div id="advert" style="display:none">advert check</div>');

And within your HTML include the following. (This example is using Twitter Bootstrap for formatting.)

<!-- Display Ad Blocking Notification -->
<script type="text/javascript" src="./js/advert.js"></script>
<script type="text/javascript">
    if (document.getElementById("advert") == undefined) { 
        document.write('<div class="alert alert-warning" role="alert">
        There is no advertising on this site, but using ad-blockers will hide any like/share buttons, etc,
        and in some circumstances might affect page layout.</div>'); 
    };
</script>

This displays a fairly unobtrusive message in the event that an ad blocking solution is in use. If you're using an ad blocker, you will see it for yourself just below this paragraph!