CODEWITHSUNDEEP
youtubevimeopinterest
Dave
Dave

Reputation: 9167

How do I create a "pin it" URLs for videos (for Pinterest)?

I'm creating dynamic WordPress "pin it" buttons and have it working on pictures.

For example, when I generate this URL it launches pinterest's pin it page:

http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.mywebsite.com%2Ftest-post%2F&media=http://www.mywebsite.com/wp-content/uploads/2012/09/picture.jpg&description=Test+Post

How do I go about doing this for a Vimeo or Youtube video?

http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.mywebsite.com%2Ftest-post%2F&media=________????_________&description=Test+Post

Do I just put a vimeo or youtube URL there?

Upvotes: 2

Views: 3375

Answers (2)

Dave
Dave

Reputation: 1718

To pin a Youtube video you just need to media link to be a youtube thumbnail. Pinterest then automatically recognizes it as a video.

To get the youtube thumbnail you need to get the video id from the youtube url as explained more here

var youtubelink = "http://www.youtube.com/embed/wkBstmXvGtk"
var youtubecode = youtubelink.match(/\/embed\/(.*)/)[1];
var pinimage = 'http://img.youtube.com/vi/' + youtubecode + '/0.jpg';

I wrote a full tutorial on it here:

http://thingsilearned.com/things/pin-button

Upvotes: 4

erinbrown
erinbrown

Reputation: 2273

Unfortunately, I think the script used to generate a web-based pin is not capable of handling video.

I utilized the following code...

<a href="http://pinterest.com/pin/create/button/?url=URL&media=MEDIA&description=DESCRIPTION" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

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

...where the URL was the link to the YouTube video (or permalink). The problem is, the pinit.js script does not parse image information from the url or provide a video screenshot for the pin. It comes up blank, and without a value for media, the script won't create the pin.

To confirm the problem is within pinit.js, I substituted that script for pinmarklet.js. What that script does is create an overlay on the page, with the screen shot of a video and a "PIN IT" button overlay on the screen shot. But that's probably not the type of user experience you're looking to present.

One possible option (and you could get away with this through feeding the URL, media and description values dynamically) is to feed the URL with the video URL, create a screenshot and feed that into media, and finally, add the description. The drawback to this is, you'll only be pinning the image and not the video directly.

Sorry to be the bearer of bad news.

Upvotes: 2

Related Questions