How to Add Pinterest “Pin It” Button in WordPress (4 Ways)

9 hours ago, WordPress Tutorials, 1 Views
How to Add Pinterest "Pin It" Button in WordPress

How to Add Pinterest “Pin It” Button in WordPress (4 Ways)

Pinterest is a powerful platform for driving traffic to your WordPress website. By making it easy for your visitors to share your content on Pinterest, you can significantly increase your reach and engagement. Adding a “Pin It” button to your WordPress site is a simple yet effective strategy. This article will guide you through four different methods to integrate the “Pin It” button into your WordPress website, allowing you to choose the option that best suits your technical skills and preferences.

Why Add a “Pin It” Button?

Before diving into the how-to, let’s understand why you should bother adding a “Pin It” button. Here are some key benefits:

  • Increased Visibility: Encourages users to share your content on Pinterest, exposing it to a wider audience.
  • Drive Traffic: Links back to your website from Pinterest pins, directing potential customers or readers to your site.
  • Enhanced Engagement: Makes it easier for users to interact with your content and share it with their followers.
  • Brand Awareness: Boosts your brand’s visibility on a visually-driven platform.

Method 1: Using a WordPress Plugin

The easiest and most popular way to add a “Pin It” button is by using a WordPress plugin. Several plugins offer this functionality, each with its own set of features and customization options. Here are some recommended plugins and the steps to use them:

Option A: Social Warfare

Social Warfare is a comprehensive social sharing plugin that includes a prominent “Pin It” button. It’s known for its speed and highly customizable features.

  1. Install and Activate: Navigate to Plugins > Add New in your WordPress dashboard, search for “Social Warfare,” install, and activate the plugin.
  2. Configure Pinterest Settings: Go to Warfare Plugins > Social Warfare > Pinterest. Here, you can configure the button’s appearance, location, and other settings.
  3. Choose Button Placement: Within the settings, select where you want the “Pin It” button to appear (e.g., above the content, below the content, floating sidebar).
  4. Customize Appearance: Adjust the button’s color, size, and shape to match your website’s design.
  5. Save Changes: Click the “Save Changes” button to apply your settings.

Option B: AddToAny Share Buttons

AddToAny is another popular plugin that offers a wide range of social sharing options, including a customizable “Pin It” button.

  1. Install and Activate: Go to Plugins > Add New, search for “AddToAny Share Buttons,” install, and activate the plugin.
  2. Access AddToAny Settings: Go to Settings > AddToAny.
  3. Customize Buttons: Drag and drop the Pinterest button to your desired position in the list of share buttons.
  4. Configure Button Placement: Adjust the plugin’s settings to choose where the buttons appear on your website (e.g., before posts, after posts, floating sidebar).
  5. Customize Appearance: Adjust the button’s size, style, and other visual elements.
  6. Save Changes: Click the “Save Changes” button.

Option C: Pinterest Pin It Button On Image Hover & Post

This plugin focuses specifically on adding the “Pin It” button. It’s a more lightweight option if you’re only concerned with Pinterest sharing.

  1. Install and Activate: Search for “Pinterest Pin It Button On Image Hover & Post” in the Plugins > Add New section, install, and activate.
  2. Configure Plugin Settings: Access the plugin settings under Settings > Pinterest Pin It.
  3. Customize Image Hover Button: Enable the “Pin It” button to appear on image hover, customizing its icon and position.
  4. Enable Post Button: Add a “Pin It” button at the beginning or end of your posts.
  5. Save Changes: Click the “Save Changes” button to save your configurations.

Method 2: Manually Adding the “Pin It” Button Code

For those who prefer a more hands-on approach, you can manually add the “Pin It” button code to your WordPress theme. This method requires a bit of coding knowledge but provides greater control over the button’s placement and appearance.

  1. Access Your Theme Files: Navigate to Appearance > Theme Editor in your WordPress dashboard. It is highly recommended to use a child theme for any manual edits so updates don’t overwrite your changes.
  2. Locate the Target File: Determine where you want the “Pin It” button to appear. For example, if you want it to appear after each post, you would edit the `single.php` file.
  3. Add the Pinterest Code: Paste the following code snippet into the target file where you want the button to appear: 
            
<a href="https://www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php
  if ( has_post_thumbnail() ) {
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_object = wp_get_attachment_image_src( $thumbnail_id, 'full' );
    echo $thumbnail_object[0];
  } else {
    // Replace with URL to your default image
    echo 'URL_TO_YOUR_DEFAULT_IMAGE';
  }
?>&description=<?php echo urlencode( get_the_title() ); ?>" data-pin-do="buttonPin" data-pin-config="beside"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

    Remember to replace `URL_TO_YOUR_DEFAULT_IMAGE` with the URL of a default image to use if a post doesn’t have a featured image.

  4. Update File: Click the “Update File” button to save your changes.

