- Get link
- X
- Other Apps
Do you want to add the Pinterest "Pin It" button to WordPress website? Recently, a new traffic source has appeared in our blog statistics.
It was quite important for us to take notice. This traffic source was Pinterest.
Pinterest is a most popular social networking site that allows you to share visual content and drive a lot of traffic to your website.
In this article, we'll show you how to add the Pinterest "Pin It" button to your WordPress blog. We will also explain how to add the Pin It button to images of your website.
Adding a Pinterest "Pin It" Button Using a Plugin
Pinterest officially renamed the "Pin It" button to save in 2016.
While some plugins still use the name "Pin It" instead of Save, they do the same thing of pinning your images to Pinterest.
The easiest way to add a Pinterest button to your WordPress site is to use a social sharing plugin.
We recommend using the Shared Calculation plugin for this purpose. It is the best social media plugin for WordPress because it is free and allows you to easily add Pinterest buttons with other popular social networks.
To begin with, you will need to install and activate the Shared Calculation plugin. You can follow our steps on how to install the WordPress plugin for detailed instructions.
After plugin installation, go to Settings »to configure the plugin Shares shared page.
On the Settings page, you have to scroll to the Display section and then click on the "Share button to display" techbox.
This will open a dropdown menu where you can select the social media services you want to add. From the store, Pinterest will be present in that box along with Facebook and Sony.
You can select the location and post type where you want to display the Pinterest button. It comes with many button styles which you can choose from several share button style options.
Once you are working, do not click on the transformative button to temp the settings.
Now you can visit any post on your website to see the Pinterest button in action.
Another great thing about SharedCounts is the free custom Pinterest image addon available on Github. This lets you set a custom Pinterest sharing image and description that is optimized for Pinterest.
Note: We use the SharedCount plugin on our website as it is the best option in the market. It is very well coded and it is free.
Manually adding a Pinterest Pin It button to WordPress
Some intermediate users may prefer to manually add social sharing buttons to their WordPress site rather than using plugins.
Let's look at how to manually add Pinterest buttons to WordPress.
The first thing you need to do is a complete WordPress backup of your site. This will help you to restore your site in the event of an accident.
Next, you will need to connect to your WordPress hosting using the FTP client and then go to / wp-content / themes / folder.
From here, you need to open your current theme folder and then find the footer.php file.
Next, just right-click on that file and then choose Download from the menu. This will download the footer.php file to your computer system.
Now you need to open the footer.php file using a plain text editor like notepad and then paste the following script just before the </body> 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>
Once you do this, you will have to save the file and then upload it back to the current theme folder.
Next, you need to locate and download the single.php file from your themes folder and open it for editing. After that you have to add the following code.
You have to choose the place where you want it to appear in your post. The most common placement for a social media button 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>
The above code displays the Pinterest button with your featured image, title, description and post URL in the shared URL parameter.
Finally, you will have to save the file using FTP and upload it back to your theme directory.
This will add the vertical share button to your website post. If you want to display the horizontal share button, just change the Count-Layout parameter to horizontal.
Create a shortcode for the Pinterest button
Shortcodes in WordPress allow you to easily add dynamic items to your WordPress posts, pages and widgets. By creating a shortcode, you will be able to manually add Pinterest buttons to your articles.
First of all, you have to add the following code to the functions.php file of your theme or 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');
After that, you can use the [PIN] shortcode in your WordPress post where you want to display the Pinterest button.
Add the Pinterest Pin It button to your photos
If you are running a fashion, photography or portfolio site, then you definitely want to share your photos on Pinterest to increase the traffic of your website.
Let's take a look at how to add the Pinterest Pin it button to WordPress. This button will only appear when users hover their mouse over your pictures, allowing them to easily share the image on their Pinterest profile.
First of all, you have to install and activate the Pinterest Pin it button for the image plugin.
At activation, go to Settings »Pinterest Pin It page to configure the plugin.
On the Settings page, you can choose where you want the "Pin It" button to appear on your WordPress site. You can only display it on a single post, page, category page or everywhere on your site.
The next option is to choose the default description from the dropdown menu. This will be used as the image description for the pinned image.
Once done, you will need to click the save button to store the settings. Now you can go to your website and then hover your mouse cursor over any image to see the Pinterest "Pin It" button.
If you want to exclude some images from showing the Pin It button, you can add the Nopin CSS class to the images you want to exclude.
To do this, you need to select the image block in the post editor and then click on the 3 vertical dots icon from the block toolbar. This will open a menu where you have to click on Edit as HTML option.
Now you will see the HTML code of your image. Proceed to add nopin to the class property of the img tag:
<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>
Similarly, you can use the plugin to disable the automatic display of the "Pin It" button, and use the CSS class "Pinthis" to selectively display the button on specific images.
To do this, you need to go to the settings page of the plugin and then locate the Advanced section on the right side of the page.
Now you have to check the option that shows "show" pin it "button only on images with class =" pinthis ", and then click on save button.
The next time you add a picture to a post or page, you need to select the image block and then use the Edit as HTML option to add the Pinthys CSS class to the image code. Here's an example:
<figure class="wp-block-image"><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></figure>
This will show the Pinterest button on that image, even if you have disabled the option to automatically show the Pin It button on your site.
Comments
Post a Comment