How Do I Embed A Pin It Button On My Wordpress Blog Post

Pinterest is my #1 social media tool I use daily. I've recently talked about how Tailwind can save you hours of work with Pinterest. This has helped me TREMENDOUSLY and I still recommend Tailwind (affiliate) if you are not using it. I've been working extra hard on growing my Pinterest account and making it better.

One of the ways to up your game in Pinterest is to add a "Pin It" button on your website's images. This allows a quick and easy way for visitors to pin your content.

You can use the basic red and grey Pin It button from Pinterest but it may not flow or look as nice with your site. I've created a quick tutorial below so that you can easily add your own Pin It button. Plus if you subscribe to our newsletter you will receive 40 custom buttons that I created.

Let's get started and add this Pin It button to your site! I'm so excited for you!!

Step 1 – Install & Activate Plugin

1. Click on PLUGINS >> ADD NEW.

2. In the search box type in jQuery Pin It Button

3. Click INSTALL NOW >> ACTIVATE

Step 2 – Configure Settings

1. Next, click on SETTINGS >> JQUERY PIN IT BUTTON.

2. Now, click on VISUAL.

3. Scroll down and look for PIN IMAGE.

4. Check the circle for CUSTOM then click on the button that says UPLOAD AN IMAGE USING MEDIA LIBRARY.

5. Choose your image then change the HEIGHT and WIDTH if you need to.

If you are using one of the Free Pin It Buttons please change the width and height to the following:

Rectangle Image – Height 56 & Width 125
All other Images – Height 100 & Width 100

6. Click SAVE CHANGES at the bottom.

Step 3 – Additional Changes

View your site and see how the button looks. If you do not like where it's placed or only want it on certain pages. There are additional settings that you can customize further. Under the SELECTION tab… you can choose which pages you would like the Pin It button to show. If you do not want it to show on the homepage remove [home] and [front]. This is how my settings are configured.

Step 4 – How To Remove The Pin It Button From Certain Images

There will be some images within a post that you do not want to have pinned. You can easily add the css class nopin to remove the Pin It button from those images.

1. To do this… go to the post editor and choose the post where you would like to remove the pin it button from.

2. Click on the image within the post. Click ADVANCED on the bottom right of your screen.

3. Type in nopin then click PREVIEW. If the Pin It button has been removed click PUBLISH.

Wrapping It Up

Adding the Pin It button can help drive more traffic to your site. Even if you don't have a Pinterest account yourself. This will encourage and remind visitors to pin your posts. It easily allows them to pin their favorite content.

Looking for more tutorials like this one. Check these out:

Use your own Favicon
Create a WordPress Gravatar
How to use a Custom Font on your site