How to Add Social Bookmark Button Links inside Posts in Thesis

In this video tutorial deals about how to add social book marking buttons inside your post page. Social book marking icons are very important for blogging and we need these buttons at the end of the post then only if a visitor read your article they can able to share your article with their friends easily. So you can add your book marking icons at the end of the post.

  1. Create or download book marking icons like digg, delicious, youtube, twitter, facebook, stumble upon and what ever you need.
  2. Save those icons as a image format like png, jpeg, tif and etc.
  3. Upload all images into thesis theme using ftp software like filezilla or fireftp.
  4. Login your ftp using cpanal username and password.
  5. Select the folder you need to upload images for this go click the following path. Publicl_html/ Inside the image folder you need to upload bookmark icons.
  6. Then select images in your desktop via ftp and upload by double clicking.

Once you uploaded your image copy and paste the following code in cuctom_function.php or launch.php file.

/* Adds socil media  bookmark links after each post */

add_action('thesis_hook_after_post_box', 'share_post');

function get_tiny_url($url) {
if (function_exists('curl_init')) {
$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);
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 class="social_icons">
<a href="<?php the_permalink();?>&amp;amp;t=<?php the_title(); ?>" title="Share on youtube.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/youtube.png" alt="Share on youtube" id="sharethis-last" />
<a href="<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="StumbleUpon.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/stumbleupon.png" alt="StumbleUpon" />
<a href="<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Vote on Reddit.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/reddit.png" alt="Reddit" />
<a href=";amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Digg this!">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/digg.png" alt="Digg This!" />
<a href="<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Bookmark on Delicious.">
<img src="<?php bloginfo('template_directory'); ?>/custom/images/delicious.png" alt="Bookmark on Delicious" />
<a href="<?php the_permalink();?>&amp;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 href=" @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!" />
<div style="clear:both;"></div>

You can place the code in two ways first way paste the code in cuctom_function.php.

  1. For this goto thesis options in wordpress dash board.
  2. Select custom file editor and choose cuctom_function.php
  3. Click on edit file and paste the code then save it.

The second way paste the same code in launch.php  which is available in the this path publicl_html/ using ftp. use any one of the above ways to paste the code.

Once you pasted the above code. Copy and paste the following code in custom.css file

/*Adds Social Media icons in each post*/
.box { margin: 2.1em 2.1em 2.1em 1em; padding: 1.2em; background: #EDEDED; -moz-border-radius:10px 10px 10px 10px;
border: 1px solid #DFDFDF;}
.box h3 { margin-top: 0.5em; font-size: 2em; line-height:35px; }
.box p { margin-bottom: 0; }
.box .share {float:left; width:38%;height:50px;}
.box .social_icons {float:right; width:60%; padding:0.2em;}
.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;}

For this,  goto thesis options in wordpress dash board.

Select custom file editor and choose cuctom.css

Click on edit file and paste the code then save it. The above code you can change background,width and height. Now visit your site with book marking icons.

For more checkout our all Thesis theme tutorials..

{ 12 comments… add one }

Leave a Comment

  • Rajesh Kanuri @ TechCats December 26, 2009, 9:31 AM

    I suggest you to add random screenshots as y r also briefing the post which will be helpful for the users with low bandwidth..

    • Pascal December 26, 2009, 9:41 AM


      Thanks for your suggestion. Soon I will add screen shots in my posts including the previously published one.

  • Ricky December 26, 2009, 11:36 AM

    Thanks for the tutorial. Although I own thesis I don’t use it but soon I’ll be using it.

    • Pascal December 26, 2009, 12:55 PM

      Adding social bookmarking icons below every post encourages your visitors to use it. So try to use on that.

  • Pavan Somu December 28, 2009, 1:11 PM

    Posting a video tutorial is a easy and good way for understanding. Good Job.

    • Pascal December 28, 2009, 1:41 PM

      We have dedicated our blog for completely video tutorials. You can subscribe to our youtube video channel for more tutorials.

  • Mary Hutson January 2, 2010, 2:34 AM


    Thank you for this information. Would you please give an example of how to add a LinkedIn link? I am new to .php and I’m getting lost.

    Thank you

  • Pascal February 18, 2010, 7:14 PM

    Place these code above the author box in custom_function.php

    Now your problem rectified.

  • Vivek March 20, 2010, 4:53 AM

    I have added the codes successfully. i only want to ask that how i can put these icons in the middle as you can see that they are being placed on the left side of the after the post.

    • Suresh March 20, 2010, 9:36 AM

      hai vivek,

      In your custom_functions.php code you dont have div class name. Thats why your css code doesnt taken into the design..
      check custom_functions.php file line 22 and 25 in the above post, Then give div class name box,share and social_icons in your site..

  • bill January 16, 2012, 12:00 AM

    The video tutorial is very useful because you can see thinks in action!Nice job!