How to Add Pins to a Blog Post Without a Plugin

//How to Add Pins to a Blog Post Without a Plugin

How to Add Pins to a Blog Post Without a Plugin

When it comes to Pinterest for bloggers, any blogger can tell you how importaint it is to include striking Pinterest images in their blog posts.  There are many ways to do this, amd a million WordPress plugins that can help you do it.  The truth is that with a few simple lines of code you do not need to use a WordPress plugin to manage your Pinterest pins!

pinterest pins on blog for traffic

The question you may be asking yourself right now is “Well, why wouldn’t I be using a WordPress plugin?”.  Good question!  In our guide to picking the best WordPress plugins we talked about a few importaint points.

The first thing to remember is that every time you install a WordPress plugin on your blog, it takes up your blog’s resources, potentially slowing it down.  That is why it is important to pick a plugin that can do as many things as possible (like the All in One SEO Pack plugin for example) and make sure you really do need a plugin to accomplish what you want to do!

Let’s take a look at what a Pinterest pin really is, and then how to easily put them in your blog posts without a WordPress plugin.

Anatomy of a Pinterest Pin for Bloggers

When it comes to including Pinterest pins in your blog posts, the pin itself really breaks down into a couple things:

  • Pinterest pin image
  • Pinterest pin description
  • Pinterest pin URL

If we include all this information in our pin, it makes it easy for our readers to post directly to their Pinterest boards with little effort.

Now, let’s look at a step by step process for adding this information to our pin in our blog post.

Step One – Upload Your Pinterest Pin (Pinterest Image)

Start by uploding your Pinterest pin or image to your blog post, and make sure you fill out your alt tag information.  Then, click the Text portion of your WordPress editor.  You will see something like this:

<img class="aligncenter wp-image-931 " src="https://yourwebsite.com/your-pin.jpg" alt="your alt image tag information here" width="350" height="525" />

Now, let’s take a look at what this HTML tag breaks down to:
  • img class=”aligncenter wp-image-931″
    Don’t worry about this too much.  It is just the code telling WordPress you uploaded an image, you may see slighly diferent text here based on what WordPress theme you are using.  The key is img
  • src=”https://yourwebsite.com/your-pin.jpg”
    This just tells WordPress where you uploaded your image.  You will see your website URL and your media path here.  Remember to give your images a name that include keywords!
  • alt=”your alt image tag information here”
    When you enter your alt tag information, you will see it here.
  • width=”350″ height=”525″
    These are the specific values I use, and they are represented in Pixels.  I use the same dimensions for every Pinterest pin I upload.  Be sure to pick a size that looks great on your website.

This is your basic image tag!  I hope you are using the alt attribute when you upload images to your website.  It can help you when it comes to SEO.  Be sure to check out the guide to easy SEO to learn more!

guide to easy seo for bloggers

There are a few more things we need to do to make sure our blog images are Pinterest friendly.

Step 2 – Add Pinterest Tags

We are going to add two simple tags to the above in order to make sure we are optimized for Pinterest

  • data-pin-description=”Your pin description here, optimized for #Pinterest!”
    This is the description you would write just like if you were uploading a pin to Pinterest or scheduling a pin in Tailwind.
  • data-pin-url=”https://your-blog.com/post-url”
    This is the URL of where you want the pin to go when somene clicks it.  This is very importaint to fill out if you are including a pin to a different blog post.  You will also want to make sure you make your image a hyperlink to that post when you include a pinterest pin on another link in your blog.

Step 3 – The Finished Product

Here is the first example of how to put a Pinterest pin into your blog:

<img class="aligncenter wp-image-931 " src="https://yourwebsite.com/your-pin.jpg" alt="your alt image tag information here" width="350" height="525" data-pin-description="Your pin description here, optimized for #Pinterest!" data-pin-url="https://your-blog.com/post-url" />

I always use the data-pin-description tag first, then the data-pin-url tag second, just for consistency.  Also, please note the space between the final /> which closes your HTML tag.

If you want to make sure the pin is also a clickable link, the code would look like this:

<a href="https://yourwebsite.com/blog-post-url"><img class="aligncenter wp-image-931 " src="https://yourwebsite.com/your-pin.jpg" alt="your alt image tag information here" width="350" height="525" data-pin-description="Your pin description here, optimized for #Pinterest!" data-pin-url="https://your-blog.com/post-url" /></a>

You can see the addition I made in bold.  We wrapped our image HTML code with the link code.  In case you were wondering, href stands for hyper refrence, like a hyper link.

Step 4 – Testing Your Pinterest Pin for Your Blog

I always test my pins when I am previewing a post, or right after I have published it.  I prefer to use Tailwind to test my pins, so I can easily see all of them at once.

First things first, I use Tailwind to schedule all of the pins in the post,  I can immediately tell where I have issues just by looking at it at my Pinterest pins for my blog post:

pinterest pins for bloggers check pin tailwind

In this case, it is clear that the Pinterest pin description did not work.  Here are a couple of reasons why it may not have:

  • You simply forgot to include it (oops!  it happens!)
  • You do not have quotation marks enclosing the pin description as shown in the example.
  • You do not have a space before the final closing of the HTML tag ( />)

All of these are simple to fix!  The next thing we need to check is that our URLs are correct, as illustrated here:

check pinterest pin blog url

Just click in the spot with the URL, and you will see the complete URL.  Make sure it is correct for each pin!  It may be incorrect for any of the reasons above!  You can use the same steps to fix them.

After you have verified your pins are correct, you can of course schedule them right there with Tailwind!  I have mentioned Tailwind a couple times, and it has been my most essential tool for managing my Pinterest account, including manging and scheduling to group boards, and buidling my follower base.

drive pinterest traffic with tailwind and pinterest group boards

Tips for Managing Pinterest Pins on Your Blog

Now, let’s summarize what we learned in this post, and a few more tips I have for managing Pinterest pins on your blog, and in general.

  • Decide on a uniform Pinterest pin size for your blog posts up front, and make sure to size all pins accordingly.
  • Do not forget your Pinterest pin description (data-pin-description)
  • Do not forget your Pinterest pin URL (data-pin-URL)
  • Do not forget to make your pin a clickable link to the blog you are refrencing (()))>><<>>
  • Keep a list of all your Pinterest pin descriptions so you can tweak them for future pins as needed

These tips make it simple to manage Pinterest pins on your blog, without a WordPress plugin.

BONUS: Making a Pinterest Image Unpinnable

Do you want to make an image on your site unpinnable?  Such as a featured image?  This means users will not be able to pin certain images to pinterest.

Simply add the data-pin-nopin="true" attribute to your Pin’s HTML code snipped.  Users will not see the images with this tag when they try to click on their PinIt button or Tailwind scheduler.

 

2019-07-22T10:59:25-05:00April 24th, 2019|Blogging|0 Comments

Leave A Comment

CommentLuv badge