January 22, 2012

Add Pinterest Pin It Button for Your Blogger Posts




Have you ever heard about Pinterest? If you are interested in social media, you may already know about it. It is the new addition to social network list and becoming more popular on the social web. But if you are not a person in alert, I'd like to include briefing about Pinterest here. Pinterest is a place where you can share and manage online images or videos found on the web. It allows you to create virtual pinboards to categorize content you found and uploaded. These content you uploaded or added to your pinboards will called as pins once after they added to your virtual pinboards.


How It Works?


Pinterest allows people to follow either someone's pinboards or that particular user with his all pinboards to get their pin updates. When you share links on Pinterest, it will always crawl for images or videos on particular link and if it does not contain any of it, you won't be able to pin it. If you wanna get more familiar, just think about people creating pinboards in real world to plan their weddings. People who are using Pinterest will always eager to share inspiring images or videos on their pinboards. So once people found your interesting images or videos, they will start pinning your content too. That's how Pinterest can help bloggers to drive traffic to their sites. So if you have got useful content with images or videos, why don't you let readers pin your content without leaving your blog?


Let Users Pin Your Content


For webmasters, Pinterest now offers pin it button for websites. It will help your readers to pin content just by clicking the button right from your page. So your readers will able to pin your posts and pages to their pinboards without leaving your site. As it is a virtual pinboard exist online, Pinterest will always do crawling for images or videos when someone share a link to their pinboards. Therefore if your posts or pages contain images or videos, you are ready to be pinned. But if you don't have images or videos on your posts, Pinterest button still allows you to specify external image or video to be shared when users pin your content.


Problem on Blogger


But the main problem is, you can't just implement Pin it button on your site. Pin it button does not crawl implemented page automatically as the Pin it bookmarklet do and you need to configure it individually. So official Pin it button always needs to specify exact URL of post and URL of the image or video on the page. But when it comes to Blogger, you can't edit each and every page to add Pin it button individually. So you can't make use of official Pin it button in Blogger. Eventhough you are able to edit your pages and configure Pin it button individually, it will a waste of time if you have many number of pages on your site. But here you will find an alternative way to pin your content which derived from Pinterest Pin it bookmarklet. So Blogger users still able to let their readers to pin content from their blogs. However it has no associated button count. Interested? Let's implement it in your blog.


Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button.


5. Search for following tag within your template

<data:post.body/>

6. Now add below button code snippet just after <data:post.body/> tag.

Notes:

* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.


<b:if cond='data:blog.pageType == "item"'>
<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/mayuradocs/PinIt.png' alt='Pinterest Pin It!' /></a>
</b:if>

Color Indication Information:

   - Pin it Button Image URL

Here you can replace current image URL with your own Pin it button image URL.

I have listed image URLs for default and compact buttons below to select your preferred one.

Default




Compact




7. Now save your template and check your individual posts for Pinterest pin it button.


Credits: This Pin it button is a simple idea which derived from Pin it bookmarklet. But I would like to give credit to Ari Krzyzek for initiating this idea, eventhough I changed coding for Blogger platform.


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.


Mrs. Kelley Dibble said...

In #7, you write, "Add your button code snippet just after that."

WHAT BUTTON CODE SNIPPET?

Dummie here. Seriously. I need s-p-e-l-l-i-n-g it out. "Copy this" and "Paste this." As a Blogger blogger, I've been unsuccessful adding a Pin button and it's sooo frustrating!

Mayura De Silva said...

Thanks for your query Kelley :) I just changed the place of button code snippet in #7. I hope now you can easily find the code for Pin button.

Cheers...

SAM said...

I only have one problem. The image is a e-mail image and not a pin it, even when I change the green to my personal pin it button. Any suggestions?

Mayura De Silva said...

Hi SAM,

I just implemented code in another blog and it rendered with the image of Pin it button. Can you drop your implemented blog URL here?

Cheers...

SAM said...

I got it working: thanks

Mayura De Silva said...

Oops... :) Alright dear. Glad you resolved it.

Cheers...

Wedding Day Tree said...

HI there! I did the code, but nothing happens???

http://www.weddingdaytreeblog.com/

Can you help me and tell me why? Thank you!

Mayura De Silva said...

Hi Dear,

