One of the easiest and most important things any website can do to help people to discover their stuff on Pinterest is to install the Pin It button. The Pin It button makes it super simple for people to save and share things they find on your site. These Pins link back to your website and increase the spread of your content across Pinterest. The Pin It button is easy to integrate. You just copy and paste a few lines of HTML and JavaScript into your pages, and you're ready to go. To build your own Pin It button, just fill out the form in our Widget Builder, copy the code, paste it into your page, and you're set!
In the Widget Builder, we'll provide the code for you based on the URL, image and description that you provide us. You can also specify whether you want your page to show a count with the number of Pins made from the URL.
The generated code will look something like this example, which has been broken into several lines for readability:
<a href="https://www.pinterest.com/pin/create/button/ ?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F &media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg &description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above"> <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /> </a>
You'll also need to include some JavaScript in your HTML document. To immediately load our JavaScript, include this line just above your closing
</body>
tag:<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
If you'd like to load the JavaScript asynchronously, you can do so by copying and pasting this snippet anywhere on your page:
<script type="text/javascript"> (function(d){ var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT'); p.type = 'text/javascript'; p.async = true; p.src = '//assets.pinterest.com/js/pinit.js'; f.parentNode.insertBefore(p, f); }(document)); </script>
You only need to load this script once per page, no matter how many buttons or widgets you use.
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.