Question

I am trying to utilize Pinterest’s pin it button on my website. The directions on the Pinterest ‘create a button’ section are straight forward except for the fact that I’m only given the option of entering the url of the image I want pinned. This can be very strenuous and redundant, especially for someone working on a website that has more than a hundred pages (pages containing product images). So I figured I’d use some Javascript (jQuery preferably) to do the trick.

Here’s my code.

HTML:

<div id="pinterest"></div>
<!--Sample Image-->
<div id="pic">
    <img id="sampleimage4div" src="images/wonderfulpicture.jpg" />
</div>


<!--SCRIPTS-->
<script type="text/javascript" src="http://assets.pinterest.com....
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/... etc

jQuery Script

<script type="text/javascript">
$(document).ready(function(){
    var currentURL = $(location).attr('href');
    var description = encodeURIComponent($(this).attr('title'));
    var imageURL = encodeURIComponent($('#sampleimage4div').attr('src')+currentURL);

$('#pinterest').append('<a href="http://pinterest.com/pin/create/button/?url='+currentURL+'&media='+imageURL+'&description='+description+'"class="pin-it-button"count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png"title="Pin It"/></a>');        
}); 
</script>   

I was able to alter/customize the page ‘URL’ and ‘description’ but for some reason I’m failing to get the image.

Any ideas?

Answer 1

var currentURL = $(location).attr('href');
var imageURL = encodeURIComponent($('#sampleimage4div').attr('src')+currentURL);

Those lines of code are the problem. use

var currentURL = $(location).attr('host')
var imageURL = encodeURIComponent("//" + currentURL + $('#sampleimage4div').attr('src'));