Heres one for site owners and developers, some simple code snippets to help you get the most out of the Pinterest Pin It button on your site. Pinterest has provided some great new options to really dial down the value of the Pin It button for site owners.
If you haven’t got one already then add a button to your site via Pinterest Pin It button options
The following 5 tips should help you really drive benefit from having a Pin It button on your site.
This great bit of script creates a Pin It button when a user hovers over an image on your page. Once setup all a use needs to do is mouse over an image and Pin It button appears. This is great for image rich pages as it allows the user to select the image they wish to pin straight on the page. It also avoids users having to scroll to the top or button of a page where sharing buttons are normally located.
Grab this line of script and paste it just before the tag.
Or if using the official button code pinit.js then all you need to add is data-pin-hover=”true”. Make sure you only call pinit.js only once per page.
2. Set Source URL
This snippet allows you to specify a set URL for an image. For example on a page where you use images as anchors which link to various other pages you can use this to make sure the pinned image links back to the page the image is on. Just add the data-pin-url attribute to the relevant tag.
3.Pin the Best Image
As we know large high quality images can influence page load times or don’t fit page design requirements. This snippet is great for situations where you might display lower quality images (maybe you use thumbnail sized images on your page) or as we know vertically oriented images bring more engagement on Pinterest but on a website landscape is better. What the attribute data-pin-media allows you to do is reference a higher quality, larger or one with different orientation which will be then used as the pin instead of the actual image on the site.
http://cdn.mysite.com/myimage.jpg" data-pin-url="http://mysite.com/mypage.html" data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"/>
4. Pre-define the Pin Descriptions
Pinterest Requires a description for every Pin. By hard coding the description on site when users create a pin from your page the description will be automatically prepopulated. Not only does this make it quicker and easier for users to Pin from your site but it also lets you improve your visibility by having accurate descriptions, especially for Pinterest native searches. Try to use not more then 7 words that are actually descriptive of what is shown in the picture, and as Pins stay around for a long time don’t include any time sensitive wording or other wording that might not be accurate at a later date (think events and short term offers)
http://cdn.mysite.com/myimage.jpg" data-pin-url="http://mysite.com/mypage.html" data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg" data-pin-description="XYZ Dive centre Students with Manta Ray"/>
5. Get more repins on your Pins
Those pinning their own content to their business pages can also then take each pins id from Pinterest and add it to the tag with the following data-pin-id attribute. This means that when people Pin an image from your site that you have previously pinned to your boards you will also get a repin, including the email notificatioin of this so you can also keep track of pins direct from your site.
Not sure what your Pin id is? Then go to you boards and click on the relevant Pin and its the long number after pin/ as in this example http://uk.pinterest.com/pin/169166529726763540/