Your Pin it button working perfectly on your blog :) I just tried it and it's functioning well. You may try clearing your browser cache and see if it's working.

Cheers...

Asia K said...

It worked! Great - thanks a ton!

Mayura De Silva said...

You are welcome mate :)

Cheers...

Arpith said...

Great post dude........ Will think about implementing it on my blog.

Mayura De Silva said...

Thanks for stopping by Arpith :)

Cheers...

Tasha said...

Well I tried to two times and still do not see it on my blog so this was not very helpful.

Mayura De Silva said...

Hi Tasha,

What is your blog dear? :) If you let me know I can help you on implementing the button.

Cheers...

Brittany Williams said...

I followed all your directions exactly but the pinit button is not showing up :(

Brittany Williams said...

oh wait. nevermind! :)

Mayura De Silva said...

I hope now it's working for you Brittany :)

Thanks for stopping by...

Cheers...

Mamasha said...

It there a way to change the code so you can see the pin it button below each post when I'm on the homepage of my blog? Right now I can only see it when I click the individual code.
Thanks!

Mayura De Silva said...

Hi Mamasha,

Yeah, you can show Pin it button on homepage by altering code. It will display images on your homepage too. But as it shares the URL of current page, it will share your homepage URL instead of the actual page URL if you try to pin from your homepage. If it doesn't matter, I can show you how :)

Cheers...

Anonymous said...

Hello,
I tried this but it didn't work for me.
Blog here http://bwmbooks.blogspot.com.au/
I am sure I am doing something wrong
Can you help?
cheers
Ben

Mayura De Silva said...

Hi Ben,

Nothing wrong with your implementation mate :) Just click on a post and you will find Pin it button just above comment form.

Cheers...

Tiffany said...

Thank you for this and your positioning post. I only understand the very basics of programming and I was able to easily add this into my blog.

Mayura De Silva said...

You're welcome Tiffany :) Let's get start pinning...

Cheers...

Redonna said...

I'm not sure if I have added this coding correctly or not. I get the Pin It button, but only if I click the post title and open that post individually. The button does not appear if you are looking through my blog posts in a scroll fashion. I hope that makes sense. Any advise would be greatly appreciated: http://perpetual-playtime.blogspot.com/

Redonna said...

Never mind - I just saw above where this matter is previously discussed. Thank you.

Anonymous said...

I am trying to add this but it does not seem to be working for me. Read through the comments, followed what I thought was right but still not seeing anything come up by the comments section in the posts. Wondering if I am adding it at the wrong place. I seem to have 2 of one tag and 6 of the other in my blog coding. ><!!! HELP!!! PLEASE!!! ~gives Leeloo face~

Anonymous said...

Oh blog is - www.surrealconfections.com (It is a blogger hosted site.)

Mayura De Silva said...

Hi Jennifer,

I ll give it a look right now :)

Cheers...

Mayura De Silva said...

You're welcome Redonna :) It's not function as intended if you wanna show it on homepage dear. I hope you got that :)

Cheers...

Mayura De Silva said...

There's a problem dear :) Can you go through your template and see the Pinterest button code is already there? 'Cause I couldn't find it in your template.

Cheers...

Anonymous said...

Double checked. It is in there, resaved a couple of times to be sure.

Mayura De Silva said...

Ohw strange. Alright :) Can you tell me the exact line of code just before the Pinterest button code?

Cheers...

Anonymous said...

After the 2nd:

clear for photos floats


(Tried to put the exact coding in and it wouldn't accept it)

Anonymous said...

Hoping this helps find the issue. I created a jpg file of the steps I took to place the code into the site as well as copied the whole html file for the site to a txt notepad file.

http://surrealdreamdesigns.com/pinterest/

Both files can be found here in the parent directory.

Mayura De Silva said...

That was really helpful dear :) I got the problem. You can find two <data:post.body/> tags in your template. Place your code right after 1st one dear. You've placed it after 2nd one.

Cheers...

Anonymous said...

Glad it was. ^_^ And just Awesome! It worked! Thank you!

Mayura De Silva said...

You are welcome dear :) Glad it resolved now.

Cheers...

Unknown said...

It is working on my site sir but the "count" is not showing? please help.

Mayura De Silva said...

As mentioned in the article, this button has no count option mate :)

