CODEWITHSUNDEEP
javascriptpinterest
JLTChiu
JLTChiu

Reputation: 1023

How to implement the "Pin it" function from pinterest

I'm trying to make a new pin it button just like Pinterest has, I've see the content at that bookmark:

javascript:void(
  (function(){
    var e=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)
  })()
);

I'm new to javascript, so I am not sure how to start to do a new one. I have even no idea where should I start my coding. Is the backend for this Pin it button limited? Can anyone introduce how does this Pin it button works? Thank you so much.

Upvotes: 1

Views: 4790

Answers (3)

bcmoney
bcmoney

Reputation: 2899

The code you posted simply injects a JavaScript file into the page's DOM which will cause it to get interpreted by the JavaScript engine. What you should be more interested in is the code in this file which implements the "Pin It" functionality: http://assets.pinterest.com/js/pinmarklet.js

But since that is minified and somewhat obfuscated and probably proprietary, I would suggest what you want first is an easy to follow tutorial on how to create a Bookmarklet: http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/

Then, you need to think about how you will code your own web application to respond to asynchronous requests to "Pin" or save something. The following two simple but useful JavaScript variables could come in handy if you're just going for a simple "link-submission" type of functionality:

  • document.location.href -- to get the page's URL
  • document.title -- to get the contents of the page's TITLE tags

To compress your code into a single-line as is required by bookmarklets, you could use this tool: http://subsimple.com/bookmarklets/jsbuilder.htm

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Basically what that code does is injects a <script> tag into the page. The actual "pin it" code is located in the pinmarklet.js file.

To make your own feature like this, you can just reuse the code and replace the source with your own JavaScript file.

Side-note: the void(...) part is redundant because the function doesn't return anything anyway.

Upvotes: 2

Ibu
Ibu

Reputation: 43840

If you want to add it to a button here is how:

html:

<button id="pintrest">Pin It</button>

And you script:

var btn = document.getElementById("pintrest");
btn.onclick = function () {
    var e = 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);
};

Now when you click on the button it should run the pintrest code

Upvotes: 1

Related Questions