CODEWITHSUNDEEP
buttondynamicbookmarkletpinterest
daGUY
daGUY

Reputation: 28763

Create a dynamic Pinterest button?

Is there any way to create a dynamic Pinterest button? I'm trying to add Pinterest support to a site where the main content is dynamic, so I would only have a single Pin It button in the page source that pinned whatever the current content was.

I can't figure out a way to do this with the prebuilt Pin It button, because it requires that you specify a hardcoded URL ahead of time.

However, there's also a Pin It bookmarklet that does achieve the effect I want - but that requires the user to manually add it to their bookmarks bar.

Is there any way that I can either (a) modify the Pin It button, or (b) somehow integrate the bookmarklet into my page such that it will pin whatever the current page content is?

Upvotes: 9

Views: 9285

Answers (7)

António Almeida
António Almeida

Reputation: 10117

I have a page with a fullscreen gallery, with only one pinterest button at the bottom of the page, I ended up in this page looking for a solution. With no success I came up with this:

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1];
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

The regex /\((.+)\)/ is usefull to parse the image url in the background attribute, because its format is url('image.jpg'), so the regex removes the url('') and gives only the path.

Then I just set the attribute data-pin-href with my new image, works great!

Upvotes: 0

phidias
phidias

Reputation: 518

Pinterest provides a "build" function for building dynamic buttons. That means you can generate your Pinterest anchors dynamically & use this function for converting it into a Pinterest button, the same way pinit.js does when it loads.

Here explains how you can specify the name of the function: http://porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

Upvotes: 0

Cnab
Cnab

Reputation: 49

Dynamic Link for Pinterest

Below code will generate dynamic pinterest button for different pages.

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none">
 <img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0">
</a>

Upvotes: 2

chuckles
chuckles

Reputation: 226

What the pintrest button pins is controlled by the parameters in the href of the button.

Upvotes: 0

user1987005
user1987005

Reputation: 1

A simple server-side solution is probably better than client side. The code is here (PHP, WordPress or ASP)

Upvotes: 0

Mike Kibbel
Mike Kibbel

Reputation: 1971

I've built an improved Pinterest button that supports an HTML5-valid syntax on GitHub.

The way you would use this solution depends on whether your site is dynamically populating the page on the server side (with PHP or some other backend language) or on the client side via JavaScript and AJAX methods.

For the server side, you would generate the HTML5 <div> with its data-* attributes filled out in the template and then load the pinterest-plus-html5.min.js file with a <script> tag before the close of the <body>.

For the client side, you would need to load the pinterest-plus-html5.min.js file, either with a <script> tag in the <head> or via asynchronous loading, as described in the documentation. Next, you would generate the HTML5 <div> with JavaScript, dynamically insert or replace the Pinterest button tag on the page and then call PinterestPlus.pinit() to convert the <div> to a Pinterest button <iframe>.

I hope this helps!

Upvotes: 0

daGUY
daGUY

Reputation: 28763

For anyone who's interested, here's what I did:

HTML:

<a href="#" id="pinit">Pin It</a>

JS:

$(document).ready(function(){
    $("#pinit").click(function(){
        $("#pinmarklet").remove();
        var e = document.createElement('script');
        e.setAttribute('type','text/javascript');
        e.setAttribute('charset','UTF-8');
        e.setAttribute('id','pinmarklet');
        e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);
    });
});

Normally, when you click the Pin It bookmarklet in the browser's bookmarks bar, it dynamically inserts a script (pinmarklet.js) that auto-executes a function which brings up the Pinterest UI for choosing which images you want to pin.

I modified this so that the script is inserted when a link is clicked instead (#pinit). I also added an id to the script (#pinmarklet) so that I can remove it ($("#pinmarklet").remove();) and re-add it every time the link is clicked - otherwise, duplicate links to the same script keep piling up if you keep clicking the link.

Anyway, the end effect is that you're doing the same thing as the bookmarklet, just from within the page instead. So it works the same way and pulls whatever the current page content is, meaning you can change other content dynamically and it'll get picked up by the same one "Pin It" link.

Upvotes: 17

Related Questions