The curious case of the missing social buttons

Now for something a bit off-topic. As a side project I handle a friend’s company’s website. He asked me to add a button that links to his facebook page and another button that opens the review form for his company’s google page.

Easy peasy. I made two images and embedded them in a link element:

<a href="https://facebook.com"><img src="btn-facebook.png" alt=""/></a>
<a href="https://google.com"><img src="btn-google.png" alt=""/></a>

As expected everything worked as expected. Not exactly rocket science.

Until I looked at the webpage in Mobile Safari. The two buttons were not showing up there. They were showing in Chrome for iOS but in Mobile Safari: no Facebook button, no Google button!

As it turned out the image filenames were the problem. Naming them “btn-facebook.png” and “btn-google.png” was triggering my Mobile Safari’s content blocker app!

The solution was really simple. Just renaming the image filenames did the trick:

<a href="https://facebook.com"><img src="btn-f.png" alt=""/></a>
<a href="https://google.com"><img src="btn-g.png" alt=""/></a>

Now the images are “hidden” from the content blocker and show up in Mobile Safari.