Dynamically change thr URL of the Pin It (Pinterest) button

Question

I'm currently trying to add social networks's buttons to my website but I've encountered an issue with the Pin It button from Pintesrest. I'd like to dynamically change the URL of the pin but unfortunately, it seems to not working. Did I do something wrong?

<script type="text/javascript">
    var urlpin = document.location.href;

    function buildPinUrl(urlpin, urlmedia, description) {
       return '//pinterest.com/pin/create/button/?'+
                'url='+encodeURIComponent(urlpin)+
                '&media='+encodeURIComponent(urlmedia)+
                '&description='+encodeURIComponent(description);
        }

    $(document).ready(function(){
        var urlmedia = $("#stamp1").attr("src");
        var description = $("#title").text();
        var goodurl = buildPinUrl(urlpin, urlmedia, description);

        $('#pinbtn').attr('href', goodurl);

    });

</script>

And here the button:

<!-- Pin It Button --><a id="pinbtn" href="//pinterest.com/pin/create/button/?url=http%3A%2F%2Fcollectionnies.com&media=http%3A%2F%2Fcollectionnies.com&description=Next%20stop%3A%20Collectionnies" data-pin-do="buttonPin" data-pin-config="beside"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a><!-- Pin It Button -->

Thanks for your help.

Answer 1

With jQuery 1.6+ (up to edge), this works fine:

http://jsfiddle.net/mmKcR/

Check to make sure that jQuery is loaded before this code appears in the html. Also make sure you are not loading jQuery in noConflict mode, as this will break the use of the $.

If this still fails for you, use the Chrome/Firefox inspector to view any console errors.

If you see an error like:

Uncaught ReferenceError: $ is not defined 

One of the two above issues is at fault.