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.
This method incorporates the Pin it Javascript button into my existing set of social sharing icons displayed after the byline on every individual blog post.
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).
***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***/
After adding the PHP to your custom hooks, then you need to add some styling to the custom.css file.
/***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***/
Have you found another way to incorporate the Pin It button into your Thesis blog? Please share!
