How to add a custom Pinterest Pin It button to your images on WordPress



How to add a custom Pin It Button to your images on WordPressLast year I shared how to add a Pinterest Pin Board Widget to  your sidebar. Today I want to share about a cool Pin It plugin that adds a “Pin It” button to each of your images and how you can change out the default pin it button for a custom one of your choice.

I am addicted to Pinterest. I was on Pinterest before being on Pinterest was the cool place to be. If you are a blogger, Pinterest is a huge asset for your blog. It has become my number 1 traffic source.  (Thank you pinners, you are awesome!)

There are several plugins that add the pin it button to images or that include the pin it button on a post, but I’m going to show you how to tweak the plugin to add your own custom “Pin It” button.  If you’ll notice when you hover over any of my images now – my grey ribbon shows up with “If you like it then you should put a pin on it!” and the Pin It Button.

The first step is to install the “Pinterest Pin It Button for Images” plugin. (If you are not sure how to install a plugin, see my post here.) Once it is installed, be sure to activate it.

Then go to the Pin It Settings to update your settings.  You will want to to change the Content Width option to the same width # of pixels your blog’s content (post) area is.  Then you can also choose where to show the Pin It button. I prefer for it to show only on images in single posts and not my thumbnails or archive pages, but this part is up to you!

How to add a custom Pin It Button to your images on WordPress

Now the plugin will work. You may have to clear your browser’s cache first though. When you hover over images you will see the rectangular Pin It button in the top right corner. Pretty cool, right?  Well hang on to your seat because I’m about to show you how to take this from cool to super cool!

The next steps to add the custom image may seem a little intimidating. I am going to do my best to break it down for even newbie bloggers or non-techy folks.

First you need to create your custom image. You could use something with your own logo on it like Today’s Crafty Blog has one with her little birdie logo with a word cloud that says Pin It or you could do an image like I did with the ribbon from my header logo. (If you don’t have a graphics program to make your own images, check out Picmonkey.com.)  

  • Be sure the image is not wider than the widest images you use in your content.
  • You should at least say Pin It or also put the Pin It Button graphic on it too.
  • Be sure to write down or save the exact width & height of the image you created as you will need this info for the next step.
  • Once you have your image made, be sure to make the name of it all one word with no spaces – like mynewpinitbutton.png  or awesomepinbutton.jpg
  • Save it to your computer somewhere that you can easily find it.

Now you are going to go in your WordPress Dashboard to Plugins, then go into the plugin Editor.  Choose the Pinterest Pin It Button for Images in the Dropdown box  and click on Select.

How to add a custom Pin It Button to your images on WordPress

You will see the custom files for the plugin listed down below to the right under the Select button.  Near the bottom of that list you will see a file titled “pinterest-pin-it-button-for-images/ppibfi_pinterest.css”  BE CAREFUL here, be sure you click on that exact file and are working it in and not the others.

How to add a custom Pin It Button to your images on WordPress

Ok once you are in the css file, you will see that WP moves that to the top on the right and you’ll see the name listed at the top too.  Now you are going to change just 3 things in this file.

How to add a custom Pin It Button to your images on WordPress

On this line:

