You are Here → Home » Blogger Widgets » Add Dynamic Pinterest Pin It Button For Blogger / Blogspot

Add Dynamic Pinterest Pin It Button For Blogger / Blogspot

by in Blogger Widgets, Bookmarking

Pinterest is a new social networking site where you can share the awesome images found in the web. Pinterest is an online pin board where you can pin web photos/images and the images are displayed on Pinterest with a link to the source page of the image. Your friends and followers can re-pin(share) your image to their Pin Boards making your image and the post on your blog containing the image go viral. Pinterest is the fastest growing and one of the top social networks on the Web. By add the Pinterest Pin It button to your blog, your readers can easily Pin the article images to their Pin Boards and you will get a good amount traffic from Pinterest.

As the title says this is a Dynamic Pin it Button. which will first grabs the image from settings. if it is not available not available, then it will pull the first image from the article. If there no image found in the Article then it take the Default image from settings, and it also adds a Description from the post with 500 characters (max length on Pinterest).

How to Add the Pinterest Pin It Button to Blogger?

Adding Pin It Script for Blogger

  1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Check/Tick the Expand Template Widgets checkbox
  4. Search for </head> and place the below code before it! 
    <script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>

Adding Pin It Button Script

  1. Search for <data:post.body/>
  2. Place the Bellow Pin It Button script before or after it
    - If you add the below code before the <data:post.body/> then it will appear the Before the Post Content.
    - If you add the below code after the <data:post.body/> then it will appear the After the Post Content. 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
	<data:post.body/>
	<script type="text/javascript">
		w2bPinItButton({ 
			url:"<data:post.url/>", 
			thumb: "\<data:post.thumbnailUrl/>", 
			id: "<data:post.id/>", 
			defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg", 
			pincount: "horizontal" 
		}); 
	</script> 
</div> 
</b:if>
    Settings
    defaultThumb Set the Default Thumbnail Image URL.
    pincount Set the Pin it Count Style.
    Options
    vertical
    horizontal
    none

Adding Stylings

Add the below styling before ]]></b:skin> tag.

.w2bPinitButton{ 
	float: left; /* Customize left/right */ 
	margin-right:10px; /* Customize margin-left/margin-right */ 
	display: block; 
	padding:4px;
}

Customize the Float and Margin properties according to your need.

I hope this Pin it Button is helpful to you. Please share it with your Friends and Leave your Comments. :)

Follow Me on Pinterest

Comments

    • says

      with Pinterest widget, your visitors can pin your post images to their Pinterest Boards. which include a link to the post. So visitors followers can see your post image in Board and check your blog post. it is Blog #TRAFFIC :)

  7. says

    Exaclty what I needed! Please, just let me know how to avoid the div function as I want to align it with my other Facebook and Twitter buttons? Thanks!

  9. Shanna says

    I just tried this and the button didn’t show up on my blog. I have no clue about customizing html so I most likely did it wrong. This is the 5th tutorial I have tried on different customizations to blogger and none have worked. I am wondering if I need to start my blog from scratch. Again

  13. says

    Where will this be placed on my blog? I want it to be with my other social media buttons. I already put one on there and it is directly under my posts and separate from my social media buttons. I know it’s an HTML thing, but need some guidance. Thank you!

  14. says

    Thank you for sharing this. I often wondered how these buttons were made. Now I have come across this very useful site I will be back for more tips. I’m now off to try and add the button on my blog www.zenakennedy.blogspot.com

    Zena

  16. says

    Can you explain how to add the “Follow Me on Pinterest” button? I have tried to add it on Blogger using gadgets and it won’t work. Can I add it to coding at the top like you showed for the “Pin It” button? Help!

  18. says

    Tried this out, the button shows below the posts, but the count doesn’t appear…any idea why? Thanks for the code, have been searching too…this one worked well, except the count. :)

  19. says

    For those having problems with the coding, I had to tweak it to get it to work. Here is what we did: http://pinter-est.blogspot.co.uk/

  21. Jessica says

    i’ve got it working, but it wont let me use the option without the pin count. any way to correct this?

    thank you

  22. Liberty Cameron says

    I can’t get it to work either. I did everything just as you said and nothing shows up on my blog. I don’t know how to fix it.

  23. Jessie says

    Hello, this has been working fine for me, but it just stopped the other day. Is something wrong or does the widget code need to be updated again?