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