How to Design Your Own “Pin It” Button for Blog Photos

Getting your images pinned and noticed is an effective way to grow your blog traffic. A huge part of my traffic comes directly from Pinterest which is fantastic!

But I´m not a fan of the RED pin-it button, for the simple reason that it does´t fit my brand or my web design. If you feel the same, you´ll love today´s tutorial on how to design your own pin-it button. (NB. this tutorial is only for self-hosted blogs; wordpress.org).

Adding a custom Pin It button to your WordPress blog will help your brand identity, as you can make it so it fits your blog design and colors.

How to Design Your Own “Pin It” Button for Blog Photos in Four Simple Steps

STEP #1. Add the jQuery Plugin to your self hosted WordPress blog. The plugin enable users to upload their own buttons and set everything up on the plugin page! Within the WordPress admin, go to Plugins > add new and search for jQuery Pin It Button For Images. Install and activate. 

STEP #2. Find a button (an image) that you want to use. Make sure it’s a PNG file so that the image background is transparent and will blend in with your blog or photo.

Pin it button

I designed a free-to-use pin-it button, in case you find it to much of a challenge to create your own. Download it here

To design your own personal pin-it button, go to PicMonkey click on “design it” (you do not have to register to do so). Then design your button. Make sure to check “transparent canvas” this is to ensure you get a transparent background for your button.

You can choose to use a circle, a heart or whatever shape you like. Then decide for the color and add text in the end.

To ensure a suitable size resize to 300×300 before you save the png image to your computer.

STEP #3. Upload the button png file into media file in your WordPress blog, then copy the image URL.

STEP #4. Go to the jQuery plugin and find the place to paste in the URL of your button image. Then click save and refresh to see it appear.

Now you should be able to see the pin-it button on your blog images.

Note: I tried to design a button in Canva, but I could´t find a way to create a transparent background. I wish it would be possible in Canva, since it´s a great place to design blog stuff. If you are familiar with Photoshop you can also design your pin-it button on a transparent background layer.

I hope you will have fun with this tutorial!


Enjoy!

About Christina Greve

Christina Greve is a Lifestyle Photographer, Soul Empowerment Coach, and Psychology-driven Business Mentor. She helps heart-centered women, passion-driven makers and creative souls optimize life + make a living doing what they LOVE. She is known for her elegant storytelling photography and draw much of her inspiration from the Nordic countryside, travels, food and still life. Her work has been featured in numerous magazines, blogs and books worldwide. After a decade of working with psychology and coaching, Christina´s passion for photography evolved into a full-time photography and coaching business. Today she runs a thriving + fast growing empire specializing in professional online training, motivating and engaging female photographers, designers, bloggers, makers + creative souls. She has coached thousands of fabulous women from more than 40+ countries.

Comments are closed.