- Posted on: November 22, 2011
- Category: Blog 49 Comments →
-
- Tweet
Add Pinterest Pin It Button To Blogger Post
Last time I wrote about how to add Pinterest Pin It button I designed to WordPress Page and Post, today since I realize that other Pinterest addicts who happen to love blogging as well are using Blogger instead of WordPress. So cheer up Bloggers, here’s the simple way to add the Pin It button to your Blogger Posts.
The Steps:
Important: Always backup your template before you do anything described in this post! I will NOT responsible for any damage or template error on your blogger template.
- Go To Blogger > Design > Edit HTML
- Click Expand widgets templates box
- Search for <data:post.body/>
- If you want to add the button just below your post titles then add the cheat code below just above <data:post.body/>
- If you want the button appear at the end of your posts then paste the following cheat code just below <data:post.body/>
<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>
- Hit save and that’s it!
More info about the Pin In Button I designed and some related info about the button.
Note: The above code is currently using my PinIt-Compact button, if you wish to replace the button with your own button or Pinterest PinIt button replace the source image “http://chykalophia.com/images/pinit-compact.png” to your button source image/location.
Home Cooked Meal Poster
Thank you so much for this tutorial. No one was able to pin from my blogger site for some reason and no one at blogger or pinterest would help. This now allows people to pin my images! Thank you Thank you.
:D always a pleasure Claire
I tried this and it wanted to pin everything on my blog page. Opps, I must have done something wrong. :(
Tammy,
This code is meant to let you or your website visitor to pin any images on your website page/post. Is this something you actually looking for? I’m not so sure if I understand what you are referring, show me a screenshot and I’ll see if I can help more :)
Thanks for this easy solution. I tried a bunch of other sites, but you made it very clear on where to put it and it works great. Thanks!
Worked like a charm the first time. Thanks so much for sharing!
I couldn’t remember how to do this, thank you!!!
Girlfriends Are Like Shoes
Thank you so much for this. I actually think I got it right. That says much more about the excellence of your code than my computer skills. I hope you have a great day. Blessings…Mary
Thank you very much, it worked like a dream!
best instructions I have found, thank you! I have linked to this post for others.
Clear & simple! :-) Thank you!!
Yea!! Awesome!! Totally worked and so easy, thank you!!
Actually- just tried it and when I click it it says “Can’t see any images on this page”… any ideas? But thanks again for the great tutorial.
That is most likely because they don’t provide the image link, like facebook sometimes doesn’t allow the user to grab images.
Could it be because I have it so if someone clicks on a link in my blog it opens a new window?? Sorry- not trying to spam you with questions
Hi Emmy,
Currently you can make the button to open the new window, but once we have the update we will definitely update the code :)
THANK YOU THANK YOU! It worked perfectly! I do have one question….if I have my blog set up for mobile users, will this code also work in the mobile app coding?
For the life of me I can not find anywhere in my HTML….It is begginning to drive me insane, I’ve been at this for the better part of the day…..I must be doing something wrong…..I wish I could copy and paste my whole HTML page and show it to you…..ugh!
Thanks so much! I was pulling my hair out with the other explanations I’d found online!
I think what a previous commenter might have meant is that the button pins the whole blog rather than the specific post the button is located on. I guess it would probably be really complicated to get it to do otherwise, hey?
well, the code was meant to pin any images within a webpage, if the case is to pin 1 specific image, then pin it button provided on Pinterest Help page is the ideal one.
Thanks for the directions – I added my zippy little button above and below!! Many Thanks
Chrissy
Thank you so much for the awesome tutorial!! Had to add it to the top of the post though as when I added the button to the bottom it cut off part of my post template I have set up to show after every post. Any way I can fix that? Thanks again!!
for that though, you might need to play with your css code
IT WORKED!!!! I was so scared to go messing about with HTML, but I am so glad I did!
Works great! Thanks so much!
Thanks for this, best way I have found so far.
However, is there a way so that once an image is pinned on Pinterest, and someone clicks on it, they are directed to the actual blog post where the image comes from, rather than just the blog?
Thanks!
the basic use of pinterest button was simple: it grabs a certain image you want to pin from the website link you pin it from, so if you pin them from a blog page instead of a specific blog post page, then it will link back to the same link where you pin them. Therefore, the current solution is to make sure pinning your image from the actual post, not the blog page.
Do you know why it adds a black border around the pictures when you pin them?
I checked your blog post and the pin it button works just fine, I don’t see the black border you mentioned Jennifer :)
Fantastic, simple to use tutorial. Worked like a dream. Thanks so much :)
Thank you for this button! It’s great. Just wondering, is there a way to get it to appear on the RIGHT? I have my Tweet button on the right and would like the Pin It button to appear just below it. Thanks.
@cindy: you will have to play with the css/the styling code for that
This is so awesome! I’ve looked everywhere for how to have the pin it button automatically added to each post. Your explanation was very easy to follow and the code works just perfectly. Thank you!
Thanks so much! I’ve added the button to my blog and it looks great.
I did notice, as Tammy mentioned above, that if you are on your home page and click the button it will draw images from every post visible on your home page so it looks like you will have to click through to the post to pin a specific post’s image, but I’m hoping this will make it easier for others viewing my site to pin images they like :)
Thank you so much for us bloggers to add the easy tutorial!! I worked at my blog and I already pinned some of my pics. SUPER!!
Hum…Maybe I didn’t do it right. When I’m in Pinterest and click on the image for the pin, it goes to my home page, not the specific post. Is that what was intended? Thanks again for your help :)
Thank you so much! It worked first try, I had been working on this for hours, much appreciated!!
Thank you, you made it so easy, I never thought I would be messing with HTML!
Thank you so much! That was very easy :)
Thanks fo the quick and easy tutorial!
Thank you, thank you, thank you! So simple and easy! Works like a charm!
Stacy
Thank you so much – this was quick and easy!
Your instructions were so clear and easy that it took me only a second to make the changes to my blog template. Thank you!
Thank you soooooo much for your clear instructions! I’ve been going crazy trying to find information adding a button!
Thanks for this! It worked like a charm.
I input the code above and below the and it doesn’t show on my page. any ideas? thanks so much!
Hi Denise, I just checked your page. It seems like the button works fine now :)