Important: Editing theme files directly can be risky. Always back up your theme before making any changes. If you’re not comfortable with coding, consider using a plugin instead.

Method 3: Using Pinterest’s Widget Builder

Pinterest provides a widget builder that allows you to create custom “Pin It” buttons and other Pinterest widgets. This method is suitable if you want a specific type of button or a more customized integration.

  1. Access the Pinterest Widget Builder: Go to the Pinterest Widget Builder website (search “Pinterest Widget Builder” on Google).
  2. Select “Pin It” Button: Choose the “Pin It” button option.
  3. Customize the Button: Choose the button type (e.g., count, no count, large button) and customize its appearance.
  4. Get the Code: Copy the generated code snippet.
  5. Add the Code to Your Website: Paste the code into your WordPress theme files (as described in Method 2) or use a plugin that allows you to insert custom HTML code. A plugin like “Insert Headers and Footers” can be useful.

Method 4: Adding a “Pin It” Button on Image Hover with CSS and JavaScript

This method involves using CSS and JavaScript to display a “Pin It” button when a user hovers over an image. This approach can be visually appealing and unobtrusive.

  1. Add CSS to Your Theme: In your theme’s `style.css` file (or via a custom CSS plugin or the WordPress Customizer), add the following CSS code: 
            
.pin-it-wrapper {
  position: relative;
  display: inline-block; /* Or block, depending on your image layout */
}

.pin-it-button {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10; /* Ensure it's above the image */
}

.pin-it-wrapper:hover .pin-it-button {
  opacity: 1;
}
  2. Add JavaScript (Optional, for dynamic insertion): If you need to dynamically insert the HTML, you can use JavaScript. Otherwise, you can directly insert the HTML into your posts or templates. 
            
// Example JavaScript (requires jQuery)
jQuery(document).ready(function($) {
  $('img').each(function() {
    var img = $(this);
    var imageUrl = img.attr('src');
    var pageUrl = window.location.href;
    var description = $('meta[name="description"]').attr('content') || document.title;

    var pinItUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(pageUrl) +
                   '&media=' + encodeURIComponent(imageUrl) +
                   '&description=' + encodeURIComponent(description);

    var pinItButton = '<a href="' + pinItUrl + '" data-pin-do="buttonPin" data-pin-config="beside" class="pin-it-button"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_20.png" /></a>';

    img.wrap('<div class="pin-it-wrapper"></div>');
    img.after(pinItButton);

    // Initialize Pinterest button
    $.getScript('//assets.pinterest.com/js/pinit.js', function() {
      // Pinterest library loaded
    });
  });
});

    You would place this JavaScript code within `<script></script>` tags in your theme’s `footer.php` file, or use a plugin like “Insert Headers and Footers”. This script finds all images, wraps them in a div, and inserts the “Pin It” button HTML. It also loads the Pinterest JavaScript library.

  3. Add the HTML to Your Posts/Templates (Alternative to JavaScript): If you don’t want to use JavaScript, you’ll need to manually wrap your images with the `pin-it-wrapper` div and add the “Pin It” button code next to the image: 
            
<div class="pin-it-wrapper">
  <img src="YOUR_IMAGE_URL" alt="Image Description" />
  <a href="https://www.pinterest.com/pin/create/button/?url=YOUR_PAGE_URL&media=YOUR_IMAGE_URL&description=YOUR_IMAGE_DESCRIPTION" data-pin-do="buttonPin" data-pin-config="beside" class="pin-it-button"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_20.png" /></a>
</div>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

    Remember to replace `YOUR_IMAGE_URL`, `YOUR_PAGE_URL`, and `YOUR_IMAGE_DESCRIPTION` with the appropriate values. Also, include the Pinterest JavaScript loading code.

  • Remember to replace the placeholder values with your actual image URL, page URL, and description.
  • Ensure the Pinterest JavaScript library (`//assets.pinterest.com/js/pinit.js`) is loaded on the page.
  • Adjust the CSS and JavaScript to fit your specific website design and needs.

Conclusion

Adding a “Pin It” button to your WordPress website is a crucial step in leveraging the power of Pinterest for driving traffic and increasing engagement. Whether you choose to use a plugin, manually add the code, use Pinterest’s widget builder, or implement a hover effect with CSS and JavaScript, the key is to make it easy for your visitors to share your content. Experiment with different methods and customization options to find what works best for your website and audience. By implementing a well-placed and visually appealing “Pin It” button, you can unlock the potential of Pinterest and take your website to new heights.

Related Topics by Tag
, , , ,

..