.pibfi_pinterest .xc_pin {
width: 80px; height: 50px; /* Please note that the button is 80px x 50px. If you use a different size button, change this */

 Change the #’s for the width and height to be the same as the image you created.  My image is 390 wide and 80 high so all I did was change the 80 to 390 and the 50 to 80.

 Then on the next line:

background-image: url(‘ppibfi_button.png’); background-repeat: none; /* This is the buttons image. Image can be found in the plugin folder */

Change the url for the image to the same thing you named your custom image you created. For instance, I named my image ifyoulikeitpinit.png so I changed the ppibfi_button.png  to ifyoulikeitpinit.png  Be sure to NOT delete the apostrophe’s.

Now you can click on UPDATE FILE at the bottom of the Plugin Editor.

———

Whew, take a deep breath and give yourself on the back if this is the first time you have edited a plugin file. (Fun, isn’t it?)

———

The last step is to upload your custom image that you made to the plugin’s image folder in your File Manager or via FTP. If that sounded like Greek to you, just keep reading I’m going to explain how to do this.   If you are familiar with FTP you will already know what to do, if not I’m going to show you have to do this via your Hosting Control Panel instead.

Login to your hosting control panel (cpanel) & go to your File Manager (or if you are with Godaddy just login to your account and launch your Web Hosting area and go to your File Manager).  In cpanel, when the box pops up just click on OK.

How to add a custom Pin It Button to your images on WordPress

Now once you are in your file manager, scroll down and click on the WWW to expand it and view all your files. (If you have more than 1 domain in your account be sure you are in the correct site’s folder). (Don’t let my zillion subdomains and add on domains scare you, you will not see all those folders in your own cpanel).

How to add a custom Pin It Button to your images on WordPress

Once you have expanded the WWW file, you will see a folder named “wp-content” – click on that folder.  Then in the right hand side you will see that folders contents including a folder named “Plugins”. Now click on that folder in the right hand side named Plugins to open it up.

How to add a custom Pin It Button to your images on WordPress

 

You will see all your Plugin folders. Click on the one named “Pinterest Pin It Button for Images” to open it up.   Hang tight, we are almost done!

How to add a custom Pin It Button to your images on WordPress

 

Now that you are in the folder for the plugin, click on the UPLOAD button up top. A new window will open up for you to upload your image. Click on the Choose File button, find the image you made earlier on your computer and click on upload.  It should say Processing… then Complete in black at the bottom right corner.

How to add a custom Pin It Button to your images on WordPress

How to add a custom Pin It button to your images on WordPress

Now you are done! YEAH!

Check out your blog in another browser to make sure it looks right and the image shows up. Or you can clear your browser cache and then you can see the custom image.

There you go! Now you have a custom image and if you have never done something semi techy like this you should be pretty darn proud of yourself!

PS Be sure to check out all my other Blogging Tips & Resources Posts here!

If you liked this post or learned something, I would LOVE it if you would leave a comment below and also share, tweet and yes of course “if you like you then you should put a pin on it!” :)

Comments

  1. says

    Hi Misty! You go girl; I LOVE your posts. You’re very giving, very client oriented! I. Enjoyed this one a great deal, as I (adnittedly) have not utilized Pinterest to its fullest on any of my blogs. Thanks so much for sharing!
    Deanna Bounds-Ross recently posted..Good to Be Home!My Profile

  2. says

    Thanks for the great tutorial! I just “put a pin on it” to come back to this later. ;) Also, I love how you have a box with your twitter profile and a follow button and the bottom box with your bio, twitter, facebook, etc. Are those plugins or specially made? Oh, and sorry, one more question. I love how when I post a comment you have a “Notify me of replies to my comment” option. I downloaded a plugin that suppsedly does that, but unfortunately the text reads “Notify me of follow-up comments via e-mail” which makes it seem like the commentor will receive an email when anyone leaves a comment. Would you mind sharing which plugin you use or how you were able to change the text? I’m using the Comment Reply Notification plugin. Thanks so much! :D
    Ali recently posted..16 Ways to Veg Out Without TV or TechnologyMy Profile

  3. Luisa says

    Such a thorough and helpful tutorial! The absolute best! I just did this for my website and it worked! Woohoo! Pinning this for my blogger friends!

    • says

      Thanks Marta! I’m pretty sure that’s a pinterest default, I believe most all the pin it plugins and even the toolbar button pull the image’s title by default. Be sure to fill in the alt & title tags in the image’s html code for whatever you want it to say – not just for pinterest but for SEO too. :)

  4. Erica says

    Oh my gosh, I love this. I created a button that just says Pin Me, Please! I’m cracking up as a scroll over each of my photos. Thanks!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge