Pinterest | Open Social

Standards Based Development

meta Pinterest Elements

My links on Pinterest

Pinterest Icon & Button Set

Buttons

Markup


<ul>
  <li><a href="http://pinterest.com/jalbertbowdenii/">
  <img src="http://passets-lt.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a></li>
  <li><a href="http://pinterest.com/jalbertbowdenii/">
  <img src="http://passets-lt.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a></li>
  <li><a href="http://pinterest.com/jalbertbowdenii/">
  <img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a></li>
  <li><a href="http://pinterest.com/jalbertbowdenii/">
  <img src="http://passets-lt.pinterest.com/images/about/buttons/small-p-button.png" width="16" height="16" alt="Follow Me on Pinterest" /></a></li>
</ul>

Pin It Button

To include a Pin It button, simply add the following hyperlink where you would like the Pin It button to appear:


<p>
  <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fhome.com&media=http%3A%2F%2Fhome.com%2Fi%2Fimg.png&description=Description%20of%20pinned%20page" 
  class="pin-it-button" count-layout="horizontal">
<img border="0" src="http://dev.bowdenweb.com/os/pinterest/i/pinext.png" title="Pin It" />
</a>
</p>

Then add the following script directly after the closing body element:


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

Note: developers can have as many Pin It Buttons in a document as they please, but the script needs to only be included once!

Bookmarklet

pin.it

Markup


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)}
)());