Easy Steps to Add Pinterest Pin It Button in WordPress 2022

Pinterest is a photo and image-centric social media platform. It’s ideal for websites that place a high priority on delivering high-quality photos and graphics. Social media integration in WordPress is critical. Adding a Pinterest pin it button WordPress is not the same as placing them on photographs.

Pinterest is becoming a strong social network. Especially for any website that focuses on images. It has over 300 million monthly members. Visitors will find it quicker and easier to share your visuals if you have a “pin it” button on your site. This can help you increase your online presence and attract more visitors to your website.

This article will discuss how to add Pinterest Pin It button to your WordPress blog. We’ll also learn to add the pin It button to your website’s images.

What Is A Pin It Button On Pinterest?

So, first, this blog article is about the pin It button. When you hover your mouse over any image in your blog post, this is the one that appears. You can use this button to pin that exact image to Pinterest when it appears.

The browser plugin is another option for a Pinterest button. When the button is pressed, a user will be presented with a list of available images to pin from a page.

Also included is a social sharing button. This is found around the top or bottom of a blog post. This one, which you are reading right now, is one of them. As a result, you’ll note that there are buttons for sharing on Pinterest, Twitter, and Facebook.

Why Put a Hovering Pin It Button on Your Images?

You might be wondering why you’d want to add the pin It button to your photos. The answer is simple: user convenience. It’s much faster to see and click the button on the image you want to pin on Pinterest than using the traditional way. One thing to keep in mind is that the button should not obstruct anything relevant.

While this may take a little more effort, the added convenience to the consumer is well worth it. Although, to be honest, even if a visitor enjoys an image or photo, they are unlikely to share it.

Making things as easy as possible can maximize the likelihood of your photographs being shared on Pinterest. The more people who share your website, the more people will see it.

How to Add Pinterest Pin It Button in WordPress with Plugin

In 2016, Pinterest changed the name of the pin It button to “Save.”

Although some plugins call themselves “Pin It” rather than “Save,” they all do the same thing. They pin your photographs to Pinterest. Using a social sharing plugin is the most straightforward approach to add Pinterest pin it button to your WP site.

We propose using the Shared Counts plugin. It’s the most excellent social networking plugin for WordPress. It’s free and makes it simple to add the Pinterest button. You can also add the button for other major social media networks.

Installing and activating the Shared Counts plugin is required to get started. After installing the plugin, go to Settings » Shared Counts to customize it.

Scroll down to the Display section on the settings page. Now click the “Share Buttons to Display” textbox.

This will create a dropdown menu to choose which social networking services to add. Pinterest, along with Facebook and Twitter, will appear in that box by default.

You may also choose where the Pinterest button will appear and what type of post it will appear on. In addition, you can choose from a variety of button styles in the ‘Share button style’ option.

Remember to save your changes by clicking the Save Changes button.

You can now see the Pinterest button in action on any post on your website. Another cool feature of SharedCounts is its free Custom Pinterest Image addon, found on Github. This allows you to create a Pinterest-optimized custom Pinterest sharing image and description.

Note: On our website, we use the SharedCount plugin. This is because it is the finest alternative available. It’s well-coded and completely free.

Also Read: Pin This – Pinterest Style WordPress Theme.

Adding a Pinterest Pin It Button in WordPress Manually

Instead of using a plugin, some intermediate users may want to add social sharing icons to their WordPress site manually.

Let’s see how to add the pin it button to WordPress manually.

The first step is to create a comprehensive backup of your WordPress site. This will assist you in restoring your site if something goes wrong.

Then, using an FTP program, connect to your WordPress server and navigate to the /wp-content/themes/ folder.

You’ll need to access your current theme folder and look for the footer.php file from there.

Choose Download from the menu that appears after making a right-click on the file. The footer.php file will be downloaded to your computer due to this action.

Now open the footer.php file with a plain text editor. Such as Notepad and add the following script before the tag.

<script type="text/javascript">

(function() {

window.PinIt = window.PinIt || { loaded:false };

if (window.PinIt.loaded) return;

window.PinIt.loaded = true;

function async_load(){

var s = document.createElement("script");

s.type = "text/javascript";

s.async = true;

s.src = "https://assets.pinterest.com/js/pinit.js";

var x = document.getElementsByTagName("script")[0];

x.parentNode.insertBefore(s, x);

}

if (window.attachEvent)

window.attachEvent("onload", async_load);

else

window.addEventListener("load", async_load, false);

})();

</script>

After that, you’ll need to save the file and then re-upload it to the current theme folder.

Then, from your theme folder, locate and download the single.php file, then open it for editing. Then you must include the following code.

You must select the area in your post where you want it to appear. For example, the most typical location for social media buttons is after the post title.

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>

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

In the share URL parameter, this code displays the Pinterest button with your:

• featured image
• Title
• Description
• post URL

Finally, save the file and use FTP to re-upload it to your theme directory.

This will add a vertical share button to your website’s content. Update the count-layout parameter to horizontal if you want the horizontal share button to appear.

Making a Pinterest Button Shortcode

One of our users recently inquired about developing a shortcode for the Pinterest “Pin It” button.

Shortcodes in WP make it simple to include dynamic elements in your posts, pages, and widgets. For example, you can manually add a Pinterest pin it button to your articles by generating a shortcode.

To begin, add the following code to the functions.php file of your theme or a site-specific plugin:

function get_pin($atts) {

$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }

