Control your Pin Descriptions

Put your words in pinners mouths.

What if you could choose what people say when they pin your products? Instead of pinners writing “love!” or “must do,” you can influence them to include thorough descriptions.

      Click on this Pin and read the description. Then, click on it from Pinterest to be taken to my site. What do you notice? That’s right, the text on Hillary’s pin is identical to the italicized project description I wrote. You can put your own words in pinners’ mouths by having the Pin Button pull text directly– and automatically– from your website.

      This is admittedly a bit advanced for the average blogger.  But if you don’t happen to be technologically inclined, show this post to a buddy who is and let them help you out.  Here’s how you can make your ‘Pin It’ button content aware and backwards-compatible with your existing pages.

      Each of my articles already had a project summary, clearly differentiated from the rest of the body text with standard CSS. Wouldn’t it be great if this text was prepopulated into that project’s Pinterest form? All it takes is a little understanding of Pinterest’s API, and a little javascript knowhow.
The ‘Pinterest Goodies’ (http://pinterest.com/about/goodies/) page details the syntax for ‘pin it’ links. The href format is as follows:
http://pinterest.com/pin/create/button/?url=urlOfPage &media=urlOfImage &description=descriptionText

     If you were using a server-side language like PHP, you’d be done. You could simply echo the urls and description you want into the appropriate URL variables. My project summaries are lumped in with the full body text, however, and PHP would have a harder time picking them out. Instead, it makes more sense to use the natural DOM parsing abilities of jQuery.

Here’s how to do it:

Copy code text

Let’s look at this step by step:

1. If there’s a Pin button on this page, store off its href into a variable.
2. Use jQuery to identify summary text– mine’s easy because it’s the only italicized text in the post. Store that text in a variable, and make sure it’s less than 500 characters: short enough to make sense as a Pinterest description.
3. Change the href of the link to be everything up until the ‘&description=…’ part, plus our new description, formatted in an URL-friendly way.
4. Maybe the trickiest part here is making sure this all happens before Pinterest’s javascript runs. Their javascript will run through and swap links out for iframes, and it will be too late to inject a new description. So, rather than including their .js in the ordinary <script src=… way, use jQuery’s ‘getScript’ function to load the script only after you’re done tweaking your links.

So, when users hit the Pin It button on your post, it will draw the text you have specified. At this point, pinners have the option to delete the text and write their own description. But in my experience, very few people do. This essentially gives you control over what pinners are saying about your products!