How to Add a Pinterest “Pin It” Button to Your Site
For those of you who live under a rock, there’s a new rage on the internet and it’s called Pinterest. Here’s what it is:
Pinterest lets you organize and share all the beautiful things you find on the web. People use pinboards to plan their weddings, decorate their homes, and organize their favorite recipes.
If you’re like most of us, you know exactly what Pinterest is, and you’ve probably heard a number of people talking about it. Some people think that Pinterest is a “timesuck” or “online bulletin board”, but to others it’s a huge source of traffic.
Don’t Believe Me?
ProBlogger founder Darren Rowse wrote a really good blog post recently about how he overlooked a 1000 visitor a day source of traffic.
Or you can see what Nester thinks about Pinterest and blogging. She’s a home decor blogger, and knows a thing or two about that niche.
Many folks are pigeonholing Pinterest as a website for women – but I’m seeing more and more people (as in guy friends of mine) sign up and using it as well.
Adding the “Pin It” Button
I won’t tortue you any more, so here’s how you add a Pinterest “Pin It” button to your site. As with all tutorials, this assumes you’re using the Genesis Framework.
The first step is to create a file named single.php and place the code you see below. Save the file and upload it to your child theme’s directory on your server.
With Pinterest, you have three options for the “Pin It” button display – horizontal, vertical and no count. Choose one of the three options – not all of them.
Horizontal button display:
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
/** Horizontal */
printf( '<a class="pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="/img/spacer.gif"> Vertical button display:
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
/** Vertical */
printf( '<a class="pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="vertical">Pin It</a><script type="text/javascript" src="/img/spacer.gif"> No-count button display:
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
/** No-count */
printf( '<a class="pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="none">Pin It</a><script type="text/javascript" src="/img/spacer.gif"> Which Image Will Show?
The pinterest_share_button function will pull in the genesis_get_image function, which first searches your post to see if you have set a Featured Image.
If you haven’t set a Featured Image, the fallback will be the first image found in the gallery for that particular post.
Placing the Pinterest “Pin It” Button
The sample code given above will place the Pin It button directly above your post content. If you’d like to display it after the post content, replace this code:
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );With this code:
add_action( 'genesis_post_content', 'pinterest_share_button' );If you would like to place the Pin It button before and after the post content, your entire single.php file would look like this:
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
/** Horizontal */
printf( '<a class="pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="/img/spacer.gif"> Styling the Pinterest “Pin It” Button
There probably isn’t much that you’ll want to style with the “Pin It” button. Depending on where you place it you might want to adjust margin or padding.
Here’s how you can target the Pinterest “Pin It” button through CSS:
.entry-content br {
margin: 10px 0;
}Oh – by the way – if you’re a business or consumer and want to connect with others on Pinterest, check out Pin Savvy Social.
Special Thanks
Thanks to Nathan Rice for writing the Pinterest “Pin It” function used in this tutorial.
Sign up for my Newsletter:
- General WordPress Tips and How-To's
- Code Snippets for the Genesis Framework
- Detailed Tutorials on Building a Custom Genesis Site
- Internet Tricks of the Trade - Design, Social Media and More
Comments
I am personally waiting for them to open their API so I can do some more things with it, i.e pull in photos, etc. Sucks that I can’t.
Yeah – I’m sure it’s only a matter of time before they figure out that an open API would be a good thing for developers.
Sweet! Less than a minute and done! Works great Brian!
Awesome Tris – glad to hear it!
I recently started work on a simple Pinterest Pin It button plugin after I ran into issues adding it to my WP sites. Features are minimal at the moment but it gets the job done and I’m working on requests from folks such as placement an display options.
wordpress.org/extend/plugins/pinterest-pin-it-button/
It mimics the JavaScript behavior of their bookmarklet rather than their “add to your website” code that you used.
Other than that, I got a hold of a developer at Pinterest and they say they’re working on an API currently. But no timeline as to when it will be released to the public.
Phil – thanks for dropping by and linking to your plugin. I actually considered writing this tutorial with your plugin in mind, but I’m trying my best to teach people how to do things with Genesis here on the site. Either way works the same probably.
I like Phil’s plugin, which is getting better by the day… but I also like doing things like this without plugins a lot of the time. So kudos to you both.
love this & will be adding it to my site: FancyLittleThings.com as soon as we move over to Genesis {when my design schedule allows!!} – we currently use this plugin: flauntyoursite.com/pin-it-on-pinterest/ but look forward to leaving it in the dust!! thanks for another great post.
Thanks Aimee, as I had answered someone over on my Google+ thread, I prefer to use simple native code for functionalities like this so that I don’t have to rely on 3rd party plugins and experience possible compatibility issues down the road.
love that we have the option on Genesis. good stuff Brian!!
Thanks so much for this Brian! I was using the Pinterest “Pin It” plugin on my website but it was putting the “Pin It” button underneath my related post stuff where no one can see it – and it was doing my head in!
You betcha – have you had a chance to use this code instead and is it placing the Pin It button in the proper spot?
Is there anyway to add it to the Jetpack sharing tool?
I doubt it – that’s something that TPTB over at Automattic would have to decide.
I just tried adding it in as ‘another service’ and it’s possible to add it in but you can only do it for one url and have to predefine the image and everything.
Brian’s way of doing it here is definitely the best way to go about adding it to your site.
However, it would be nice to see a mini tutorial on adding a similar set of social sharing buttons to posts like the ones in Jetpack. Brian?
I hear ya Paul – I tried the “simple” code given by Pinterest and yes, it required a manual setting of URL and image for each one. That’s why I insisted that Nathan write up something with the “all inclusive” style for pinning posts.
Just wrote a post last night about adding the Pinterest button to your blog… My post shows how to append it to Jetpack’s Sharedaddy share bar with jQuery.
Good stuff Austin – and thanks for sharing. Sounds like this is a universal way of adding it to any theme – right?
Can I just check – by adding this material to child theme it will not get overwritten by genesis framework update?
What if child theme gets updated by studiopress – will there be a a way to save anyof these child theme mods?
Mike, child themes are never affected (files getting overwritten, etc) when Genesis is updated. Child themes themselves are seldom updated, and even when they are it’s usually minor stuff.
Thanx Brian for the tip
— I place the hook/function code in my functions.php or via Simple Hooks plugin, so no new template file (single.php) is necessary at all 
Thanks so much for the link Brian, such a great tutorial, linked to you in our sidebar as a resource.
Thank YOU Jessica as well – hopefully you got some traffic last night as I also tweeted about your services!
I’ve been trying to built the button in for a few weeks now but was having problems getting the thumbnail to work. Thanks for sharing this Brian!
Of note. I had an existing single.php file so I just added the code above to that file (above the closing “genesis( );” line). It error’ed out unless I *removed* the “<?php" from the copied code. I'm sure a real coder would find that obvious, but I'm a hack…
Yea, the tutorial assumes it’s a fresh file, which is why the opening php line is there. Obviously you figured out the hard way Jay, but like you said – you’re a hack. Like me, you seem to learn by trial and error, also known as being street smart. (sometimes I think that’s a better trait than being book smart!)
Thank you Brian for the tutorial and Nathan for the code, I added it to my main sites. I’m loving Pinterest! – Eleanor
Works awesome like was mentioned above!
Any chance there’s a way to add this button along side the tweet button in the post info area?
Thank you Brian! I hated having a plugin installed just for that. Makes it much easier. Hate where it puts it when setting it for the bottom of the post, but I don’t mind keeping it at the top.
Good to hear – always happy to know that I’ve solved a problem for folks and also that it requires one less plugin.
Thanks Brian for the tutorial. No doubt Pinterest is on the rise and designers/developers and DIYers alike should be aware of how to integrate this on their sites.
Thank you so much, Brian! This worked great and was very easy to set up.
I’d love to be able to add a Tweet button alongside, too.
Great to hear it Cindy! I’ll see if I can manage a Twitter tutorial soon.
Perfect timing. I just had a client request this feature for her catering and recipe website.
Love Studiopress and Genesis. So much bang for the buck.