I am super obsessed with Pinterest right now. It is the perfect pick me up and a way to stay inspired and fueled with a million great ideas for my life, my home, my kids and my kitchen. If you have not heard of this amazing site yet, please check it out. You will not regret it. Not only is Pinterest good for you, it can be great for your blog. Each and every day I see tons of people saying that their greatest source of traffic is now Pinterest over twitter, StumbleUpon or Facebook. That is really saying something! It goes without saying you want it to be easy for people to pin your posts!
The problem is, for a site that is so big on sharing, it is not the easiest site to implement into your blog. After a long time spent finding the code, I finally have the little PinIt button in my GetSocial plugin that floats in the left side of my page and I could not be happier! Now I do not have to worry about going to each individual post and choosing a URL and image. Of course I still can choose to do this by using the Pin It instructions on the goodies page, but by having it right there with the other sharing options makes it available on each and every post I have ever written. Of course, I have added it to this post…feel free to pin!
I finally found the code snippet you will need at Chykalohpia and then I just changed it a little to get what I wanted.
The Magic Pinterest Code
If you want the PinIt button at the end of your post with other social media sharing buttons like twitter or facebook you have a few choices.
- You can use a plugin like GetSocial as I have and add it to the additional options in the menu.
- You can add the code to the end of each post or page in the HTML view. This option is not preferred if you have other social media sharing icons here that will not match your new PinIt button. However, it will work.
- You can add the code to the loop of your post and / or page files. Usually these are single.php or single-post.php.
- If you are using Thesis (as I am) or another theme that has hooks you can use your hooks to add this code and the button to the bottom of posts or pages. I add code directly to my php files but you can easily break your blog this way so if you are using the Thesis plugin for hooks you would use the Thesis_Hook_After_Post.
Without further ado, the code! Please note that this image pulls from one of my sites. If you have a particular PinIt button you would like to use, make sure to replace the src portion of the code below with your own image file location.
|
1 |
<div><a href="javascript:void((function(){var%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)})());"><img style="margin: 0 0 -5px 0;" onclick="doPinIt();" src="http://www.tiptopnest.com/wp-content/uploads/2012/01/pinitbutton.jpg" alt="Pin It" /></a></div> |
As a note, when you add this to the end of your post you can modify it’s placement using the margins in the code above and / or by applying specific css rules to it.
Using the code with Get Social
I chose to add this to my Get Social plugin because it puts them with the other sharing items. If you use a sharing plugin and it allows you to manually add a site like pinterest, this should work. Get Social is awesome because it floats next to your posts and you have the option of easily setting in the menu where it floats, how far down it starts, what color it is and what icons you want to show.
The simple code to add for Get Social is as follows. You simply add it in the box!
|
1 |
<div class="sharebutton"> <div><a href="javascript:void((function(){var%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)})());"><img style="margin: 0 0 -5px 0;" onclick="doPinIt();" src="http://www.tiptopnest.com/wp-content/uploads/2012/01/pinitbutton.jpg" alt="Pin It" /></a></div></div> |
Here’s what my profile looks like. It is full of things I love! I would love to share Pinterest with you so please check out my profile and of course, let me know if you have any questions! Let’s Get pinning!
I am the Ringmaster of this circus. I have 3 small children who don't know what that means so I just say "Boss" and they get that. I am a mom who loves to write, build things, make things and love on my kids and my hubs. I am also in the midst of a love affair with social media. Always busy, usually laughing and never without words. Thus, Mommy Words. 
{ 11 comments… read them below or add one }
Twitter: AlisonSWLee
January 10, 2012 at 1:37 am
You are a coding machine
I do love Pinterest too – I go there now to look for recipes instead of Googling them!
Alison@Mama Wants This´s last [type] ..Guest Star: Kir of The Kir Corner
Twitter: GalitBreen
January 10, 2012 at 8:09 am
I’m over the moon for pinterest, too! Thank you so much for the code work!
Galit Breen´s last [type] ..Memories Captured, Another Start
Twitter: MTDLBlog
January 10, 2012 at 10:24 am
I adore Pinterest! I need to add this to my get social plug-in – another great way to share our blogs with a new audience! Thanks for the tips!
Nice work! Can’t wait to implement.
I love Pinterest! I can’t wait to use this to get the social plug-in!
LOVE your floating bar on the side…I might do this too. Thanks for the great info!
I needed this! The plugin I was using was completely unreliable. Thank you!!
Everything works right up to the click. When I click the Pin It button nothing happens. Where does the DoPinit() happen? Is that function that needs to be added to the blog code or is part of the java script from Pinterest directly?
Thanks!
Ed
Twitter: mommywords
February 1, 2012 at 8:43 pm
Ed I don’t know what theme you are using but another person had that same issue. I use Thesis as does the other woman but the thesis designers themselves cannot figure out why it is clickable with the exact same url as the PinIt button but then goes nowhere. I am still trying to figure it out but in the meantime I did get the code figured out for putting all of your buttons at the bottom of the post. If this is interesting to you I will be posting soon. So sorry for the problem. I assume it is another plugin issue but I just can’t be sure. Good luck!
Twitter: HotChocoBlis
February 10, 2012 at 10:24 am
Thanks for the info about Pinterest! I love it too. I added it to my website and it caused some security problems with my SSL certificate so I had to temporarily remove it. Just so you know, the folks at Pinterest said they are working on fixing that. I am going to try just adding it to my blog using your instructions. Thanks again.
About the time you posted this I created a Pin It button WordPress plugin that hopefully works better than the others out there. It’s a bit different in that it asks the user to pick an image like the Pinterest bookmarklet though. If you give it a shot and let me know what you think.
http://wordpress.org/extend/plugins/pinterest-pin-it-button/
Phil Derksen´s last [type] ..This Week in Pinterest [2012-02-13]
{ 1 trackback }