Friday, September 27, 2013

How to Add Pinterest button to Blogger Dynamic Views Posts

I probably just became the first man on earth to get the Pinterest's "Pin It" button on every post in the Blogger's Dynamic Views. You guys can check it out in action on my photoblog: Visioplanet Photography. Please do note that this is for Pinning individual posts and not just the blog. A similar tutorial was posted by Yoga on Southern Speakers, which was about how add Pin It button to Pin the entire blog (if you're interested).

This will be a short and concise tutorial on how I did it, and more importantly, about how you can do it. Do make a note that this tutorial is specifically for Blogger's Dynamic Views. For regular templates, there's a plethora of articles online elucidating the same.

How This works:

1. This method will look for an image on your post that is at least 400 pixels wide or high. As in the picture you're gonna pin your post with has a width or height of at least 400 pixels.

2. I can make modifications to this size thing and give one the ability to decide on a photograph chosen by the post author (lemme know in the comments if that's what you want).

Addition info about this:

Before we begin, what my "work around" (if you will) does, is that it shows the "Pin It" button beside the Google's +1 button at the top of every post. Do note, that the +1 button at the top of every post isn't shown in the "Classic", "Mosaic" and "Sidebar" views. But if you guys ask for it in the comments below, I can write a tutorial on how to get the Pin It button beside the facebook like button at the bottom of each post.

This is now available in two formats:
1. Like the +1 butto - both the top bar as well as the share section at the bottom of the post.
2. Just at the bottom of the post (like the facebook button).



The Procedure:

In the previous version of this, there were three steps. Now, only one step is required, which was earlier the Step 3.

Step 1:

In every post that you want to have the Pin It button on it, add the following line at the beginning in the HTML box of Edit Post.

<script src="https://raw.github.com/sudiptosarkar/PinterestForBloggerDynamicViews/master/VisioplanetPinItByImgSize.js"></script>

This will add the button both at the top bar (applicable only for certain dynamic templates) as well as at the bottom of the post.

EDIT: If you want the button only at the bottom of the post, beside the facebook share button, add this line at the beginning in the HTML box of Edit Post instead of the above:

<script src="https://raw.github.com/sudiptosarkar/PinterestForBloggerDynamicViews/master/VisioplanetPinItByImgSizeInShareSection.js"></script>


EDIT: As of 13th October 2013, this also shows the pin count beside the button.

I have no idea how to do this from the Templates -> Edit HTML (that will only need to be done once and not on a per post basis). If you know, lemme know in the comments below.

21 comments:

Tony Valentino said...

did you ever write the tutorial on putting the pin button at the bottom of the page near the facebook button. if so, i would be interested in knowing.

Sudipto Sarkar said...

There's a slight change in Step 3 for that. Check out the EDIT I just made above... Lemme know if you encounter issues with that.

bitesncrumbs said...

Does this show the pin button on androids? I tried to access my blog through the phone and I cound not see the pin button.

Sudipto Sarkar said...

@bitesncrumbs It doesn't show up on phones... That might require changing the mobile template... I'll look into it, though I'm doubtful if I can get it done...

Aida Rodriguez-Vega said...

Great thanks! For some reason I can only see the button in preview, when I post the button disappears. Any idea why?

Srikar Reddy said...

Thanks for the break through. I've been looking for this and it took lot of time for me to find it.

I don't know anything about html. Do I have to add the same lines or change them slightly for my blog?

I got this doubt because I'm seeing Author name of the blog and blog's name in it.

website design said...

Thank you for this post. You have a great mind and ideas everyone should have this kind of write ups. You got my +1 for this blog.
website design

Sudipto Sarkar said...

@Aida Rodriguez-Vega Sorry no... :(
But from what I see, you have used the code in this post: http://architectureandeverythingelse.blogspot.in/2014/01/gods-own-junkyard.html

And the button is showing up just fine...

Sudipto Sarkar said...

@Srikar Reddy You won't have to change that code at all... Also, the blog name and author name might already be part of your template. This code doesn't do anything other than show the button... :)

Also, make sure you paste either of the two codes (in the post) at the beginning of every post you'd want the button on...

Sudipto Sarkar said...

@website design Thank you... :)

James Shields said...

You can add the code to post template in blogger settings to keep from having to add the code each time.

Sudipto Sarkar said...

@James Yes... That's actually what I do in my blog... :)

Thanks for pointing it out though... It should help those that aren't already aware of that... :)

Jayson Santos said...

Thanks! This is awesome. Worked perfectly on my blog. jaysonsnts.blogspot.com

Vimmy G. said...

This is a life saver Sudipto. you are a genius! This works awesome on my mac.
-Vimmy

Chaitali Patel said...

Hi, this is so useful. I haven't found another website that solves this problem for users of the dynamic template. I had a query though. The pin it button appears at the bottom and when I click on it I am allowed to pin only the first image in a post. How do I pin multiple images from a post? Thank you so much!

Sudipto Sarkar said...

@Jason, @Vimmy, @Chaitali Glad I could help... :)

Sudipto Sarkar said...

@Chaitali, I'd have to write another script for that functionality... Lemme research further into that and I'll get back with another post... :)

mytravels said...

Amazing !!! Thank you so much, this was really helpful !!!

Emma Bartley said...

This is solo useful please can you write something similar to allow me/people to add other buttons to the bottom of the post in dynamic view as I would love to add a follow me button for twitter or a follow me on bloglovin button, but I am not a HTML whizz unfortunately

Irreligious Guru said...

Thanks for this cool script, but I was not happy with adding it to every post so found a way to get it to work with just adding it to the end of the template. I added a timeout based poll function to check whether the button exists (to handle the page navigation case where no DOM updates occur.) Works well so far! See http://irreligious.guru/js/pinterest.js

Sudipto Sarkar said...

@Irreligious Guru Awesome dude! I couldn't for the life of me, make it work on the template code! This IS awesome! :)