PIXEL
DOCK

I like the smell of Swift in the morning…

The curious case of the missing social buttons

Posted: | Author: | Filed under: HTML, iOS | Tags: , , , | No Comments »

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://www.facebook.com/...">
   <img src="btn-facebook.png" />
</a>
<a href="https://goo.gl/...">
   <img src="btn-google.png" />
</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://www.facebook.com/...">
   <img src="btn-f.png" />
</a>
<a href="https://goo.gl/...">
   <img src="btn-g.png" />
</a>

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