What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add Pinterest Button to WordPress Site

How to Add Pinterest Button to WordPress Site

At present, there is a common sense that social networking platforms can be a huge traffic source for many websites. After all, more and more people are using them to contact with their family, friends, colleagues, and classmates every day, so they have the ability to bring you in front of a large number of users all over the world.

In addition to some common used social media like Facebook, Twitter, and Google Plus, now many people are interested in Pinterest – a popular photo-sharing platform. Now, the question is how to inform people that you are already in this large group? Here, you can add Pinterest button to WordPress so that people can pin your posts and be your followers easily. In the following, we have shown you how to do this with either plugin or coding stuff.

pinterest images

Use Plugins

Making use of user-friendly WordPress plugins is the easiest and the most effective way. There are a lot of related plugins available at WordPress.org and some third parties, among which Pinterest “Pin It” Button and Pinterest Pin It Button For Images are two of the most easy-to-use ones.

To download them, you can search the plugin name via your WordPress admin panel or at WordPress.org. Then, install and activate them at once. The whole process may cost you a few minutes, but you can do it with the most basic computer knowledge.

Now, it’s time for plugin configuration. Simply go to the Settings tab in the left side of your dashboard, and find the right plugin name in the dropdown menu to start configuring. In the following, we have showcased the different setting images for the 2 plugins respectively. Thus, you can choose one and change the settings correctly and appropriately.

Pinterest “Pin It” Button

general settings

At first, you need to choose the button type and pin count. There is no recommendation in this respect. You can decide the setting based on your own preference or make it match the overall design of your website.

visibility settings

Next, you need to decide the visibility setting. This contains 2 parts: post/page types and button placement. According to our own experience, we highly suggest you allowing the button to be displayed in your homepage and individual posts, and placing the button below your content.

In fact, there is also a style setting page that allows you to add the custom CSS for button customization. However, this requires you to add some CSS style rules. Thus, if you are a newbie knowing nothing about CSS, simply leave this in default.

Pinterest Pin It Button For Images

pinterest button setting

The general settings of Pinterest PIBFI are not too many, for the developers have already decided the best configurations for most aspects. Even for the left settings of displayed pages and pinned image description, they have chosen the best options for you. Therefore, if you have no particular requirements, there is no need to change the settings.

advanced setting

Here, you can decide images with which class attributes cannot display the button. You can add multiple ones with the help of comma. Besides, you can also decide whether to show this button only on images with class=”pinthis”.

Using Coding Knowledge

In fact, this method is not that difficult as you imagine, for we have already written the right HTML code in the following. You only need to copy it and paste into the right file. After saving the changes, the Pinterest button can appear on your website automatically.

Firstly, you need to find your footer.php file, and add the following code before the body close tag. The file can be found from WordPress dashboard < Appearance < Editor < Footer.

<script type="text/javascript">
 (function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded){
        return;
    }
    window.PinIt.loaded = true;
    function asynchronous_load(){
        var scriptfileNode = document.createElement("script");

        scriptfileNode.type = "text/javascript";
        scriptfileNode.async = true;
        scriptfileNode.src = "http://assets.pinterest.com/js/pinit.js";
        var xscriptElement = document.getElementsByTagName("script")[0];
        xscriptElement.parentNode.insertBefore(scriptfileNode, x);
    }
    if (window.attachEvent){
        window.attachEvent("onload", asynchronous_load);
    }
    else{
        window.addEventListener("load", asynchronous_load, false);
    }
})();
</script>

Next, find the single.php file at the same location within your WordPress admin panel, and then paste the lines of code listed in below.

<?php 
$attachment_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); 
?>
<a href="http://pinterest.com/pin/create/button/?description=<?php the_title(); ?>&media=<?php echo $attachment_image_src[0]; ?>&url=<?php echo urlencode(get_permalink($post->ID)); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *