Do you use the super awesome Thesis theme framework for your self-hosted WordPress blog? Is your Thesis blog full of good visually appealing content? Then you should consider adding the Pinterest Pin It button to your site.
About Pinterest
Pintrest describes itself as a visual pinboard for organizing and sharing content — a social bookmarking site like Diigo or Delicious, but focused around images that link to a source article, website, recipe or original photo or graphics file. I classify it more as a visual viral discovery and curation engine. Think Stumbleupon meets Tumblr, but simpler.
I’ve been hooked on Pinterest for a couple of months — spending anywhere from 15 minutes to 1 hour on it every day, mainly perusing recipes, craft ideas and patterns, and home decor inspiration. I really did not want to branch out into yet another social networking site, however, my husband and I started noticing in our Google Analytics reports that Pinterest has (unsolicited by us) become the top traffic referer to our food blog since September, overtaking both Facebook and Google referrals. This post for pecan praline baked french toast has been so heavily Repinned that it forced us to up our PHP memory allocation on our virtual private server because of all the new Pinners hitting our site.
For me, Pinterest is strictly a fun personal social network (unless you count marketing my personal food and outdoors blogs as work). Visual content creators should definitely explore it for marketing purposes. But, contrary to suggestions from my colleagues Joe Murphy and Anna Laura Brown, I don’t see any real added-value use for it in my professional academic library work…yet.
If you are new to Pinterest, I recommend these articles from:
Adding the Pin It Button to Thesis
Like many similar web services, Pinterest provides some basic buttons and bookmarklets to allow web users to more easily share and drive content back to Pinterest. Pinterest provides a single-install Follow Button (so your blog readers can follow your own Pinterest profile), but its “Pin It” sharing button is really horrid — requiring website publishers to manually add it to every single post they want readers to be able to share (and only after a post, or permalink, is published). Unlike the Twitter button or the Facebook Share button, the Pinterest sharing button cannot be added to every single post through your blog template. Way too labor-intensive for me!
After researching and testing out a few solutions, I finally opted for this button-only method, written up by Chykalophia Design, which just uses the JavaScript code from the Pin It web browser bookmarklet. I also tried a method that displays the number of shares, but couldn’t get it to work (the number of shares never changes), so I’ll keep playing with that code.
Following is the code I added to the Thesis Byline Item hook in my my custom_functions.php file in order to get the button to appear on every individual blog post. I simply incorporated the Chykalophia Design tutorial into my existing set of social sharing buttons (which I originally borrowed from this excellent tutorial by Kikolani).
[sourcecode language=”php”]
***START ADD CUSTOM SHARING BUTTONS TO BYLINE***/
add_action(‘thesis_hook_byline_item’,’custom_byline’);
function custom_byline() {
if (is_single()) { ?>
<div class="social-single">
<div id="twitterbutton">
<div><a class="twitter-share-button" href="http://twitter.com/share">data-counturl="" data-text="" data-via="greeneadventurs" data-related="greeneadventurs"&gt;Tweet</a></div>
</div>
<div id="sharebutton" style="padding-top:1px;"><a name="fb_share" href="http://www.facebook.com/sharer.php"></a>Share</div>
<div id="stumblebutton"></div>
<div id="pinitbutton"><a href="//assets.pinterest.com/js/pinmarklet.js?r=’+Math.random()*99999999);document.body.appendChild(e)%7D)());"><img style="margin:0 0 -5px;" src="http://www.greeneadventures.com/wp-content/uploads/2011/12/pinitbutton.png" alt="Pin It" /></a></div>
<div id="plusonebutton"></div>
</div>
&lt;?php }
}
/***END ADD CUSTOM SHARING BUTTONS TO BYLINE***/
[/sourcecode]
After adding the PHP to your custom hooks, then you need to add some styling to the custom.css file.
[css]
/***START CUSTOM SHARING BUTTONS***/
.social-single {
margin: 17px 0 0 0;
}</code>
#twitterbutton, #likebutton, #stumblebutton, #sharebutton, #pinitbutton, #linkedinshare {
float: left;
display: block;
}
#sharebutton {
margin-left:0px;
margin-top:0px;
margin-right: 25px;
}
#stumblebutton {
margin-left: 15px;
margin-top: 1px;
margin-right: 25px;
}
#pinitbutton {
margin-left: 15px;
margin-top: -3px;
margin-right: 25px;
}
#plusonebutton {
margin-left: 25px;
margin-top: 1px;
}
/***END CUSTOM SHARING BUTTONS***/
[/css]
Have you found another way to incorporate the Pin It button into your Thesis blog? Please share!
Follow my professional Facebook Page , which is packed with tips, collections, events, and news personally recommended by me. I scour the web for great information for you. See you on Facebook today!
Can you clarify this a little bit? The part where you give the code to add to custom_functions.php will not copy into my editor.
Thanks!
Thanks for the heads-up. It looks like WP.com stripped my original [sourcecode][/sourcecode] shortcode; so I’ve added it back in to properly display the code markup. You should be able to copy the markup to your own text editor now.
Basically, I’m still not getting it on every post – only when I click on an individual post. I can’t tell what the difference is between your custom_function.php and the one from Kikolani.
I’m not quite sure what you’re asking. Can you clarify what you mean by “on every post” vs. “on an individual post”?
Kikolani’s tutorial explains how to display in-line social sharing buttons on individual posts (single post templates) in the Thesis theme framework without using a plug-in. Her tutorial, however, does not include Pinterest — how to add the Pin It button/bookmarklet to each post. So, I’ve added to her tutorial instructions in my post, noting how to include the Pin It button/bookmarklet alongside the other single post inline social sharing buttons.
This method *does” display the Pin It button/bookmarklet — as well as other social sharing buttons — on every single individual post. If what you mean by “on every post” is your home page (displaying x number of posts or post excerpts) or your archive, category, or tag pages…this method will NOT display the Pin It button (or other social sharing buttons) on those views. Because this method works with the “single post template”, it displays these buttons on the single (aka “individual”) post view.
Does that help?
Damn! It’s Greek to me. I was hoping I’d found a way. 🙂
Ah, well. I’ll keep waiting. This is beyond me. But while I was here I enjoyed your food blog! 😀
Unfortunately, the issue with the share count is something on Pinterest’s side – I haven’t been able to find a solution. Sometimes it works, sometimes it doesn’t. There are SO many great plugins now though, I recommend going that route instead of using the code I came up with. 🙂