Add Dynamic Pinterest Pin It Button For Blogger / Blogspot

June 2, 2012   /   Posted by in Blogger Widgets, Bookmarking 33 Comments
Add Dynamic Pinterest Pin It Button For Blogger / Blogspot

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

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

33 Comments on “Add Dynamic Pinterest Pin It Button For Blogger / BlogspotAdd Comment

  1. avatar

    warren June 3, 2012 2:39 pm #

    Thanks Harish, this is so useful!

  2. avatar

    Neel Shah June 9, 2012 5:03 pm #

    thanks , nice post

  3. avatar

    Indonesian Song Lyrics June 11, 2012 5:16 pm #

    I like this tutor…
    thanks..

  4. avatar

    Hebsonheby July 8, 2012 4:49 pm #

    Nice article thnkz for sharing

  5. avatar

    phphunger July 17, 2012 11:01 am #

    Hi Harish, Can you please tell me whats the use of this pintrest widget…

    • avatar

      Harish July 17, 2012 8:53 pm #

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

  6. avatar

    Candace Stevenson August 19, 2012 2:23 am #

    in my blogger HTML I don’t have a code for :’( sos!! kahandace@gmail.com

    • avatar

      Harish August 23, 2012 1:01 am #

      Click on Expand Template Widgets check box and try to find the code.

  7. avatar

    Ivelina August 27, 2012 4:40 pm #

    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!

  8. avatar

    Ivelina August 27, 2012 4:46 pm #

    P.S. I now use the following code:

    Tweet

    Thank you!

  9. avatar

    Shanna September 2, 2012 10:46 am #

    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

  10. avatar

    Nuri Hodges September 4, 2012 4:30 am #

    Just wanted to say thanks for the resource! Also, there’s a typo: you’ve spelled vertical as ‘verticle’ in your article.

    Cheers!

    • avatar

      Harish September 4, 2012 8:29 am #

      Thanks! :)

  11. avatar

    Kundan Bhardwaj September 23, 2012 4:38 pm #

    I have read on several blogs about pin now but I would go for Facebook regarding the social media and traffic as well.

  12. avatar

    robin October 3, 2012 5:15 pm #

    Added script exactly as you described. Script didn’t work.

    • avatar

      Harish October 3, 2012 11:10 pm #

      I will update the script .

      • avatar

        Juliana October 20, 2012 3:12 pm #

        Hi Harish, I just tried to add the codes but haven’t seen any changes on my blog….I did it exactly the way you said (I think so at least). What could be wrong?

  13. avatar

    Faith October 16, 2012 9:30 pm #

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

    Zena October 17, 2012 3:00 am #

    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

  15. avatar

    Infographics October 23, 2012 12:16 pm #

    i really want Pinterest button for my blog and i was searching for this.. thanks for this useful post

  16. avatar

    tara October 26, 2012 4:24 am #

    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!

  17. avatar

    Sara October 26, 2012 11:52 am #

    Doesnt work. Is there an update?

  18. avatar

    Bhavika November 8, 2012 4:45 pm #

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

    Sara November 9, 2012 1:16 pm #

    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/

  20. avatar

    Bhavika November 16, 2012 2:32 pm #

    It doesnt work….every time the site loads there is a google code pop up message…have removed this code

    • avatar

      Harish November 16, 2012 9:21 pm #

      Please update the widget code.
      Sorry for this Inconvenience.

  21. avatar

    Jessica November 24, 2012 6:52 am #

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

    Liberty Cameron December 6, 2012 11:31 pm #

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

    Jessie December 8, 2012 12:58 am #

    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?

    • avatar

      Harish December 11, 2012 12:31 am #

      yes, the script is moved to my CDN.

  24. avatar

    Safeer Ahmed December 10, 2012 8:14 pm #

    code not working Harish .
    can you please Update.
    Thanks

  25. avatar

    Jessie December 12, 2012 2:13 am #

    ok, i updated it. but the horizontal style is no longer displaying the pin count.

    • avatar

      Harish December 12, 2012 8:18 pm #

      it was a bug in pinterst button. it is also missing on my site too.

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress