CODEWITHSUNDEEP
javascriptbuttonpinterest
Mistraë
Mistraë

Reputation: 337

Multiple Pin-it button on the same page

I created a Pinterest button with the following code on an article:

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-color="red"></a>

of course I've got the JS too:

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

and it works fine by itself, but if I want to add a second button at the end of the article it just doesn't work. The second button doesn't change and stays as a link instead of an iframe.

Is this even possible or am I doing something wrong?

Upvotes: 0

Views: 209

Answers (2)

vernsloth
vernsloth

Reputation: 1

<span class="pin-me">Custom HTML Button</span>
<script>
    function pinIt()
        {
        var e = document.createElement('script');
        e.setAttribute('type','text/javascript');
        e.setAttribute('charset','UTF-8');
        e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
        document.body.appendChild(e);
        }


    $('body').on('click', '.pin-me', function(){
            pinIt();
        });
</script>

Upvotes: 0

Alteyss
Alteyss

Reputation: 513

For each button you create, add an ID at the end of the link : 

 <a href="//www.pinterest.com/pin/create/button/0" data-pin-do="buttonBookmark"  data-pin-color="red"></a>
 <a href="//www.pinterest.com/pin/create/button/1" data-pin-do="buttonBookmark"  data-pin-color="red"></a>
 <a href="//www.pinterest.com/pin/create/button/2" data-pin-do="buttonBookmark"  data-pin-color="red"></a>...

Upvotes: 1

Related Questions