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','.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.

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./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.

• javascript
• pinterest

3 Answers 3

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.

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./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./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 e 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 press your code into a single-line as is required by bookmarklets, you could use this tool: http://subsimple./bookmarklets/jsbuilder.htm

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./js/pinmarklet.js?r=' + Math.random() * 99999999);
    document.body.appendChild(e);
};

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