Are you a victim of Pinterest craze? Pinterest has been evolving on the web from 2010. But it has got most of user attention lately in the 2012 and lead to some critical copyright situations too. Therefore they had to offer a solution to block sites from pinning to prevent businesses getting sued on Pinterest and another portion of users deleted Pinterest accounts to be safe from spreading sensitive content. However still Pinterest is a traffic generator. People love being there and pin interesting content they find on the web. So you might wanna give it a try too. Or else your visitors wanna pin your content. But I don't think that you want them to do it in hard way. Do you?
Pinterest offers you an easy way to pin content right from your blog or website - Pinterest Pin it buttons. It allows your visitors pin content without leaving your website and further it is functional as the other popular social buttons such as Twitter tweet and Facebook like buttons. Here we gonna discuss two ways to implement Pin it button on your website. Either you can use official Pin in buttons or use alternative solution if you are not mad at official buttons and showing off counts. Official Pinterest pin it buttons let you customize each piece of information being pinned via the pin it buttons and so you will find it really helpful if you wanna let visitors pin exact content you specify. But the alternative solution is much more simple if you wanna let visitors pin content where the button is on. So it will crawl for images on the page and let visitor select preferable one before he pin it down.
Before You Go:
If you are a Blogger user and wanna implement Pinterest Pin it button for your posts, read Add Pinterest Pin It Button for Your Blogger Posts.
Official Button
Here you can implement official Pin it button on your website to let your visitors pin your content easily as you specified with the button. Official Pin it buttons are capable of showing pin counts and if you are not interested in showing counts off, you can use no count button too. However it allows you to specify the image, page URL and description to be pinned. So users have no control over the pin and the pin happens as you expected.
Steps:
i. Add below line of code just before the </body> tag in your template.
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
ii. Now add below button code snippet where you wanna display Pin It button.
<a href="http://pinterest.com/pin/create/button/?url=[Page URL]&media=[URL of the Image]&description=[Description of Content]" class="pin-it-button" count-layout="[Button Layout]"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
Color Indication Information:
- Page URL
Specify the page URL need to be pinned
- URL of the Image
Specify the image URL you wanna pin with
- Description of Content
You can add a description for your content or pin to be attached with when the content being pinned. But here you need to be careful about using spaces and special characters in your description. Except for regular ASCII characters, you need to use URL-encoding representation for special characters. Refer URL Encoding Reference for more information and there, you can easily convert your description too.
i.e: Regular - My Name is Mayura URL Encoded - My%20Name%20is%20Mayura
If you don't wanna add description, remove the attribute and value from the code snippet - i.e: &description=[Description of Content]
- Button Layout
There are three layouts for Pin it button. Select your preferred one and specify layout style name here.
Horizontal Layout
Layout Style Name: horizontal
Vertical Layout
Layout Style Name: vertical
No Count Layout
Layout Style Name: none
Alternative Solution
This is an alternative solution for official Pin it button where you don't have to worry about specifying page URLs or image URLs. This is a derivative of Pin it bookmarklet and it does crawl for images on the page where the button is on. So it will detect the page URL automatically. Here user will be able to select which image to be pinned and they can specify their own description with the pin too. Further, you don't need to spend much time on implementation. But it's not capable of showing pin count.
Steps:
You just need to add below Pin it button code where you wanna display the button and no more customizations needed unless you wanna change the button appearance.
<a href='javascript:void((function()%7Bvar%20e=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)%7D)());'><img src='https://sites.google.com/site/mayura4ever/PinIt.png' alt='Pinterest Pin It!' /></a>
Color Indication Information:
- Pin it Button Image URL
Here you can replace current button image URL with your own Pin it button image URL.
I have listed two of image URLs as default and compact below to select your preferred one.
Default
Image URL - https://sites.google.com/site/mayura4ever/PinIt.png
Compact
I have listed two of image URLs as default and compact below to select your preferred one.
Default
Image URL - https://sites.google.com/site/mayura4ever/PinIt.png
Compact
Image URL - https://sites.google.com/site/mayura4ever/PinItCompact.png
Credits: The alternative solution of Pin it button is a simple idea which derived from Pin it bookmarklet. But the credit should goes to Ari Krzyzek for this idea, eventhough I've made some changes.
Enjoy :-)
