Can You Use Pinterest Pictures On Your Blog

This post contains affiliate links. Which means I will make a commission at no extra cost to you should you click through and make a purchase. Read the full disclosure here.

Do you want people loving your content and showering it with Pinterest love by repinning it?

Getting people to repin from your blog. Is an important part of any Pinterest Marketing strategy.

Once you start getting readers from Pinterest to your blog. A good way to keep up the momentum of your Pinterest account. Is to get your readers to start pinning from your blog back to Pinterest.

But what's the best way to add Pinterest images to WordPress within your blog posts? As there are several different ways to do this!

Well, that's what I am going to cover below. There are 5 different ways, each with different options. You'll see how each one can be done on your WordPress blog. As well as any pros and cons that come with them. Including one of my favorite methods using a plugin called WP Tasty (see #3 for more info).

Oh and if you haven't got a Pinterest strategy figured out yet. Then you should consider using this amazing Pinteresting strategy that I have been using. As this simple to follow guide will take you from beginner to advanced strategies in no time. And will give you a clear strategy to follow so you can make Pinterest work for you.

1. 1 | Simply Adding A Pin It Button To All The Images On Your Blog
2. 2 | Using The HTML Code Data-Pin Attributes Created By Pinterest Themselves To Add Pinterest Images To WordPress
   • How To Use The Pinterest Data-Pin Codes On Your Blog
   • How To Use Data-Pin-Nopin To Disable Pinning Of Certain Images
   • Hiding Pinterest Images Within Your Blog Posts
3. 3 | Alternatively Use A Zero Code Option Like WP Tasty Pins Plugin To Add Pinterest Images To WordPress
4. 4 | Consider The Social Warfare Plugin With Serious Caution
5. 5 | Embed Pins Directly From Pinterest With This Simple Trick
   • How to embed your pins directly from Pinterest?
6. Which Option Will You Use To Add Pinterest Images To Your WordPress Blog?

1 | Simply Adding A Pin It Button To All The Images On Your Blog

Okay, so you can easily add Pinterest images to WordPress with this method. As it will turn any image on your blog into a Pinterest Pin. All you need to do is add some code to your blog. And it will generate a Pin button that appears when hovering over any image.

The main con of this though, is that your images won't generate a Pinterest description. Unless you've set the alt text for your image. In which case it will use that. But this then leads to another problem. No matter what others suggest. You shouldn't use your alt text to generate your Pin descriptions! As alt text should only be used for screen readers and to describe your image to Google too.

Before we get side tracked by alt text though. Let's look at the easiest way to add the Pin it button to your WordPress blog. Which is the jQuery Pin It Button plugin.This plugin will allow you to set a lot of options for the button it adds to your images. Like where to show the button, which images shouldn't show the button. And even set a custom Pinterest button design. If you feel like getting creative.

Adding the jQuery Pin It button plugin is just the tip of the iceberg though. As there are further options below. Most of the time you'll need to install this first. But not always!

📌 In a rush? Pin this post to your Pinterest or Blogging board to read it later! 📌

2 | Using The HTML Code Data-Pin Attributes Created By Pinterest Themselves To Add Pinterest Images To WordPress

So, if you wanted to take full control of how to add Pinterest images to WordPress on your blog. The number #1 way I would suggest doing it. Is with the Pinterest HTML attributes. The ones you'll use the most usually start with 'data-pin'.

With these extra attributes you can set things like:

• Data-pin-media – Compressed images with a separate high-quality image. Just for Pinterest to use, so it doesn't slow down your blog.
• Data-pin-url – A specific URL of your choice for the Pin to link to. Rather than the default link back to the page the image is on
• Data-pin-description – A dedicated Pinterest description. That doesn't take up the space your alt text needs
• Data-pin-id – A Pin ID so all repins are added to the same pin, rather than what Pinterest thinks it should add it to

See what I mean about how you can control a lot with this method?

How To Use The Pinterest Data-Pin Codes On Your Blog

But you might be wondering how do you even use these? Well, since they are HTML attributes we'll need to add them to our image's HTML code.

In Gutenberg, all you need to do is add an Image block to your post. Select the image you want to use and display in your blog post. Then click the Options button for the image block and select Edit as HTML. The code will look something like this:

<div class="wp-block-image"><figure class="aligncenter"><img src="https://flyingcdn-2a7845.b-cdn.net/wp-content/uploads/2019/03/how-to-use-pinterest-for-business-using-this-pinterest-strategy-header-image-of-woman-typing-at-laptop.jpg" alt="How To Use Pinterest For Business Using This Pinterest Strategy Header Image Of Woman Typing At Laptop" class="wp-image-3950" /></figure></div>            

You can add these extra attributes for Pinterest right after the '<img' text. So, if you were to use all the extra Pinterest attributes I mentioned above. Then it would look something like this:

<div class="wp-block-image"><figure class="aligncenter"><img data-pin-url="" data-pin-description="" data-pin-id="" data-pin-media="" src="https://flyingcdn-2a7845.b-cdn.net/wp-content/uploads/2019/03/how-to-use-pinterest-for-business-using-this-pinterest-strategy-header-image-of-woman-typing-at-laptop.jpg" alt="How To Use Pinterest For Business Using This Pinterest Strategy Header Image Of Woman Typing At Laptop" class="wp-image-3950" /></figure></div>            

How To Use Data-Pin-Nopin To Disable Pinning Of Certain Images

Here's another attribute you may found useful. But it is more related to preventing images from being pinned. Rather than embedding any kind of pins to your blog posts. Is the data-pin-nopin attribute. If you add this to the HTML of your images like the above example. And set it to nopin, then the image won't be displayed when clicking on the Pin it button. As well as the hover button shouldn't appear for it.

For example you might set it like this:

<div class="wp-block-image"><figure class="aligncenter"><img data-pin-nopin="nopin" src="https://flyingcdn-2a7845.b-cdn.net/wp-content/uploads/2019/03/how-to-use-pinterest-for-business-using-this-pinterest-strategy-header-image-of-woman-typing-at-laptop.jpg" alt="How To Use Pinterest For Business Using This Pinterest Strategy Header Image Of Woman Typing At Laptop" class="wp-image-3950" /></figure></div>            

Note: You might from time to time see people also use nopin="nopin". This does the exact same thing. It is just written slightly differently.

Hiding Pinterest Images Within Your Blog Posts

If you want add Pinterest images to WordPress to be available for pinning. When the Pinterest Pin it button is clicked. Then the images need to be embedded into your blog post. But what happens if you decide you don't want the images to be displayed to your audience in the post itself? Perhaps you just want to show 1 Pinterest image on the page. Whilst hiding the rest.

Well, the best way to do this, in my opinion, is to use the HTML attribute style=display: none;. Unless you have access to the WP Tasty Pins plugin. Which I will talk about in more detail shortly below.

But unlike other tutorials, you might come across. I recommend adding this attribute to your <img attributes and not as separate <div tags instead. Why? Because of my tests with different website speed testing tools. When adding this hidden attribute to my images. They do not show up when doing the website speed tests. Which is proof that this method will stop those hidden images from impacting on your page loads. Because if they are not showing in a website speed test's results. Then this means they have zero impact on your inital page load speed.

3 | Alternatively Use A Zero Code Option Like WP Tasty Pins Plugin To Add Pinterest Images To WordPress

The above method can get quite code intensive. I personally find that with a template and some practice it isn't complicated. But I do also realize, that not everyone will want to use code to add Pinterest images to WordPress in their blog posts.

Well, fear not! Because an easy alternative is to use the WP Tasty Pins WordPress plugin. This has a lot of the features included above. Such as:-

• Full customization of Pinterest descriptions for images
• A separate field for optimizing your alt text for screen reader usability and Google
• Hiding images with a click of a button
• Disabling pinning for certain images
• Adding hover buttons. Meaning you don't need to use the jQuery Pinterest button plugin with this.

All this convenience comes at a price though. So if you want all these features with none of the coding involved. Then the premium plugin comes at the price of $29.

This plugin comes with lots of positive reviews and full support is included in the price too. Which is always a nice bonus if you ever get stuck!

Another alternative plugin to add Pinterest images to WordPress. That comes somewhere in between the option of data-pin code and WP Tasty Pins. Is Social Warfare.

However, you'll have to pay for this plugin too. As the free version doesn't come with the options to customize your Pinterest images.

So, it seems the convenience of avoiding coding comes at a price these days! And this plugin is also $29 too. But whilst it is the same cost of WP Tasty plugins and has fewer Pinterest features. It does also have the additional features of being a general social media plugin. And it will add some well-designed sharing buttons to your blog too.

If I had to choose between Social Warfare and WP Tasty plugins though. I would go for WP Tasty Pins plugin. Because there are plenty of options for social media plugins. Whilst the WP Tasty Pins plugin is the only one of its kind. Or at least from what I have come across so far!

Also, Social Warfare has had an ongoing string of serious issues. Frequently breaking their users' blogs. And even leaving these blogs vulnerable to security issues, if only for a brief period. This can still have serious consequences for us bloggers.

5 | Embed Pins Directly From Pinterest With This Simple Trick

Did you know? You can add Pinterest images to WordPress by directly embedding them from Pinterest. You can use this with any Pinterest image. However, if the image is not yours. You should be asking for permission from the owner to embed the pin into your blog. This will help keep you out of hot water when it comes to copyright issues. But it is also just simply polite to ask. After all, I'm sure any blogger will be glad you asked. And will be thrilled that you want to share their content on your blog.

How to embed your pins directly from Pinterest?

In order to add Pinterest images from your blog using this embed method. You'll need to find the Pin on Pinterest that you want to embed. Click into the Pin so it opens fullscreen. Then in the top left corner click on the 3 horizontal dots. This will open a small menu, where you can click on Embed.

Clicking this will open the Widget Builder. Start by picking your pin size – small, medium or large.

Tick the Hide description box if you don't want the description showing beneath the embedded pin. Once everything is set, scroll to the bottom and you should see a code similar to this:

<iframe src="https://assets.pinterest.com/ext/embed.html?id=727823989760193259" height="534" width="236" frameborder="0" scrolling="no" ></iframe>            

This is the code you will want to copy and paste into your blog post. Or anywhere else you like, such as your sidebar for example. Just keep in mind, this is HTML code and will either need to be added into WordPress Gutenberg using an HTML block. Or if you are using the Classic editor. You will need to switch from the Visual tab to the Text tab in the top right corner. And paste the code in there.

If you preview or publish your blog post with this code in it. Then the embedded pin should look like this:-

Which Option Will You Use To Add Pinterest Images To Your WordPress Blog?

So, we've covered 5 different methods that you can use to add Pinterest images to WordPress blog posts. Including:-

• Adding the jQuery Pin It Button
• Including data-pin attributes like data-pin-description in your HTML code
• Using the WP Tasty Pins plugin
• With the Social Warfare plugin
• And embedding Pins directly from Pinterest itself

All these methods have different advantages. And which you use will likely depend on your own preferences. I personally have the Pinterest jQuery code installed on my blog without the use of a plugin. Because I had no idea there was a plugin to do it for me at the time. I also prefer to use the data-pin attributes using HTML. Which you can find my full strategy in detail here.

But, I'll be honest I am a bit of a coding nerd. And not everyone will like this method. Which is fine because there is an excellent zero coding required option. Like using the WP Tasty Pins plugin.

So, which method or combination of methods do you like to use on your WordPress blog?

📌 Enjoyed this post? Then pin this post to your best Pinterest or Blogging tips board! 📌

Can You Use Pinterest Pictures On Your Blog

Source: https://www.individualobligation.com/add-pinterest-images-to-wordpress/#:~:text=You%20can%20add%20Pinterest%20images%20to%20WordPress%20by%20directly%20embedding,the%20pin%20into%20your%20blog.

Posted by: baileybutragreake1938.blogspot.com

Share this post