How to add a pin it button to your WordPress site + Free button images

In this this posts I show you How to add a Pin it button to your WordPress site. I love Pinterest, I believe It’s a great tool for promoting and driving traffic to your blog.

I confess spend hours there just scanning and pinning. It´s perfect if you are planning your ideal wardrobe or styling for an event, your next living room remodel, or finding a delicious dish to take along to a party, your next DIY project,…

If you’re looking for an easy way to pin images in your blog posts and pages, there is an awesome plugin called jQuery Pin It Button For Images,  that will help you with that. I love this plugin because it allows:

  • Upload your own Pin it button.
  • Choose position where you want show up “pin it” button.
  • Choose if you want to show the “Pin it” button on home page, single posts, single pages or category pages.
  • Disable showing the button on certain posts and pages.
  • Choose level of transparency when you hover over images.

HOW TO ADD A PIN IT BUTTON TO YOUR WORDPRESS SITE:

Install jQuery Pin It Button For Images Plugin

  1. In your WordPress dashboard, hover over Plugins.
  2. Choose “Add new”.
  3. Type “jQuery Pin It Button For Images” in the box and press “Search Plugins”.
  4. Once you have located the plugin, click Install Now.

How to add a pin it button to your WordPress site - Tutorial - 01 - Lovely Confetti WordPress Themes

Configure jQuery Pin It Button For Images Plugin

Selection:

  1. Go to dashboard > Settings and select “jQuery Pin it button images options” and click on the tab Selection at the top of the page.
  2. Choose if you want to show the “Pin it” button on home page, single posts, single pages or category pages.
  3. Save changes.

Visual:

  1. Go to Visual at the top of the page to access the second page of settings.
  2. Asign transparency value, for example 0.5.
  3. Check the box “Use custom image” and then upload your custom Pin it button using the button below.

5. Now you can choose the pin it button position where you want it (Top left, Top right, Bottom left, Botton right or middle) and adjust margins. (I usually choose top left and 20px for margins).

6. Else It´s possible optimize your pin it button for retina displays. In this case, make sure you upload a “Pin it” button that is twice the size you want it to display.

7. Now, save changes.

 

FREE PIN IT BUTTON IMAGES FOR YOUR SITE:

And as a bonus, you can download my free “Pin it” button images for you! If you like these, subscribe to my free library and download the zip files (.png and .psd) so you can change colors in Photoshop to match your brand and use them on your site.

free-pin-it-buttons

Get this Free Pin it buttons

Pin It on Pinterest

Shares
Share This