使用Safari在iPad上按下按钮抛出错误

Question

I am using the pin it button script to display pin it button on hover.

It's working fine on desktop. But it throwing error on iPad's Safari.

The error: "Safari cannot open the page. because the address is invalid."

I am using code like this:

<div class="pin-it-hover">
   <a href="//www.pinterest.com/pin/create/button/?url=<?php echo current_url(); ?>&media=   <?php echo site_url($imagepath); ?>&description=<?php echo $description; ?>"
    data-pin-do="buttonPin" data-pin-config="none">
   <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/>
  </a>
</div>

Included script only once.

<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async  src="//assets.pinterest.com/js/pinit.js"></script>

CSS used:

.pin-it-hover {
    right: 20px;
    top :20px ;   
    position: absolute;
    visibility: hidden;
}

.outerdiv:hover .pin-it-hover {
    visibility: visible;
}

Any suggestion? What's wrong with my code?

Answer 1

Use http: in front of URLs or remove // in every urls like below.

http://assets.pinterest.com/js/pinit.js or assets.pinterest.com/js/pinit.js

instead of //assets.pinterest.com/js/pinit.js

<div class="pin-it-hover">
   <a href="http://www.pinterest.com/pin/create/button/?url=<?php echo current_url(); ?>&media=   <?php echo site_url($imagepath); ?>&description=<?php echo $description; ?>"
    data-pin-do="buttonPin" data-pin-config="none">
   <img src="http://assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png"/>
  </a>
</div>

I think this will helps you.