- Posted on: August 23, 2011
- Category: Blog 36 Comments →
-
- Tweet
Add Pinterest Pin It Button To WordPress Page & Post
I was working on one web design project for vintage event/theme rental company, Intaglio Vintage of which you have seen the teaser on my Facebook Page. And since Pinterest has been very common for the owners, I propose the idea of adding the Pinterest Pin It button for their blog post and inventories.
After researching for some plugin or similar feature for this, I only found the Pin It Button for the Bookmark on Website Browser. You can use it by simply dragging the button to your bookmark of either Safari, Chrome, or Firefox.
Another one is Pinterest Follow Button, which I have also added on Intaglio Vintage’s website header. Pinterest also provide the Pin It button for website which I thought could be the solution for this project. Sadly, this only works if you set the url of the website and url to the image of which you want people to pin. In the plus side, it works like the Facebook Like button as it comes with the count bubble.
Then I decided to grab the code from the Pin It Button for Bookmark, attach it on a button and add it to the website. After few test and help from PiotrKrzyzek.com, I managed to add the Pin It button (Designed by Chykalophia Design) to the end of the blog post as shown on the image below.
So now, how did we do it you ask? Here’s the cheat code you can use:
<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="YOUR PIN IT IMAGE URL HERE" alt="Pin It" onclick="doPinIt();"/></a>
ps: Place the cheat code above under the content of your post or page. Do not forget to set the <img src=”YOUR PIN IT IMAGE URL HERE”> to your Pin it Button. Then, you can style it using CSS. :)
In addition to this post, I’d also like to share some freebies. Below are the preview on the Pin it Button I’ve designed. You can get the Pin it Button Collection from my Download page. Enjoy, and happy pinning!
For those who didn’t get it work, please make sure to change the Pinit button URL to your own button. However, if you would like to use the one I designed, simply copy and paste the code below:
<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 style="margin: 0 0 -5px 0;" onclick="doPinIt();" src="http://chykalophia.com/images/pinit-compact.png" alt="Pin It" /></a>
And if you are familiar with the coding, I’m pretty sure you can also use the Pin it ribbon corner button I made to work. See my Showcase page for the live sample.
Home Cooked Meal Poster
I couldnt get this to work. Using WP theme and have shortcodes built for FB, TW and G+1. really want to add the pinit button. the code pinterest’s site create doesnt work either.
I copied and pasted your cheat (with my image) but to no avail. thoughts?
in which part of your website do you want it to be? There might be something wrong with the placing as it works perfectly fine on my post page and even on the showcase page.
try placing this code:
http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());” rel=”nofollow”>
Place it on your blog-single.php or single.php file. You can add it on your blog post but in html view after the content, but you will have to fix the placement for the position using css.
PS… thanks for looking out for the rest of us. :)
Hey! thanks for the reply! I left a comment with a link to the page I put it on. It might have been deleted as potential spam. I altered it and placed it below.
I’m not really worried about the CSS and alignment right now, I just want the darned thing to show up. Is there something wrong with the code as I’ve entered it?
http://www (dot) merrimackandmonitor (dot) com/portfolio/fixed-pixar-plumbing-lamp/
IT WORKS! You are awesome. Thanks!!
It’s not working on my site. It looks like this bit
+Math.random()*99999999);document.body.appendChild(e)})());
is not getting appended.
http://uniimi.com/blog/2011/08/08/how-you-can-help-morgan-jason/
(It’s in the floating bar on the right.)
Thanks because your code was incorrect. Try to replacing it with this:
Hi Ari,
Thanks for your response (and for the code in the first place)!
Unfortunately I don’t see any code in your response.
I sent you the code on the email :)
Thank you so much! It works!
thanks so much for this! it’s hard to find a good pinterest plugin out there. now, i’m seriously a novice, so please forgive the stupid question, but what do i do with the PSD to prep it to work for me?
thanks in advance for your patience with my ignorance :)
well the psd is actually an extra if you can play with the code and would like to use the buttons I have on the psd, you can use it on your web. :) but if you’re not familiar with coding, it should be best to leave it for now :)
Thanks for the code. I created my own pin it img and placed it in my floating social widget. At first the code kept breaking but I figured out what was going on. The quotation marks surrounding the YOUR PIN IT IMAGE URL HER looked a little weird. I deleted and replaced them and it worked like a charm!
That’s good to hear, I checked the button you have, really nice and go along with your color theme :)
Thank you! This is so cool. :)
This is great. We do a daily video blog, and we have a lot of mommies that come to our site (and they all seem to really enjoy using Pinterest)
If you have time would you mind looking at one of my single posts and let me know if this would work to the left of the posts where I have my shares. I believe I added those in my theme files.
tanks for the great info!
Just wanted to say thank you!
Another thank you here, and also I’m linking to your article from my blogging site Crafterminds.
Hi there! Thanks for the information on adding the “pin it” buttons to a blog. Unfortunately I was not able to get it to work b/c I am on WordPress.com (not .org) and it blocks java script! I was curious if you have any suggestions on getting around that with a button that is just an image that links to the “pin it” setup?
Right now I have the code in place based on what is on Pinterest Goodies Section, and my site is defaulting to a link, rather than showing the button. It is automatically taking the original code shown as (Pin It
) and changing it to (Pin It)
You can see how it looks at the bottom of this post… it works, but you can’t see the button… and I fee like that is so important! I would very much appreciate it if you have any suggestions!
Thanks!
Monica, I honestly don’t know how to help you since you mentioned that WordPress.com blocks Javascript :( I was going to suggest you the Pin It button from Pinterest Goodies Section, that’s what you can use for now.
As for the button you mentioned that you can’t see, can you define on which button are you referring to?
Sorry code didn’t show Original: ‘a href=”http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fperdueosity.com%2F2011%2F11%2F21%2Fwe-did-it-its-our-photo-heart%2F&media=http%3A%2F%2Fperdueosity.files.wordpress.com%2F2011%2F11%2Fmg9270-x2.jpg&description=Framed%20Photo%20Heart%20for%20Wall!” class=”pin-it-button” count-layout=”none”>Pin It
‘
Changed: ‘a href=”http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fperdueosity.com%2F2011%2F11%2F21%2Fwe-did-it-its-our-photo-heart%2F&media=http%3A%2F%2Fperdueosity.files.wordpress.com%2F2011%2F11%2Fmg9270-x2.jpg&description=Framed%20Photo%20Heart%20for%20Wall!” class=”pin-it-button”>Pin It</a'
See what it looks like here: http://perdueosity.com/2011/11/21/we-did-it-its-our-photo-heart/
ah… I see what you mean for the button. The problem is that you should have added the image reference as in the img src=”the URL of the image or button” see on the post above that I put the pin it button image inside the script. :)
Thank you for this tutorial. Worked great, I was able to add it to my WordPress blog inside the singlepost.php file and it added it to all my old posts too!
Pintrest is very addictive ;-)
Excellent handy tutorial. I was able to easily incorporate this into the two self-hosted WordPress sites I publish.
Any thoughts on how to include the Pin count, though? Pinterest does that on their “Pin it” button for website (Goodies), but, as you mentioned…that solution requires adding the button manually to ever single post.
Colleen, the main issue with the PinIt button with count is that the count only begins for one specific image, that is why it currently being set up as mentioned on the Goodies section.
I feel really dumb… I just want this darn thing to work and can’t figure out how to get it set up. I tried posting it in my single-post.php but that didn’t seem to do anything. Help?
Jennifer: try placing it right after the post content inside your single-post.php or try placing it right above the “entry meta bottom”
I really want to add the Pinit ribbon corner to my site. Did you provide the link above?
Hi Viviana,
Sorry, but that’s more advanced and take more than 1 hour to figure out and testing it to work perfectly. Should you really need this for your website, contact me through the contact page and we’ll do our best to help :)
THANK YOU from the bottom of my heart. :)
I took your directions, tweek’d it a bit and have it working perfectly for my sites needs. I of course gave you credit on the blog post I made. Just wanted to say thanks
Thank you so much for this! I got this working on my WordPress blog, but I also added it to my Zen Cart shopping site and it works there too. You rock!
Hi Ari, just wanted to say thanks so much for this tutorial and for the fabulous graphics. This didn’t work with my theme, but I came up with a different method which is working well. I’ve posted it here: http://www.tomaytotomaaahto.com/tools-and-tutorials/how-to-turn-your-images-into-pinterest-pin-it-buttons-wordpress and linked back to you. Please check it out and let me know if you object at all to my encouraging people to come and get your graphics. All the best, Ruby