I got asked this question and I thought it would be useful if I created an article for everyone.
Disclaimer: I got this code working thanks to some articles I read on the internet, which I can’t remember the name.
In this article, I’ll explain how to create those beautiful social bookmarking icons for your thesis theme. You can see a screenshot of what I mean below, or a real example on my blog freestlye mind.
How to add social bookmarking icons to Thesis
It turns out that it’s really simple to create a box like that, all you have to do is choose your icons (I used icon finder), and add some code.
For this example to work, I assume you already have your icon set. The first thing you want to do, is to add the following code to your custom_functions.php file:
function get_tiny_url($url) {
if (function_exists('curl_init')) {
$url = 'http://tinyurl.com/api-create.php?url=' . $url;
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
$tinyurl = curl_exec($ch);
curl_close($ch);
return $tinyurl;
}
else {
# cURL disabled on server; Can't shorten URL
# Return long URL instead.
return $url;
}
}
function share_post () {
if (is_single()) {
?>
<div class="box">
<div class="share">
<h3>Share with your friends!</h3>
</div>
<div class="social_icons">
<p>
<a href="http://twitter.com/home/?status=RT @username <?php the_title(); ?> : <?php echo get_tiny_url(get_permalink($post->ID)); ?>" title="Tweet this!">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/twitter.png" alt="Tweet this!" />
</a>
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="StumbleUpon.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/stumbleupon.png" alt="StumbleUpon" />
</a>
<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Vote on Reddit.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/reddit.png" alt="Reddit" />
</a>
<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Digg this!">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/digg.png" alt="Digg This!" />
</a>
<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" title="Bookmark on Delicious.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/delicious.png" alt="Bookmark on Delicious" />
</a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share on Facebook.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/facebook.png" alt="Share on Facebook" id="sharethis-last" />
</a>
</p>
</div>
<div style="clear:both;"></div>
</div>
<?php
}
}
add_action('thesis_hook_after_post_box', 'share_post');
This code assumes that you put your images under the custom/images folder of your thesis installation. I have highlighted two sections you can (and should) change.
Now for the css:
.box { margin: 2.1em 2.1em 2.1em 0; padding: 1.2em; background: #EDEDED; border: 1px solid #DFDFDF;}
.box h3 { margin-top: 0; font-size: 1.4em; }
.box p { margin-bottom: 0; }
.box .share {float:left; width:38%;}
.box .social_icons {float:right; width:58%; }
.box .social_icons a, .box .social_icons a:hover {border:none;}
.box .social_icons img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;-khtml-opacity: 1.0; }
.box .social_icons img:hover {filter:alpha(opacity=50);-moz-opacity: 0.5; opacity: 0.5;-khtml-opacity: 0.5;}
Conclusion
Here you go, now your you should be able to see your social bookmarking icons. If you don’t have a thesis license already, you can get one here and enjoy a thesis coupon.
{ 2 comments… read them below or add one }
Thank you for this great tutorial! Loving my social bookmarking shortcuts now thanks to u
@Michael, glad it helped