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.
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:
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.
