Blog Update: Custom Pin It Buttons

Sarahmarket

Hey y’all! My blog is a complete work in progress. I chose a free template that sort of aligned with the direction I’d like the blog design to go and then jumped in headfirst to the world of WordPress’ plugins and editor tools. Thanks to forums and how-to’s I think I’ve been pretty successful with the changes I’ve made so far. I’ve relearned the old (or technically, fairly recent) adage, “if you don’t know how to do something, Google It.”

One of the things I was most excited about doing was creating a custom Pin It button. I love when websites have custom buttons as it shows me they care about their presentation and want their brand to continue to flow into every aspect of their design. As an overindulgent Pinterest user myself, I’ve compiled a collection of some favorite Pin It buttons and used them as inspiration when creating my own! [If you can’t tell, I am obsessed with wedding blogs..]

Branded Pin It Button Examples

1. Burnett’s Boards [burnettsboards.com] 2. Green Weddings Shoes [greenweddingshoes.com] 3. Grey Likes Weddings [greylikesweddings.com] 5. Lauren Conrad [laurenconrad.com] 6. Style Me Pretty [stylemepretty.com] 7. Ruffled [ruffledblog.com] 8. Design Love Fest [designlovefest.com]

I found this perfect tutorial for how to design and implement custom Pin It buttons on your blog by Marianne at DesignYourOwnBlog.com. She goes into detail on how to design the actual button, which is super helpful if you don’t have a photo editing tool like Photoshop, plus shares how to remove Google Chrome’s default Pin It button.

By default on Chrome (unless you haven’t updated in a long while, I suppose), when you hover over any image, the Pinterest Pin It button will show. That’s fine if you don’t feel like updating, but not all users use Chrome! I’ve also noticed that sometimes the actual button doesn’t lie properly on the image, so it can be hard to click.

To remove the default Pin It button on Chrome (so you don’t have your custom button + the default button), add the following line of code to the <head> element of your website template to remove hover buttons on the whole page. NOTE: If you are new to HTML, make sure to insert it outside of other code elements.

<meta name=”pinterest” content=”nohover”/>

Insert the plugin: jQuery Pin It Button for Images. By installing and activating this plugin, the Pin It button will appear on hover. Navigate into the settings and select what position you’d like the button to be and upload the button you’ve designed. 200×200 pixels works great, but feel free to make it smaller or larger depending on your style.

I also took a look at another plugin that I might actually end up using: Frizzly. What I like about Frizzly is that it adds Pinterest, Facebook AND Twitter sharing icons in the same hover over image approach. The social media marketer in me loves this because it encourages sharing on more than one social platform. If you believe it or not, not everyone uses Pinterest and sometimes a Tweet is just what is needed!

Have you implemented a custom Pin It button on your website? Did you use a different WordPress plugin or implement a cool design? If so, I’d love to hear about it and take a look!