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.