Introduction
In this article, we will be discussing how to add a Pinterest Save Button in a WordPress Plugin. Adding a Pinterest Save Button to a WordPress Plugin allows users to “pin” images from within the plugin to their Pinterest Boards. This is a great way to increase traffic to your website from Pinterest, as well as increase the engagement with your plugin.
Steps
-
The first step is to create a new WordPress Plugin. You can do this by going to the WordPress Dashboard, and selecting “Plugins” > “Add New”.
-
Once you are on the “Add New Plugin” page, you will need to enter a name for your Plugin, as well as a description.
-
After you have entered a name and description for your Plugin, you will need to click on the “Create Plugin” button.
-
Once you have clicked on the “Create Plugin” button, you will be taken to the editor for your Plugin. In the editor, you will need to add the following code:
function pinterest_save_button($content) {if(is_singular( 'post' )) {
global $post;
$permalink = get_permalink($post->ID);
$title = $post->post_title;
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );$content .= '
';}
return $content;
}
add_filter( 'the_content', 'pinterest_save_button');
-
The final step is to activate your Plugin. You can do this by going to the WordPress Dashboard, and selecting “Plugins” > “Installed Plugins”. From here, you will need to find your Plugin in the list of installed plugins, and click on the “Activate” link.
Conclusion
In conclusion, we have discussed how to add a Pinterest Save Button in a WordPress Plugin. Adding a Pinterest Save Button to your WordPress Plugin is a great way to increase traffic to your website from Pinterest, as well as increase the engagement with your plugin.
Implementing Pinterest Save Button in WordPress Plugin
1. Add the following JavaScript SDK code to the <head> of your WordPress plugin
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
2. Add the following HTML code where you want the Pinterest Save Button to appear in your WordPress plugin
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" alt="Pin It" /></a>
3. That’s it! The Pinterest Save Button should now be appearing in your WordPress plugin.
If you’re having trouble getting the Pinterest Save Button to appear in your WordPress plugin, check out the Pinterest Save Button documentation.
2. Create a Button and Pop-up
The first thing you need to do is create a button that, when clicked, will pop-up the Pinterest “Save” window.
To do this, you’ll need to create a button and use some CSS to style it. For this example, we’ll be using a simple
Now we need to style this button using CSS. For this example, we’ll just give it a background color and some padding.
#pinterest-save-button {
background-color: #cc0000;
padding: 10px;
color: #fff;
}
Now that we have our button, we need to add the JavaScript that will open the pop-up window when the button is clicked.
To do this, we’ll use the Pinterest JavaScript SDK. First, we need to include the SDK in our page. Add the following code to the of your page:
Next, we need to add the following JavaScript to our page. This code will open the pop-up window when the button is clicked.
document.getElementById(‘pinterest-save-button’).onclick = function() {
PinUtils.pinAny();
};
Now when you click on the button, the Pinterest “Save” pop-up window should open.
3. Pre-fill the “Save” Window
The next thing we need to do is pre-fill the “Save” window with information about the page that’s being saved.
To do this, we need to add some special tags to our page. These tags tell Pinterest what information to pre-fill the “Save” window with.
The first tag we need is the “p:pinit:url” tag. This tag tells Pinterest the URL of the page that’s being saved. Add the following tag to the of your page:
Replace “http://example.com/page-to-save” with the URL of the page you want to save.
The next tag we need is the “p:pinit:media” tag. This tag tells Pinterest the URL of the image that should be saved. Add the following tag to the of your page:
Replace “http://example.com/image-to-save.jpg” with the URL of the image you want to save.
The last tag we need is the “p:pinit:description” tag. This tag tells Pinterest the description of the page that’s being saved. Add the following tag to the of your page:
Replace “Page description goes here” with a description of the page you’re saving.
Now when you click on the button, the Pinterest “Save” pop-up window should be pre-filled with the URL, image, and description of the page you’re saving.
4. Save Button Options
The final thing we need to do is add some options to our button.
The first option we’re going to add is the “data-pin-hover” attribute. This attribute tells Pinterest whether to show the “Save” button when the user hovers over the image.
To set this attribute, add the following code to your button:
data-pin-hover=”true”
The next option we’re going to add is the “data-pin-round” attribute. This attribute tells Pinterest whether to show the round “Save” button.
To set this attribute, add the following code to your button:
data-pin-round=”true”
The last option we’re going to add is the “data-pin-save” attribute. This attribute tells Pinterest whether to show the “Save” button when the user clicks on the image.
To set this attribute, add the following code to your button:
data-pin-save=”true”
Now when you click on the button, the Pinterest “Save” pop-up window should be pre-filled with the URL, image, and description of the page you’re saving.
Leave a Reply