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 :-)
This second solution has really helped me a lot since a lot of pinterest buttons out there wont automatically detect URL and images!
Would you know how to add a functional count to your second alternative solution?
Thanks!
Yeah mate, it is capable of detecting image & URL automatically :) But as it is a derivative of Pinterest bookmarklet, yet there is no way to display pin count on this button.
Cheers...
Great, thanks for letting me know. This is one step forward at least!
I'll keep trying to work on creating one that can do it all.
If anyone does have a solution that automatically generates URL and images AND has a pin count, feel free to share.
With the alternative, do you need to place that in for everywhere you want it to show up - For example, post the code with each picture and then with the post (so having several of those codes blocks in 1 post) or just one placing in the general html of the blog? (Sorry, been on overdrive the last couple of weeks and my brain is just refusing to understand...)
Hi Jennifer,
I think you wanna add Pinterest pin it button for Blogger :) Please read Add Pinterest Pin It Button for Your Blogger Posts.
Cheers...
Yeah, trying that one but it hates me. lol Seeing what the alternatives are and just what each does. (Don't mind the extra work if it works.)
Yeppy, Now it's working after following that post. right? :)
Cheers...
OK, thanks for the reply... I've just discovered that the 'alternative' solution doesn't work on IE....any ideas?
Hi Lisa,
I just rendered my blog on IE and checked Pin it button, but it's working well on IE dear :) As it's using JavaScript, can you check whether your IE browser blocking any scripts run on it to cause Pin it button stop working on IE?
Cheers...
Hi, javascript is enabled - If I look with the IE8 developer tools, it says there is a syntax error. get the same error on IE7 and IE8.. don't have IE9 as I have XP - which version did you test it on?
Ohw... I'm using XP too. I've got IE 6 and button works well on it. My friends have IE 7 & 8. But they have no problem with Pin it button on my blog. Just installed IE 7 on my PC too. And it works well without any problem dear. You may try clearing cache or re-installing. It's better if you have another browser like FireFox or Chrome in addition to IE too. And ask from your friends who has IE how it goes with your blog.
Cheers...
Hmm, weird. I personally hate IE and would rather not have it at all, alas when designing websites one must attempt to whip IE into shape! I have pretty much every browser going that I can get on my computer!
And you are sure you are testing the alternative solution with the inline javascript:void()?
It just refuses to work on two separate computers with IE for me.
I'm sorry about that dear. But I'm using alternative version on my blog as you can see. If there were problem with it either I get complaints from users or I change code here. Also as it's a derivative of Pinterest pinmarklet, no doubt at all. However check your blog via Firefox or Chrome too.
Cheers...
I had a look at your code on this blog for your own buttin and I noticed you use ' instead of ' as per the referenced script. I replaced ' witht the correct html encoding: ' et voila! no more errors in IE!
Actually I didn't catch your words dear :) Wow... Glad you made it at last. Now enjoy pinning :)
Thanks for stopping by and commenting dear...Cheers...
Thank you so much - this is exactly what I wanted for my website, a simple way to pin any image! I appreciate it!
Hi Erin,
You're welcome dear :) I'm really glad you find it easy and works for your website.
Enjoy pinning...
Cheers...
he there, do you perhaps know how to add a pin it button to images only so not at the end of the page?
Hope you can help me! GR
Hi Eve,
You can find the tutorial for that here ~ Custom Hovering Pin It Buttons for Blogger.
Cheers...
Thanks for this button. I have tried everything and yours is the only one that worked!
Hi Odette,
Wow... Glad to hear you made it and hope you are jumping out of the joy with pinning ;)
Thanks for coming and sharing your compliments dear :)
Have a Pinteresting day :)
Cheers...
Hii,
Great Post.,
Can I change the pinit icon to mine (Official Button).
What i am asking is, can i replace with
I have tried it, but failed to implement it. My image is getting replaced.
Thanks,
Sree
Hi Sree,
As it's based on a JavaScript, the image change would be not effective for official button mate. But you can use your own image with the help of alternative solution, but it has no count though :)
Thanks for coming by and sharing your thoughts on the post mate :)
Cheers...