Javascript Controlled Pin Button for Images and Videos Posted on May 29, 2013 by Dave Fowler

My sister is making a great new site called Almost A Third Grader where during the summer she posts 3 videos a week for students between 2nd and 3rd grade to keep their skills fresh.

She wants to share them on pinterest and make it easy for others to do the same by adding an embedded button to pin the videos. Pinterest has a great tool for manually creating the widgets but it was a bit unclear on how to do it programatically, and how to do it for video.

Pin Button for Images

For each Pin you need to get the pin's url, image, and description. In the following code snippet I've broken out each of those into seperate variables for ease of use.

Youtube Pins

If you're pinning YouTube videos things are slightly different. You need to grab the YouTube video code from the video link and use that to grab the video's thumbnail from the YouTube API. If the image you pin is from the YouTube API, Pinterest is smart enough to automatically make that pin a video share. Basically you want to replace line 2 from the above code snippet with these lines.

Note that this code assumes you're using the new YouTube embed format (with the path /embed/ in it's URL). Use the commented out example in line 2 instead of 3 if you're using the old embed format.

Placing it in the Page

Finally you'll need to place the code held in the button variable into the page somewhere. If you're using jquery you can embed simply using

$('#placeholder').append(button);

Where #placeholder is the jquery selector for the dom node you'd like to place the button in.