add_shortcode('pin', 'get_pin');

You may then use the [pin] shortcode to display the Pinterest button in your WordPress posts.

How to Add Pinterest Pin It Button in WordPress Using Widget

You may also use the Widget builder on Pinterest to add “pin it” buttons because Pinterest created this piece of software. Hence you can rest assured that it follows their best practices and recommendations.

Pinterest has many developer resources. Including a tutorial on how to make the Save button. If you want to try your hand at coding, you can do so. But in this post, we’ll focus on using the widget builder. It is a more user-friendly choice for people of all ability levels.

To begin, make sure the Save button option at the top of the page is selected.

Then, using the dropdown, select your Button type. If you only want the button to appear on the hover, we recommend setting it to Image hover. Then, when a user temporarily touches on an image on a mobile device, the button will display.

Copy the code created in the bottom right corner of the page once you’ve decided on your button’s appearance.

Now go to your WordPress dashboard and log in. Now, go to appearance> Theme Editor to access the theme editor. All your theme files will be accessible and editable from this location. Before you go any further, keep in mind that changing these files has the potential to break your site. So you must build a backup if you don’t already have one.

On the right-hand side of the Theme Editor window, you’ll see a list of all your theme files. You can use either the Theme Header or Theme Footer files, so scroll down until you find them. To open a file, click on it once.

Then, put in the code, you copied from the Widget builder at the bottom of the file. To save the modification, click the Update File button.

After that, you may check the front end of your site to see if the button is working correctly.

This approach of adding “pin it” buttons appears to be straightforward. But keep in mind that changes to these files are overwritten when the theme is updated. As a result, any custom coding changes should be done through a child theme.

Benefits of Using The Widget Builder’s Official Pinterest Button

• There’s no need to be concerned about another WordPress plugin. However, this may cause your blog to slow down. In addition, this can result in security issues or conflicts that can break your blog.
• Pinterest is a supporter of the button. As a result, you may rest assured that it is adhering to its best practices. You can even submit a support ticket to them for it. If you find yourself in a bind, there are a few things you can do

The Drawbacks of Using The Widget Builder’s Official Pinterest Button

• Customization is limited.
• There is no easy way to use a custom image.
• It is necessary to copy and paste code into your WordPress files.
• Makes all photos, regardless of size, have a hover button.

Add Pinterest Pin It Button to Your Images

If you own a fashion, photography, or portfolio website, you’ll want your photographs to be shared on Pinterest to boost traffic to your site.

Let’s look at using WordPress to add the Pinterest Pin it button to your photographs. This button will only show when users move their mouse over your images. This allows them to share the image on their Pinterest profile easily.

The Pinterest Pin It Button for Images plugin must first be installed and activated.

To configure the plugin, navigate to Settings » Pinterest Pin It after being activated.

You can specify where the “Pin It” button should appear on your WordPress site on the settings page. For example, it can be displayed only on individual posts, pages, category pages, or throughout your entire site.

The default description can be selected from the dropdown menu as the next option. The image caption for the pinned image will be this.

Once you’ve finished, click the Save button to save your changes. You may now visit your website and see the Pinterest “Pin It” button by hovering your mouse pointer over any image.

If you want to hide the pin It button from some images, add the nopin CSS class to the images you wish to hide.

To do so, first, pick the picture block in the post editor, then click the block toolbar’s three vertical dots icon. This will bring up a menu. Select Edit as HTML.

The HTML code for your image will now appear. Add nopin to the class attribute of the image tag like follows:

<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="nopin wp-image-1687"/></figure>

You can stop the automatic display of the “Pin It” button with the plugin. You can also use the CSS class “pinthis” to display the button on selected photos using the CSS class “pinthis.”

To do so, go to the plugin’s Settings page and then scroll down to the Advanced area on the right side.

Now select the box with the “Show “Pin it” button only on photos with class= “pinthis.” Next, click the Save button.

Select the image block and then use the Edit as HTML option to add the pinthis CSS class to the image code the next time you add an image to a post or page. An example is provided here:

<figure class="wp-block-image"><img src="https://example.com/wp-content/uploads/2019/06/imagename.jpg" alt="image name" class="pinthis wp-image-1687"/></figure>

Even if you have deactivated the option to show the pin It button on your site automatically, this way, the Pinterest button will appear on that individual image.

Use social media to your advantage.

The online community that will visit your website will include social media. Take full advantage of your website and provide features that support your users’ preferred platform. The user bases of Facebook, Twitter, Instagram, and Pinterest are pretty significant. This is why most enterprises and businesses use these platforms for advertising and market.

Facebook has almost 2 billion monthly users. That’s more than a quarter of the world’s population. So if you can get into even a tiny part of that user base, your website will receive millions of views. So always be aware of your user base’s interests and accommodate them.

Not only can using social media to market your website increase engagement and revenue. But it can also help you get your brand or message out to the public more quickly and easily.

Conclusion

A “pin it” button is a helpful addition to any website that focuses on design, art, fashion, eCommerce, or any other niche with many graphics. Pinterest offers a potential for development that you can’t afford to lose out on, thanks to its rising user base.

Using one of the methods described in this post, make your photographs easily pinnable. Choose the technique that best meets your objectives and grow your website’s reach.

We hope that this post helped you add the pin It button to a picture and have users share it on their Pinterest image boards. You can achieve this in no time if you use the proper plugin and follow the correct procedures.