Pinterest Pin It Buttons And Follow Buttons For Blogger And WordPress

In the last post guest author Christine Kane told us Why Pinterest Is The Best New Way To Promote Your Blog.With that in mind it makes sense to make it as easy as possible for visitors to your blog to Follow your pins and Pin your content.So in this post i have some cool Pinterest follow icons and pin it buttons that will work on Blogger blogs, I say this as the buttons from the Pinterest Goodies page will not work on Blogger.You can also use a very useful Wordpress Plugin to have the Pin It Button on Your WP Blog.

Important Update 15/11/2012 - I have had to update the code for the pin it buttons.If you were using the button provided before the date above you will need to switch it to the new code below.

The Pinterest Bookmarklet

First up you can add an easy Bookmarklet button on your browsers tool bar.You can find the button here and you can see video tutorials for adding the pinterest bookmark button to Firefox, Chrome, Internet explorer and more on the Pinterest YouTube Channel.

Pinterest Pin It Button For Wordpress

Download The Wordpress Pin It Plugin Here.

Pinterest Pin It Button For Blogger

Next up is the Pinterest Pin It button, Pinterest have three styles, two have counters as you will have seen on Tweet buttons.As i mentioned if you copy the code directly from Pinterest it will not work on Blogger.However the great Way2Blogging blog have a version that works perfect so we will use that.

First up we need to add a line of script to your template.

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script type="text/javascript" src="http://way2blogging.github.com/blogger-widgets/w2b-blogger-pinit.js"></script>

Step 4. Save your template, your now ready to add the button.

Below I have previews of the buttons with the code for each (All button previews are working so try them out).Once you have picked the button you want find the tutorial on adding it above or below your Blogger posts below.

Basic Button




Basic Button Code

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

Vertical Count Button



Vertical Button Code

<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: "vertical"
});
</script>
</div>

Horizontal Count Button



Horizontal Button Code

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

Add Pin It Button At Top And Bottom Of Blogger Posts

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template
 
Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

<data:post.body/>

To have the button at the top of your posts Copy and Paste the Pin It Button code Directly Above / Before <data:post.body/>

To have the button at the bottom of your posts Copy and Paste the Pin It Button code Directly below / under <data:post.body/>

Follow On Pinterest Buttons And Icons

You can get the selection of four Follow buttons and icons in the image above on the Pinterest Goodies Page.These can be added to a html/javascript gadget on Blogger or a Text sidebar gadget on Wordpress.

That's it all the things you need to take advantage of the new Pinterest craze.Make sure to check out more of our Blog Gadgets and Social Media posts.

Drop Your Comments And Questions Below.

Author - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email