JSFiddle - React, Tailwind, and code Playground
HTML
<!--
SO Question: http://stackoverflow.com/q/11312923/1195891
These are all the custom jsFiddles for this Question.
jsFiddle Text-Link method: http://jsfiddle.net/hUAh8/1/
jsFiddle Custom Logo method: http://jsfiddle.net/hUAh8/2/
jsFiddle Custom Logo and Image method: http://jsfiddle.net/hUAh8/3/
-->
<p>Random sports image from image placeholder service.</p>
<div id="pin1">
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
<!-- Here's a Photograph that is enabled for Pinterest pinning! -->
<!-- Optional: Multiple images can be placed here -->
<img src="http://lorempixel.com/400/200/sports/" alt="img" title="Pin this image @ Pinterest!" style="width:400px; height:200px;" />
</a>
<!-- Here is a Custom Pinterest Button that is humongonus in size, or you can host your own version. -->
<!-- This PNG image with transparency was made at free online image generator: http://www.cooltext.com -->
<img id="pin1click" src="http://s13.postimage.org/zb3dofrxj/pin_It.png" alt="img" title="Pin It Custom Logo " />
</div>
<!--
Reference URL for this method:
http://www.brandaiddesignco.com/blog/add-a-custom-pinterest-pin-it-button-to-your-website/375/
-->
CSS
/* Optional simple styling of the Pinterest div wrapper */
#pin1{
border: 3px solid red;
width: 200px;
height: 105px;
margin-top: 25px;
margin-left: 50px;
}
/* This CSS selector prevents viewing of the Pinterest image. */
#pin1 a img{
position: absolute;
margin-left: -5000px;
}
JavaScript
$(document).ready(function() {
// Simple click event for optional humongous Pin It button.
$('#pin1click').click(function() {
$('#pin1click').hide();
// Send a click event to the actual image to invoke the Pinterest process.
$('#pin1 a img').click();
// Quick and dirty method to show/hide humongous logo during Pinterest pinning using default method in HTML Anchor.
setTimeout("$('#pin1click').show();", 1000);
});
});