Reputation: 847
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?
Upvotes: 0
Views: 315
Reputation: 945
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.
Upvotes: 1