Cheers...

Diana Lee said...

Thanks for a very helpful post! This works perfectly.

Mayura De Silva said...

You're welcome Diana :) Hope you are enjoy pinning...

Cheers...

Starr said...

Thanks for your post! It was easy to install & works perfectly. :-)

Mayura De Silva said...

You're welcome dear :) Now I see Pin it button on your food blog. Time to start pinning :)

Cheers...

Unknown said...

Hi. thank you for this. After adding how long do you think it takes before showing on posts?

Mayura De Silva said...

Hi Stephanie,

You don't need to wait for it dear :) It will start to appear once after you add Pin it button code to your template and save it.

Cheers...

Unknown said...

Shit, then i did it wrong.. you cant see it can you?

Mayura De Silva said...

Oh it's alright :) Let's figure it out. Can you drop me your blog URL dear? I'll take a look.

Unknown said...

Really thank you for helping me. It looks right on the HTML

Mayura De Silva said...

Oops... figured? :) Didn't get it dear.

Unknown said...

Sure,here it is www.thedaysthatgoesby.com

Im ar not the best at this HMTL stuff.

Mayura De Silva said...

Oops... Yeah I see Pin it button beneath posts dear. But it doesn't function as it should be. I mean, doesn't pin images on your posts. Did you see that? :)

Mayura De Silva said...

Can you go through this post and add Pin it button according to given instructions? :)

Unknown said...

i can not ieven find it on my blog haha.. I tied getting it inn there using your instructions. If you cant help that is ok :)

Mayura De Silva said...

No dear :) search for pin-it-button in your template and you can find your existing Pin it button code. Remove that one and add Pin it button code give in this post :)

Unknown said...

i just use the ctrl+f function and searched for it, and removed it. then i found the and placed the template right below. and saved. now i really fucked it up. think im gonna give up.

Mayura De Silva said...

Oh dear, you have removed some other codes except for Pin it button code. Don't worry :) Just reset your widget templates and add Pin it button.

Unknown said...

I got it! Your an angel! Thanks :)

Mayura De Silva said...

Oops.. Am I? :) Yey... You did it. Enjoy pinning dear.

Cheers...

Claire Choudhry said...

Mayura, this is so helpful but I still cannot get mine to work. I am new at this so I apologise it is probably something VERY simple!
My blog is http://brightandillustrious.blogspot.co.uk/
can you help me?

Mayura De Silva said...

Hi Claire,

I just had a look at your blog :) You have added it correctly and it's working dear. See it here ~ http://brightandillustrious.blogspot.co.uk/2012/05/lets-begin-shall-we.html. But the problem is your post title doesn't direct you to the post page.

I suggest you to reset your widget templates. However you may have to add your background image or so. Before all, back up your template first.

Hope it helps... :)

Cheers...

Mindy said...

Thank you so much for this. Even this non-techy blogger was capable of following your easy instructions. I officially have the Pin it button on my posts. And I'm pinning your post. :)

Mayura De Silva said...

Hi Mindy,

Now it's pinning time, isn't it? :) Hope you are enjoy pinning with Pin it button on your posts.

Thanks for your compliments dear :)

Cheers...

Marsha Cooper said...

I'm not sure what I did wrong, but it's not showing up in my posts?  

Marsha Cooper said...

nevermind, it is there!  Kind of hard to spot way on the bottom of everything, but a lot better than me having to take the time to post, edit, and post again to get it there!  Thanks

Mayura De Silva said...

You're welcome dear :) Glad you've found it at last. Some just confuse about it's not showing on top of posts. However by default it will appear near post footer.

Enjoy pinning :)

Cheers...

Lady N. said...

Yay! It worked. Thanks. Shared as well. 

Mayura De Silva said...

Woohoo... Great ;) You're welcome dear. Hope you are now enjoy pinning on your blog...

Keep pinning :)

Cheers...

Lillian Russo said...

YAY!!!! Thank you...it worked! I now have a 'Pin it' button on my food blog! =)

Mayura De Silva said...

Hi Lilian,


Yippy, How pinteresting ;) You're welcome dear. Aha, You made it and now enjoy pinning on your food blog...


Thanks for commenting dear :)


Cheers...

abbeyd said...

Thank you for sharing this - it was easy to follow, and it worked! 

