Pinterest is going hot of late. On Pinterest, you’ll pin your favorite things and others will comment, like or re-pin your pins. You’ll conjointly categorize your pins by making completely different boards.
Currently, if you run a blog or website, you may are be wanting to feature the Pinterest button to the website to assist your readers directly pin the posts to their Pinterest boards. we continuously talk regarding the advantage of providing social share buttons on your website or blog posts, it’s very helpful to spread the word directly from the supply. Pinterest, even being the most recent concept in social media, has provided users additional referrals than a number of the highest social web sites like youtube and google+.
Thus, it becomes necessary to join Pinterest and be active there, if you’re a blogger, webmaster or social media junkie. In this article, I am going to show you the way to add a Pinterest button to website or blog.
How to add Pinterest button to website?
Pinterest took the social issue in mind and that it is officially providing pin it button and follow button to place on web sites and blogs from the primary day. The follow button is simply a Pinterest icon with the link to your Pinterest profile, hence it’s static and simple to integrate to website. Pinterest pin it button for website is dynamic that may be available in numerous formats and to gives the pin count within the count bubble. Here I am showing you a detailed tutorial to feature the Pinterest button to website or blog.
Note: You’ll be able to directly grab the code for Pinterest pin it button (as well as for Pinterest Follow button) from Pinterest Goodies but it is in the standardized form without parameters like Description and media (image) to be pinned when the pin it button is pressed:
<a class="pin-it-button" href="http://pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" alt="Pin it" /></a> <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
I added parameters like description and / or media for a few common blogging platforms, you only would like to grab the code and paste it as told in the code of your website or blog. Before proceeding, make sure you created a back-up of your site.
Pinterest Pin it button for WordPress
Go to your theme directory and open single.php in editing mode. Put the below given code just * above / below <?php the_content(); ?>
<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
Save the Changes and you are done.
Pinterest Pin it button for Blogger
Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Click “Expand Widget Templates” textbox. Find <b:includable id=’shareButtons’ var=’post’> paste the following code just below it.
<a class="pin-it-button">Pin It</a> <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js">// <![CDATA[
Save the Template. If it shows error message like
More than one widget was found with id: Navbar1. Widget IDs should be unique.
Just find Navbar1 (it could also be Navbar2 or Navbar3, just find the same it has reflected in the warning) and replace it with Navbar2 (or a different one like Navbar3 or Navbar4). If it says Warning: Your new template does not include the following widgets:…, just click the “Keep Widgets” button. That’s it.
Pinterest Pin it button for Tumblr
Go to your Tumblr Dashboard » Edit » HTML. Find {/block:Regular} and paste the following code * above / below it:
<a href="http://pinterest.com/pin/create/button/?url={Permalink}&description={PostTitle}" class="pin-it-button" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js">
// ]]></script>
Click Update and you are done.
* above / below: Wherever you want to make it appear either above the post or at the footer of the post.
You can alter the value count-layout to horizontal, vertical and none to get Pinterest button with horizontal count, vertical count button and no count respectively.
Follow Pixel2Pixel Design at Pinterest.
Related Tutorials
