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( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
genesis();Vertical button display:
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
/** Vertical */
printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
genesis();No-count button display:
<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
/** No-count */
printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
genesis();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( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
add_action( 'genesis_post_content', 'pinterest_share_button_after' );
function pinterest_share_button_after() {
/** Horizontal */
printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );
}
genesis();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:
.pinterest-button iframe {
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.
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.
http://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: http://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.
See this comment.
Any idea on how to get the Pinterest and Facebook buttons side-by-side? My code is working but they are stacked.
Here it is:
ID ), ‘full’ ); ?>
<a href="http://pinterest.com/pin/create/button/?url=ID)); ?>&media=&description=” class=”pin-it-button” count-layout=”horizontal”>Pin It
Thanks for any help,
David
Hard to say without seeing a sample blog post. Can you link to one/
Yes sure. It doesn’t seem like the code was visible either. Here it is again:
//ID ), ‘full’ ); ?>
<a href="http://pinterest.com/pin/create/button/?url=ID)); ?>&media=&description=” class=”pin-it-button” count-layout=”horizontal”>Pin It//
And here’s a link:
http://www.damyhealth.com/2012/02/cookie-dough-hummus-5-minute-recipe/
Thanks so much for your help.
David
Looks like you got this to work?
Yes, I got it figured out. Thanks again for your help. I appreciate it.
David
Hi Brian,
Thanks for this. I tried this method and got this error on each blog post.
“Parse error: syntax error, unexpected T_STRING in …[edited]… themes/eleven40/single.php on line 9″
Any ideas about line 9? I was using the 1st code listed for the horizontal display button.
Thanks
I’m guessing you missed something in the copy and paste. Have you been able to get it to work?
Not yet. I did double check my copy/paste. But just because, yes, I’m a hack…
The file does go in the Child Theme’s main directory, correct? Not Some other directory?
Thanks
No. sad face…I’m using a plugin.
I’ll try again, but each time I copy re-paste, the blog posts get shut down with that error message.
Feeling pretty incompetent right now. Outside of me actually learning to code, yes, you’ll be enabling me, any consoling professional advice on why adding that code gives that error?
Thanks again
No doubt the latest and greatest social media tool. Everywhere I go I am seeing this new social tool. Thanks for the tutorial as I am a Genesis member:)
I am wondering what would be the best way to include the Pinterest button along with Facebook, Twitter, etc. in Genesis. I have some experience with Thesis custom functions. Genesis seems somewhat similar with regard to hooks but I am a newbie and have not gotten the hang of Genesis yet. Thanks in advance for your help.
That’s something that should probably come by way of a social share plugin, or at the very least use our Genesis Simple Hooks plugin to add the necessary code.
Brian, Thanks so much for the awesome tutorial. I was struggling getting the images to show up with another plugin. I remembered you had tutorials on your site and sure enough you had one for Pinterest. I uploaded the single.php and it worked perfectly right away! Thanks again!
Hey Rachel – awesome, so glad to hear this worked for you!