Add Pinterest “Pin It” Button to WordPress Blog without a Plugin

How to add a Pinterest “Pin It” Button to your website or blog without using a plugin?
Pinterest is the latest buzz service in internet that allows you to organize and share interesting things you find on the web. You can use pinboards to plan and organize your interests. Be it home decoration or wedding or recipes or even a pinboard to pin ideas for a new product.
Pinterest also allows you to browse pinboards created by other people and to discover new things. Since the Pinterest user base is growing rapidly, businesses are already started to take advantage of Pinterest’s popularity.
Blogs and websites also can take advantage of Pinterest referral traffic. Visual contents from blogs and websites including beautiful images in your blog articles help your readers to pin them to their pinboards. Each shared link becomes a micro traffic source. The chance of getting re-pins also improves the referral traffic to your website.
Related:

• Add Facebook “Like” Buttons To WordPress Blog Without Using Plugins
• How To Add Twitter Retweet Button To Blog Without Using Plugins
• How to Add Google +1 Button To Website or Blog With No Plugins

Pinterest “Pin It” button for websites and blogs allows customers and readers to pin your products onto Pinterest. You can add these buttons to every page of your blog or every product page of your business website. In this article we will see how to add these buttons to your blog and website without using any plugins.

How to Add Pinterest “Pin It” Button to WordPress Blog without Using Plugin

This implementation requires working knowledge on WordPress functions and PHP files used in your WordPress theme. This is because the Pinterest requires post image or thumbnail as a parameter and that will be displayed in pinboards.
To get the base code for the plugin you can login to your Pinterest account to go to pinterest goodies. Pinterest “Pin It” button is functionally similar to Facebook Like button and Twitter Tweet button. The sample button code is given below.

1
2

<a rel="nofollow" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.globinch.com&media=http%3A%2F%2Fwww.globinch.com%2Flogo.jpeg&description=Globinch Description" class="pin-it-button" count-layout="vertical">Pin It</a>
<script type="text/JavaScript" src="http://assets.pinterest.com/js/pinit.js"></script>

If you examine the above code there are three “query string” parameters available which takes dynamic values based on your website page or blog post page.
They are,
url – the URL of the page you are submitting. (e.g.:”http://www.globinch.com”
media – the thumbnail image URL (eg.”http://www.globinch.com/logo.jpeg”)
description – a short description of the article or page. (eg. “Globinch description”).
When you are adding the above code to a website main page (home page) then you can hard code the values (based on your website or blog) because they are not going to change. But if you are adding the code to individual page or blog article page then all these three values are going to be dynamic. You need to change the code a bit to make them dynamic.
If you are using WordPress then you can replace the values with respective WordPress functions. WordPress provides different functions to get the permalink of the page, thumbnail and the description.
The methods are,

1
2
3

url = "<?php echo get_permalink(); ?>",
media= This depends on the theme you are using. For example if you have a post meta value named "thumb" that indicates an image URL you can use the function "<?php echo get_post_meta($post->ID, 'thumb', true) ?>" to get the image.
description = "<?php the_title(); ?>"

Edit the code and replace the values with the above WordPress functions.

1
2

<a href="http://pinterest.com/pin/create/button/?url=<?php echo get_permalink(); ?>&media=<?php echo get_post_meta($post->ID, 'thumb', true) ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

After editing the above code, it can be added to your “single.php” or appropriate place where you want the pin button to appear on you individual post pages.
In WordPress the file which will be rendered as the post page is the “single.php” file. This file is available in the themes folder. In “single.php” file, you can add the below give code to the location where you want the pinterest “Pin it” button to appear. If you want to add the button below the title you can add your pinterest code as below.

1
2
3
4

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...................................................................................
<?php the_title(); ?>
YOUR PINTEREST "PIN IT" CODE HERE

If you want to add the pinterest “Pin it” button to appear below the post content, find the below lines in “single.php” and add the script as mentioned below.

1
2
3
4

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...................................................................................
<?php the_content(); ?>
YOUR PINTEREST "PIN IT" CODE HERE