Mayura De Silva said...

Hi Abbey,

Yey, glad to know that ;) You've made it and now pinning is just a click on your site. no? Well, now enjoy pinning on your site.

Thanks for stopping by and commenting :)

Cheers...

Lea Rimoux said...

Hello, I was wondering if you could tell me what to change to make the button show on the homepage? I don't mind if it links back to the homepage URL...
Thanks a lot!

Mayura De Silva said...

Hi Lea,

Just remove  and  tags from the code :) You will see pin it buttons on your homepage.

Cheers...

Caroline said...

Hi don't know what I keep doing wrong but my blog is here - http://cgirlonmoon.blogspot.ca/

Keep getting the same thing. tried posting several times. :(

Mayura De Silva said...

Hi Caroline,


Do you have it installed in your blog? :) I can check it out what's wrong with the button if you have placed the code in your template and let me know after then dear.


Cheers...

Michelle Muckala said...

I'm a completely newbie/dummy to pinterest and blogging, and it worked for me! Thank you for the easy instructions that are dummy-proof :)

Mayura De Silva said...

Hi Michelle,


Yey... That's cool... You have made it :) Now start pinning content on your blog dear. Really glad to hear from you.


Thanks for your comment and compliments dear :)


Cheers...

Rebecca Whitlock said...

This works beautifully!

Mayura De Silva said...

Hi Rebecca,


Glad to hear you implemented it on yours dear :) Well, Now pinning time...


Thanks for stopping by and commenting :)


Cheers...

jenna sue design co. said...

Thanks for posting this! I apologize if it's been answered already, but the button only appears when you are viewing the specific post url. When you just go to my main blog url and view the posts, the pin it buttons are not there. You have to click on the post title to get to the post page to see them. Is there a way around this? Thanks!

Mayura De Silva said...

Hi Jenna,


Yes it is :) It appears only on post page and if we allow to show it on homepage, it's just share your home page URL but not post URL dear :)

May be there could be other Pin it buttons available for homepage too. You can Google for that and see :)


Thanks for coming by and sharing your thoughts :)



Cheers...

Traci St. Claire said...

I created a blog and used this code and it worked just fine. Now I changed my template and I can't get the pinterest button to appear no matter what I do. I have frustrated beyond belief. Does anyone have any ideas?

Mayura De Silva said...

Hi Traci,


Did you implement Pint it button code again dear?

What template you are using now? :)


Cheers...

Nikki said...

At this point I don't think the "pin it" button maker will work as is. You have to change code a little. I use weebly for blogging and pinterest doesn't "see" the youtube embedded that way, unless I just use the embed code from youtube. Here is what I did to create the Pin It Button for a video.

Grab the embed code from youtube and use a custom html field.

Next, publish the post and video and put the info into pin
it button maker, create the button. (Do this like you normally would for a picture or badge)

Add the pin it button to the post and republish, at least I needed to for weebly.

Go to your post and use your pin it bookmarklet or "pinmarklet" to capture the video. Click on the video. When the new window comes up, copy the url from there.

Got back to the pin it button custom html in your post, replace the url starting
with http:// ... until &description.



Not sure about other blogging platforms, but it worked great for me.

Nikki said...

I mean, it doesn't work as is for making a pin it button for a video

Mayura De Silva said...

Hi Nikki,

Thanks for your detailed explanation and pointing out the issue with Pinterest exists right now. But the button here is for Blogger blogs dear :)

Here it doesn't use Pin it button maker as it's quite not easy to add pin it button for each and every page by appending custom URLs in Blogger. It's one time installation and appears on posts right after.


So eventhough yours works for Weebly or such platforms, here we have to wait for Pinterest to take the compatibility issue into account. I hope sooner they will fix it :)

Cheers...

Audrey said...

Any chance you can look at this and tell me what I've done wrong. I thought I followed the steps word for word but I'm not seeing the button. Thank you! http://perfectlyoptional.blogspot.com/

Mayura De Silva said...

Hi Audrey,

Unfortunately this tutorial doesn't work with Dynamic Views dear :) You may search for a tutorial applicable for Dynamic Views. I hope you will find one :)


Thanks for bringing it to attention and I'll try if I can do a tutorial for Dynamic Views too :)

Cheers...