How to Add Pin It Buttons on Your Blog Using Single Javascript and Other Methods

Table of Content

Adding a Pinterest “Pin It” button to your WordPress blog is a smart way to encourage readers to share your content directly to Pinterest. This not only increases your content’s visibility but also drives more traffic back to your site. Below, I’ll cover three simple methods to add a Pinterest “Pin It” button to your blog—whether you’re comfortable with code, prefer plugins, or use Elementor for customization. Let’s dive in!

Method 1: Load Pinterest’s JavaScript and Add Button Code Manually

Adding the Pinterest “Pin It” button manually is straightforward and doesn’t require a plugin. Follow these steps to add the button directly to your theme’s files.

Step 1: Load Pinterest’s JavaScript

The Pinterest button requires JavaScript to function. Add this snippet to your WordPress theme’s functions.php file, or place it in a site-specific plugin:

function add_pinterest_script() {
    ?>
    <!-- Pinterest Script -->
    <script async defer src="https://assets.pinterest.com/js/pinit.js"></script>
    <?php
}
add_action('wp_head', 'add_pinterest_script');

This code makes sure the Pinterest script loads on every page, enabling the “Pin It” button.

Step 2: Add the “Pin It” Button in Your Template

Next, you’ll need to add the button itself within your blog posts. Open your single.php file (responsible for individual post layouts) and place the code below where you’d like the button to appear:

<a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<php the_title_attribute(); ?>" class="pin-it-button" count-layout=`horizontal'>Pin It</a>

That’s it! This creates a working Pinterest button, allowing users to share each post’s URL and title directly to their boards.

Method 2: Adding a “Pin It” Button to Specific Pages or Your Entire Blog with a Plugin

If you’re looking to add the Pinterest “Pin It” button to specific pages, posts, or even images across your entire WordPress blog, a plugin can handle it all—no coding required. Here’s how to set it up using the Pinterest Pin It Button On Image Hover plugin.

Steps to Add the “Pin It” Button Where You Want It:

• Install and Activate the Plugin:
  • Go to your WordPress dashboard, then navigate to Plugins > Add New.
  • In the search bar, type “Pinterest Pin It Button On Image Hover” and click Install Now, then Activate.
• Configure Button Placement and Visibility:
  • After activation, go to Settings > Pinterest Pin It in your dashboard.
  • Here, you’ll find options to control where the button appears:
    • On All Images: Automatically adds the “Pin It” button to all images across your blog.
    • On Specific Pages or Posts: Select specific pages or posts where you want the button enabled.
    • Custom Hover Settings: Choose to display the button only when users hover over an image, giving a clean, user-friendly look.
• Customize Button Appearance:
  • Adjust button styles, size, and colors to match your site’s branding. You can also set the button to appear on desktop or mobile devices only.

With this plugin, you have full control to add the “Pin It” button site-wide, to specific pages, or on individual images, letting you meet your readers’ needs wherever they interact with your content. This approach is perfect for blog websites looking to maximize Pinterest engagement on any page.

Method 3: Adding a “Pin It” Button Using Elementor

If you're an Elementor user, you can easily add a Pinterest “Pin It” button directly to specific pages, posts, or sections of your site without any additional coding or plugins. Elementor provides flexibility for custom layouts, allowing you to place the button exactly where it’s most effective.

Here’s How to Do It with Elementor:

• Open Your Page in Elementor:
  • Navigate to Pages in your WordPress dashboard, select the page where you want to add the “Pin It” button, and click Edit with Elementor.
• Add an HTML Widget:
  • In the Elementor editor, search for the HTML widget in the widget panel and drag it to the section where you’d like the “Pin It” button to appear.
• Insert the Pinterest “Pin It” Button Code:
  • In the HTML widget, paste the following code snippet:

<a href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&description=<?php echo urlencode(get_the_title()); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a> <script async defer src="https://assets.pinterest.com/js/pinit.js"></script>

This code above creates a “Pin It” button that users can click to pin the page or post directly to Pinterest.

• Customize the Button’s Placement:
  • Use Elementor’s drag-and-drop functionality to adjust the button’s position within your design. You can add multiple HTML widgets across various sections if you want the button in several spots on a single page.

Using Elementor gives you precise control over the button’s placement and makes it easy to feature Pinterest sharing options in key locations on your site without using plugins or extensive code edits.

Conclusion

With these three methods, you have flexible options to add a Pinterest “Pin It” button to your WordPress blog. Whether you prefer a simple code-based solution, want an easy plugin option, or need full design control with Elementor, there’s a method here to suit your needs. Adding this button doesn’t just make your blog more shareable—it’s a step toward building a stronger, visually connected audience on Pinterest.

Related: Best AI Startup and Agency WordPress Themes.