April 3, 2012

How to Add Pinterest Pin It Button for Your Website




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(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+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


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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


L. Naple said...

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!

Mayura De Silva said...

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...

L. Naple said...

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.

Anonymous said...

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...)

Mayura De Silva said...

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...

Anonymous said...

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.)

Mayura De Silva said...

Yeppy, Now it's working after following that post. right? :)

Cheers...

Lisa said...

OK, thanks for the reply... I've just discovered that the 'alternative' solution doesn't work on IE....any ideas?

Mayura De Silva said...

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...

Lisa said...

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?

Mayura De Silva said...

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...

Lisa said...

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.

Mayura De Silva said...

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...

Lisa C Morena said...

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!

Mayura De Silva said...

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...

Erin Niehenke said...

Thank you so much - this is exactly what I wanted for my website, a simple way to pin any image!  I appreciate it!

Mayura De Silva said...

Hi Erin,

You're welcome dear :) I'm really glad you find it easy and works for your website.

Enjoy pinning...

Cheers...

Eve said...

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

Mayura De Silva said...

Hi Eve,


You can find the tutorial for that here ~ Custom Hovering Pin It Buttons for Blogger.


Cheers...

Odette said...

Thanks for this button. I have tried everything and yours is the only one that worked!

Mayura De Silva said...

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...

sreeraj meloth said...

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

Mayura De Silva said...

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...