Add Slick Social Media Icons to Thesis

So as it currently stands there are some pretty sweet social media plugins and even some killer social media tutorials out there for Thesis, but personally I wanted to roll something custom for Art of Blog.

Thesis Social Media Icons Video:

Today’s video will show you how to quickly implement sleek unobtrusive social media links/smart icons to your Thesis site without a plugin. These smart icons can be found right under this posts’s title.

YouTube Preview Image

Implementation

Now that you have watched the video on how to implement the code its time to grab the code below. Simply add these two snip-bits to your custom_functions.php and custom.css and you will have a slick looking social media setup.

**Update: We now have code for the share buttons on the side of your website and code to insert the share buttons below the headline of your posts.

Make sure to change $twitter=’artofblog'; to $twitter='[Insert your Twitter Account]';

Sidebar Social Bar

To implement the code below simply copy and paste it into your custom_functions.php. Don’t forget to add your twitter name. This code sets up the social media “smart icons” along with the HTML to allow us to effectively style it.

function add_floating_share(){
global $post;
	if(is_single() || is_page()){
	?>
    <div id="sharebar">
    <ul>

    <li><a href="http://twitter.com/share" data-count="vertical" data-via="taxreceipts">Tweet</a></li>
    <li><g:plusone size="tall"></g:plusone></li>
    <li id="fb"><div id="fb-root"></div><fb:like href="" send="true" layout="box_count" width="65" show_faces="true" font="tahoma"></fb:like></li>
    <li><su:badge layout="5"></su:badge></li>

    <? 
	    $img_url = get_post_meta($post->ID, 'img_url', true);
	    $anchor_text = get_post_meta($post->ID, 'anchor_text', true);
	    $pin_description = get_post_meta($post->ID, 'pin_description', true);
	    if(strlen($img_url)>0 && strlen($anchor_text)>0 && strlen($pin_description)){ ?>
	    <li><a href="http://pinterest.com/pin/create/button/?url=<?=get_permalink();?>&media=<?=$img_url;?>&description=<?= $pin_description;?>" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></a></li>
	    <? } ?>

    </ul>
    </div>

	<? 
	 }
}
add_action('thesis_hook_before_content_box','add_floating_share');
function social_footer(){ ?>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=176133919079931&amp;xfbml=1"></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=120406481416771";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
 <?
 }

 add_action('wp_footer','social_footer');

Add to Your custom.css

Now that we have added the smart icons we need to style them. Please make note of the .social{margin:-15px auto 10px;} You may need to change the -15px to something else depending on your customizations.

#sharebar {
	left:-80px; 
	top:  100px;
	position: absolute; 
	width: 67px; 
	background: #fff; 
	padding: 0; 
	text-align: center; 
	border: 1px solid #ccc; 
	list-style: none; 
	margin: 0; 
	z-index: 99; 
	box-shadow: 0 0 4px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
 }
#sharebar ul { 
	margin: 0 0px; 
	list-style: none;
}
#sharebar li { 
	display: block; 
	margin: 5px 0; 
	padding: 0; 
	overflow: visible; 
	text-align: center; }
#sharebar #fb { 
	margin-left: 10px; 
	text-align: left;}
p.recommended {
	background: whiteSmoke;
	padding: 14px;
	border: 2px solid #EFEFEF;
	text-align: center;
}
.page {
	position: relative;
}

You may need to tweak the CSS for your website. This code is adapted from the sharebar currently on Art of Blog.

Below Post Share Bar

To implement the code below simply copy and paste it into your custom_functions.php. Don’t forget to add your twitter name. This code sets up the social media “smart icons” along with the HTML to allow us to effectively style it.

function add_floating_share(){
global $post;
	if(is_single() || is_page()){
	?>
    <div id="sharebar">
    <ul>

    <li><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="taxreceipts">Tweet</a></li>
    <li><g:plusone size="tall"></g:plusone></li>
    <li id="fb"><div id="fb-root"></div><fb:like href="" send="false" layout="box_count" width="65" show_faces="true" font="tahoma"></fb:like></li>
    <li><su:badge layout="5"></su:badge></li>

    <? 
	    $img_url = get_post_meta($post->ID, 'img_url', true);
	    $anchor_text = get_post_meta($post->ID, 'anchor_text', true);
	    $pin_description = get_post_meta($post->ID, 'pin_description', true);
	    if(strlen($img_url)>0 && strlen($anchor_text)>0 && strlen($pin_description)){ ?>
	    <li><a href="http://pinterest.com/pin/create/button/?url=<?=get_permalink();?>&media=<?=$img_url;?>&description=<?= $pin_description;?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></a></li>
	    <? } ?>

    </ul>
    </div>

	<? 
	 }
}
add_action('thesis_hook_before_post','add_floating_share');
function social_footer(){ ?>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=176133919079931&xfbml=1"></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=120406481416771";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript"> 
 (function() { 
     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
     li.src = window.location.protocol + '//platform.stumbleupon.com/1/widgets.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
 })(); 
 </script>
 <?
 }

 add_action('wp_footer','social_footer');

Add to Your custom.css

#sharebar {

	background: #fff; 
	padding: 0; 
	list-style: none; 
	margin: 0; 
	width: 100%;
	overflow: auto;
 }
#sharebar ul { 
	margin: 0 0px; 
	list-style: none;
}
#sharebar li { 
	display: block; 
	margin-right: 10px; 
	padding: 0; 
	overflow: visible; 
	text-align: center;
	float: left; 
}
#sharebar #fb { 
	margin-left: 10px; 
	text-align: left;
	}
p.recommended {
	background: whiteSmoke;
	padding: 14px;
	border: 2px solid #EFEFEF;
	text-align: center;
}
.page {
	position: relative;
}
#sharebar #fb {
	width: 45px;
	margin-left: 0px;
}

By default, this will put the icons below the headline in Thesis, but you may change this by using a different Thesis Hook.

Closing:

Note: Thanks to the help and suggestion by Scott Wyden we have added “Email This” functionality. Here is the image you need . Right Click -> Save Image as. Make sure you grab the email icon and add it to you custom/images folder.

Hopefully this quick tutorial has helped you figure out how to implement social media into your Thesis Theme.

If you have any questions on implementation or the code please feel free to leave us a note in the comments.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Nick Reese

Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they've got guts and hustle. He's also the co-founder of Broadband Now which aims to simplify the broadband shopping process.

Comments

  • Shubham says:

    Hey Nick,
    i loved the idea. But the code you gave didn’t work. Then i deleted some spaces between the php (<?) tags and it worked fine..! Thanks for sharing..!

    • admin says:

      I’ve added closing “?>” and opening “< ?)" php tags to the statement. That might have been the issue. Make sure that all of your custom_functions.php is wrapped in tags.

  • aioviga says:

    wow thank you Nick Reese but hot to insert reddit button

    • admin says:

      Use the following code.

      < a href="http://www.reddit.com/r/PHP/submit" onclick="window.location = 'http://www.reddit.com/r/PHP/submit?url=' + encodeURIComponent(window.location); return false" rel="nofollow"> submit to reddit 
      
      
  • name says:

    email this dont work my blog and artofblog

    • Nick Reese says:

      Please go into more detail. What isn’t working?

      • Stonebraker says:

        He may be refrying to the fact that this type of email link will show an error if a user has not set a default email client for their machine. This solution would be better with an email form for the email option.

  • ken says:

    Hi,

    I also tried this and it doesn’t display anything at all.

    Thanks

  • ken says:

    Also, I checked the customs_functions.php file and the code that I inserted disappears! Tried it 3 x . same results every single time. thanks.

  • Jim says:

    This really great, thanks for sharing. It works great on the pages of my indiviual posts, but isn’t showing up on my homepage. Any idea how to get it on my homepage. http://www.trackfocus.com. Thanks.

    • Nick Reese says:

      @Jim,
      remove the if(is_single()){ at the beginning of the function. Also remove the 2nd to last }. This will force it to show on every page.

      • jbn says:

        Great tutorial thanks! I’m having a problem though. I have added it to every post by removing the if(is_single(){ and the other } however, this seems to completely kill my sidebar on my page. It doesn’t even show up in the HTML code the browser generates, just poof, gone! Also, the FB information doesn’t pass through correctly, not even the styling is right on the homepage, though the individual post pages are working perfectly fine. Can you think of why that would happen? Any option in Thesis that might not be compatible. Also…ha, always an “also” ….I’d love for it to show up on each post, but not on each page, is there declaration that applies to only individual posts? Thanks.

        • jbn says:

          Hi All, I just wanted to update my question here, cause I figured it out all by myself *pat on the back* It turns out to be the way the facebook and digg scripts are added to the footer. I believe that adding that function into the main social_icons function meant that if you have more than one post on a page, the function for adding the scripts to the footer is added more than once and somehow that kills your whole site…educated guess there, I’m no PHP/Thesis expert. I took out the whole function for adding the scripts to the footer, and added it manually in another hook I had for customizing the footer, worked like a charm! Now I have sidebars, footers, and beautiful social media icons blow each post on my front page. Oh yeah, speaking of, I added || is_frontpage() right after is_single() so that the icons show up on the blog roll as well as the single posts, but not on every page. Voila! Thanks so much for the awesome tutorial!

          • Kevin Ex says:

            Hey jbn,

            I am having the exact same problem. I don’t quite understand how you fixed it? How do I add the function to another hook?

  • Jim says:

    Nick-

    Thanks for the tip. I appreciate it.

  • ken says:

    Hi,
    Do you have any ideas why it won’t display? I sent the email twice on January 16. Thanks for your response.

  • ken says:

    hi,

    i had to get rid of the <? at the beginning and it showed up. also since i have a colored background, the digg button box is white, how do i change it to match my colored background, same for the email box?

    thank you

    • Nick Reese says:

      Ken sounds like you will need to make a custom image for the digg issue.

      The email box just change the CSS to match your background.

  • ken says:

    hi nick,

    sorry, so how do i make a custom image? new at this. because it looks like only the submit button is an image, everything else is text and looks like a white box.

    thanks

  • Adam Baird says:

    The only bad thing about adding all of these buttons is they tend to slow down load time. With Google now calculating page load time as one of their ranking criteria that could hurt SEO.

    I prefer to add static buttons. Of course, if you do that, you can’t display how many retweets there are etc.

    You just have to decide whether or not the social proof is worth it for you which is totally dependent upon your situation. If you’re Darren Rowse, you probably sacrifice a bit of load time in order to gain all the cred you get from having your articles tweeted, stumbled, etc. hundreds of times. If you’re me, you go with static buttons ;)

    • Nick Reese says:

      I can definitely agree. Debating about having a time conditional for new posts. That says hey, if this post is within 2 weeks old, show the active buttons. Otherwise, show static.

      Just gotta code it and get the images lined up. Need more time!

  • Lam says:

    I’ve tried several times to get this working with no success. I have copied the code over to custom_functions.php as instructed, and can’t figure out what I’m doing wrong. I tried troubleshooting it myself but I’m pretty new to coding and lack the knowledge. Right now I have a clean wordpress and thesis 1.6 installed. Is there any advice you could give on this?

    • Nick Reese says:

      The code shown on the page will only show the icons on the actual posts. This was done to keep load time down. Are they showing on the Single pages?

      • Lam says:

        Well Nick, I now feel really stupid :) lol. I didn’t realize they only showed up if you opened them. Thank you for the quick reply.

  • ken says:

    Hi,

    Still trying to figure out how to change the iframe body from white for the digg button to match my background color. Any ideas?

    Thanks

  • paul says:

    Thanks. Really cool. Do you know how I can show the number of diggs and number of shares on FB and also stumbledupon, for example, just like the retweet one?

  • Shahab khan says:

    Hi nick!

    I have copied the code exactly in the way you instructed but don’t know why single post pages are not loading at all (getting complete white page). I tried doing it more than 10 times but got same result everytime!

    Can suggest me how to get this code working?

  • Nick Bostic says:

    Looks like you’re having a similar issue as to what I’m having with the Facebook Share button. It doesn’t pass the article title or description. Any ideas?

    • Nick Reese says:

      In my tests it is working. Are you logged in?

      • Nick Bostic says:

        I literally just got it working on my site. On your site, it still isn’t passing the article title or content while logged in using Chrome or Firefox. Just the site name, url and thumbnail.

  • JC says:

    Got it to finally work! Thanks! Even got the reddit bumped in there and everything. (yay negative values!)

  • Hi,
    Great code! I am having one issue. I use Yahoo mail, when I click the Email This link, it opens up two windows in my Yahoo mail and neither contains the link in the email body. Any ideas how to fix it?
    Thanks!

  • Chris says:

    Awesome tutorial – thanks.

    What I want to know is how to do the “Subscribe” menu on the right column with the rss, email, twitter, and youtube icons.

    Any chance of another tutorial for that?

    Thanks!

  • Avinash D says:

    Hi Nick,

    Awesome site!

    I seem to be getting a recurring parse error that just doesn’t seem to go away. Have tried deleting the operators and all of my custom php to isolate the problem but still no go.

    The error I get is attached below:
    Parse error: syntax error, unexpected '< ' in C:\xampp\htdocs\wordpress\wp-content\themes\thesis_16\custom\custom_functions.php on line 11

    Anything on this?

    Cheers,
    Avi D

    • Nick Reese says:

      Avi,

      It seems many people may be having the issue you are having. I have created a video to help you understanding what is happening.

      You are running into a simple php syntax error.

      • Avinash D says:

        Thanx a ton for the assist Nick but it’s kinda weird how it seems to be working for you and not for me!!! Maybe it’s because I’m on a local install via xampp?

        • Avinash D says:

          Weird….but the odd thing about this bit of code is it works beautifully on one local install while it just refuses to work on another!

          On my personal laptop, it absolutely refuses to populate while on my work desktop, it works like a charm. This is so strange…the flipside is: at least I know it looks HOTT when used!!Thanx again Nick for putting this tut out and the video too…much appreciated. :-)

  • Actually having a Social Media icon on thesis can make the theme more professional and more user friendly too…….so that peoples can easily share their favorite things from your blog to anywhere he/she likes.

    useful post for the Social Media lover like me.

  • Inserting Facebook’s Like Button in Thesis | MattFlies.com says:

    […] Not sure where you’d like it? Why not try building this super simple and elegant social media toolbar? […]

  • Lee Hughes says:

    Hi Nick,

    Loving this style!

    One question though.. I have no sidebars on my site and have centered everything.. what css would I need to center all these icons?

    Many thanks

  • Don says:

    Great tutorial Nick – the social bar you made looks very clean and professional. I implemented this on my site with no problems. Thanks for putting it together!

  • Dr. Jay says:

    Thank you so much for the walkthrough – adding this became much easier for a Thesis newbie.

    The “Email This” button isn’t displaying an envelope icon like the one on your site – any ideas of what’s going on? I copied and pasted as you directed (although I deleted the Digg portion but the Email This was already looking that way before the delete).

    Thanks in advance for the help.

  • 100 Resources for Thesis Wordpress Theme Users | MattFlies.com says:

    […] 17. Use Twitter’s @anywhere with Thesis 18. Use Facebook’s Like Button with Thesis 19. Add Slick Social Media Icons to Thesis 20. Creating a Squeeze Page with Thesis Part 1 21. Creating a Squeeze Page with Thesis Part 2 22. […]

  • Guy says:

    Didn’t work for me, broke my custom_functions, had to reload the file on he server from the back up. I just copy-pasted the code above into functions.

  • Dr. Jay says:

    I hadn’t but now I’ve downloaded “an” email icon (don’t know if there’s a specific one you’re referencing) – it’s in my custom/images folder but no change.

    Do I need to alter the code in the custom_functions.php to point it to this image?

  • Mehul Kar says:

    Nick, this is exactly what I want to do. However, I have custom built a theme using Artisteer software.

    Can you show me how to implement this code into a different theme?

    I tried using it as is, but then the WP doesn’t load and neither does the site. I have to go and delete the added section in functions.php manually through ftp to get back into wordpress.

    Which parts of your code are only for Thesis, and if I wanted to add it to a different theme, how would I do this??

  • Marcell Almeida says:

    How to add a Google Buzz button?

  • Marcell Almeida says:

    I founded how to add google buzz button.. http://www.google.com/buzz/api/admin/configPostWidget

    But now I can’t remove the digg button of my footer!

    Take a look.. http://www.gadgetblog.com.br/

    • Nick Reese says:

      Remove the 2nd function labeled “digg_footer”

      • Marcell Almeida says:

        Thanks for the quickly reply Nick!

        But I got another problem, when I remove the if(is_single()){ at the beginning of the function and also remove the 2nd to last }. Shows up on every page.

        BUT, when I click to share at the homepage, just share all my homepage, and no my post link.

        Take a look.. thanks!

        • Nick Reese says:

          Marcell,
          The code was designed to be on each single page. If it is on the home page, it will tend to clutter your site.

          If you still want to go that route you will need to work with the tweetmeme api, to specify the post url.

  • Pat OBrien says:

    Hello

    Can’t seem to get this working. I have Thesis 1.7, and am a bit of a newbie when it comes to Thesis.

    I have followed this site verbatim, and have even tried all the suggestions in all of the comments, but nothing seems to be working.

    When I enter the code into my custom_functions.php file and hit save, it’s all erased when it reloads. I’ve removed many ?> <? calls and that made it worse.

    A bug with Thesis 1.7?

    Any ideas?

  • 5 more Thesis Wordpress Theme Tutorials to make your thesis Powered blog look extraordinary | Bloganol.com says:

    […] This Tutorial is too from Artofblog to show social bookmarking widget sets above each of your posts that cntains Digg, Retweet, Facebook Share, Stumble and Email Icons. This widget is really well managed, clean and also contains all the main social networking sites, Read more. […]

  • Nathan says:

    I’m wondering about Thesis 1.7 as well – none of the above comments have helped me eliminate the syntax errors. I’m editing my file directly in BBedit & Dreamweaver CS5 (which balks about the code as well). Is there a chance of an update on this tutorial?

    Best,

    Nate

    • Pat OBrien says:

      Nathan,

      I’m glad it’s not just me – thanks for confirming that with your blog too.

      I hope we can get an answer soon! :)

      • Nick Reese says:

        Hey guys,
        I’m on the road, but I just recorded a video tutorial of installing it on 1.7. Give the video a couple minutes as I just uploaded it but I’m walking out the door. Youtube is still rendering as of the time this comment was posted.

        Nothing changed really, but maybe watching the installation process again in Dreamweaver may help.

        If you are still having issues make sure to copy the error code php gives you and relay that in the comments section.

        • Pat OBrien says:

          Thank you for this Nick! I will check it out when I get home and the video is ready to be watched.

          As a quick note, there was no PHP error from before. I would enter the data into custom_functions.php using the WordPress web interface. I would then hit Save, WordPress would refresh the page and custom_functions.php without the entries I just made. If I entered this at the top of my custom_functions.php, it would erase everything in that file. Thankfully I had a backup.

          It’s really quite weird. I’ll give it a go in a plain text editor in a bit as well.

          I’ll let you know the outcome!

          • Pat OBrien says:

            Like magic, it worked – but only using a text editor (such as Vi). When I try it through the web interface it messes up. Not sure why, but not sure I’m going to question it either?

            Thanks again for the video!

          • Derek says:

            I just installed this on my Thesis 1.7 blog and noticed that there appeared to be a hidden character when editing in the file editor as the syntax highlighting was all messed up.

            Before saving, I had copied to Textpad to do some tweaking and noticed an extra question mark at the top. Removed all leading white space before the function call and then the file editor no longer had any issues.

        • Nathan says:

          Thank you Nick – I watched your new video and backed into it one piece at a time starting with the social buttons, then carefully added back in my other customizations and it’s working great. I appreciate your help!

  • Tresna says:

    Okay, I think I’ve totally screwed this up and now can’t even get back to the custom.function.php to put back what was originally there. Help!

  • juan says:

    Hi Nick thanks for explain us with patience but I have a few questions about Thesis,
    The slogan of thesis is “do more code less” “never have been so easy modify a theme” ok for me this slogan is not true , because of the dificult to put a simple social buttons and so on.
    what do you think?

    • Nick Reese says:

      Personally I think Thesis is the easiest theme out there to use. Way easier to get it to do custom things than coding your own.

    • Nathan says:

      I’m with Nick – with hooks, Thesis makes it so easy to map out customizations. Not to mention SEO awesomeness.

    • Derek says:

      I’m in agreement with both Nick and Nathan. Even for people that don’t possess the technical coding ability to work with the hooks – and don’t want to learn – there is still a great deal of customization exposed within the design and site options of Thesis.

      Once you add in the ability to do truly custom things with the hooks and filters, you can open the door to some amazing designs.

      • Stephen says:

        Juan, I know what you mean – I bought Thesis so I could spend less time coding, but I still seem to spend a lot of time doing so. That said, I would much rather use Thesis as a basis for a WordPress site than any of the free themes around, so I guess I am with the other guys too.

        Nick, thanks for sharing!

        • Hitman says:

          I bought Thesis too and I like it. For one particular site of mine Buddypress is sorely needed, and Thesis just doesn’t work well with that at this point. With the post images and other settings unique to Thesis, it’s been a headache figuring out how to remove Thesis without messing up hundreds of posts.

          For that reason, I’ve come across an issue that no one else talks about: Thesis is a lot easier to get into than to get out of. I do love Thesis and will continue to use it on many sites, but I think this is something to be considered before installing Thesis or other such “frameworks” that add an additional custom layer on top of WordPress.

  • Will says:

    Why is it that even though the following is in the php code:
    mailto:?subject=Sharing: &body=I wanted to share this with you. Thought you might enjoy it:

    The resulting text when you do email is all lower case like this:
    i wanted to share this with you. thought you might enjoy it:

    Also when it php’s the_title, that ends up all lower case too rather than upper and lower like the title really is.

    Thanks.

  • Will says:

    Another two questions:

    The digg icon seems to have css issues I can’t figure out. It does not align correctly with the other icons. You can see this here: http://willtaft.com/contemporary-issues/water-will-be-the-next-oil/

    Also I know this is set up only to display on the single pages, but a lot of people read the most recent posts from the blog page and it would be helpful to have the icons there too. What would I do to get the icons on the blog page also? I can’ seem to find a hook that would place them both on the sigle post pages and on the blog page which has the few most recent posts.

    Thanks!

    • Carlo says:

      @Will I think I might actually be able to finally help someone! I’m fairly new to all this, but using Firebug I sorted out the misaligned Digg icon. I ended up adding this to custom.css:

      .custom .db-wrapper span span span.db-compact {
      position: relative;
      bottom: 4px;
      }

      Should work for you too.

  • Carlo says:

    Sweet, thanks! This is great. One question…how would I repeat this at the end of my post?

  • Will says:

    Hey Carlo – Thanks. Hopefully Nick or someone will have an answer to my other two questions. The capitalization is an odd one. The method of getting to place on the individual posts on the blog page may be something I can eventually figure out. A long time ago I had hard coded a digg button to work both on the single page posts and on individual posts on the blog page. (In other words, not targeting the blog page itself, but the separate posts displaying on the blog page.) If I can dig(g) up that old code, I may have a clue.

    Also if you post how you are repeating this at the end of your post, it may help someone else in the future who is looking to do that.

    And – I looked at your site. Great job! Nice customization of the Thesis theme too. Your logo/header is super also.

  • Carlo says:

    Thanks Will. And thanks for the comment on my other site :) I’m glad I could finally help someone after getting so much help from the Thesis forums and sites like these. In fact, I’m still waiting to hear back from a couple posts in the forums. I’m stuck trying to figure out how to add thumbnails to custom excerpts.

    As for repeating it after the post…I figured two ways:

    1. Duplicate the code and change the main function name and the Digg function name within the main function, and then add it to the after_post hook (or wherever). If you don’t change the Digg function name in the second instance you get a PHP error.

    2. The other way, which I preferred, was to remove the Digg function altogether and stick the Digg and FB scripts up in the function. This way I didn’t have to duplicate the whole function, but just did another add_action with the appropriate hook. (I don’t fully understand that Digg function, but I think it was just to put the Digg button in the footer…could be wrong).

    In the end I didn’t use it because for some reason the buttons were all misaligned in the bottom instance. And I didn’t feel like messing around with more CSS…so I’m gonna live with it just in the top. If I feel like figuring it out later I might try again.

  • mike says:

    Nick,
    In your code section, it starts with div tag but in your video, you copied the entire code including the starting of a function syntax. Am I missing something?

  • DB says:

    Is it just me, or the code shown in the video is not the same as the code in this post?

    I copied the code and my site crashed. The code in the post doesn’t show the function, $twitter and it has some weird staff as .

    Don’t know why this is and if I am the only one who has this problem, but I would sure love to use this on my site. Hope you can let me know what I am seeing or doing wrong.

    Thanks

    • Nick Reese says:

      DB, thanks for pointing that out. When we updated to the new site design and added the “summary” box the built in wordpress editor mangled our code. I reverted to an old revision and the new code should work.

      • Mike says:

        Nick,
        Can you double check the new code that you posted. I still got an error on the code. I notice there is a ?> on the line of
        add_action(‘thesis_hook_before_post’,’social_icons’); ?>

        • Nick Reese says:

          Mike, figure it out?

          Depending on where you place this function in your code you may or may not need the final “?>”

          • Mike says:

            I guess I really suck at php. I used to be a .net developer so I still learning php. I must not have the tags in the right place in my custom_function.php file. Email me so I can respond to you in more detail, if you have time. Thanks in advance.

      • DB says:

        Hi Nick, thanks for the update, I was sure I was doing something wrong. I hope this will work now as I really digg this cool spread it social icons bar. Was looking for this exact this for quite some time.

        Thanks

  • […] Add Slick Social Media Icons to Thesis […]

  • […] Add Slick Social Media Icons to Thesis 91 […]

  • Tyler Regehr says:

    I have the buttons showing on the feature post on the front page.

    Is there a way to make it so when someone tries to share the feature post from the front page that is links to the actual article, instead of the main domain name?

    Thanks.

  • Ryan Beale says:

    Hey Nick,

    I love the style/placement of your social icons and I am seriously considering adding them to my blog. One question before I do that is, will i maintain the history of past retweets with the numbers in the twitter icon if I delete the old twitter social icon and add your social icons? To be more specific, if you go to this one blog post – http://rbeale.com/social-media-marketing/twitter-followers-how-to-identify-quality-and-relevant-twitter-users/ I have 99 retweets and would like to maintain that retweet history if I switch over to using your social icons.

    Thanks!
    Ryan

  • Ahmed says:

    Followed the video and removed the tag Nick. Still doesn’t work. I am using thesis_17, if it makes a difference. Gives the syntax error.

  • Justyn says:

    Awesome Tutorial!!! I for sure added this to my blog and it was easy to do!!
    Thanks!!!

  • Thu Nguyen says:

    Hi Nick. I really love this idea. I’m using version 1.7 for Thesis and it’ll work great on the initial save but if I have to modify the code further I get problems with my pluggable.php file on a certain line. Thus, I would constantly have to upload my backup custom_functions.php. Anyway you can perhaps integrate this as a Thesis Openhook pastable instead of modifying it through this way? Would appreciate the response when you can.

    Thanks!
    Thu

  • Lee Hughes says:

    I was wondering how I would remove the email and digg functions?

  • Great tutorial guys. I have put it into effect and you can see it on here http://grievousbodilycharm.com/2010/07/04/ice-cream-2010-fallwinter-collection/ :)

  • Jeff says:

    I don’t get what I am doing wrong? I copy and paste the code as is, then get a syntax error that I have an unexpected “<" on line whatever. When I count down to that line in the editor, sometimes there isn't even a "<" there? When there is and I remove it, I get the same error at the same line? I am obviously not good with coding, but not quite getting what I am doing wrong. Thanks for any help…

    • Jacky Liang says:

      I think I know what’s really wrong with the PHP Code. After Observing all the Code, At the End when they are adding the function:
      add_action('thesis_hook_before_post','social_icons'); ?>

      Erase the last two symbols: “?>” this code only applies for ending php (i think)

  • Eugene says:

    Everything was working fine, but now the Digg button stopped working. Any ideas on how to fix it? Thanks

    The Digg button is no longer working! Also, could you show how to add the Buzz button? Thx in advance

  • Swamykant says:

    Thanks for the tricks .. Very useful

    Can you let me know how to include the Google Buzz, Sharethis & Official Twitter button

  • Haley says:

    I added this code, it was working fine, but then when I removed the from the beginning and end, it messed up and is giving me this error:

    “Parse error: syntax error, unexpected ‘}’ in /home2/goodcogi/public_html/wp-content/themes/thesis_18/custom/custom_functions.php on line 38″

    I don’t know what to do. Can’t even log onto the back end of WordPress by going to the /admin

  • werkzeug akku Bosch says:

    Nice post with much individual posibilitis. THX.

  • Erich Rice says:

    Just a heads up to anyone playing around with the custom functions.php file for the first time.

    MAKE A BACKUP of your working copy before editing. You may need to FTP into your website and restore the file directly since the wordpress UI will be hosed.

  • OH! Thank you so much for this one.. I’ve been searching for so long and none could make a nice formatted layout like you. I’m not an expert at CSS so you’ve been a great help.

    Have just put them on my blog after the post (removed the email and added reddit). Thanks!!

  • Sumon says:

    This is really a tricks for all thesis users. Thanks for share with us !

  • agri dagi says:

    Check the very bottom of this post in the yellow box…

  • Mclaughlin says:

    Sorry dude, the code is clean but I live back in the WTF world. I have tried your code on 2 different Thesis blogs and the blogs crash. Hard.

  • McLaughlin says:

    Parse error: syntax error, unexpected ‘<' in /home/content/a/b/c/name/html/wp-content/themes/thesis_18/custom/custom_functions.php on line 33

    double-you tee eff dude?

    • Nick Reese says:

      The syntax error you pasted has the exact issue…

      Open your editor, go to line 33. Remove the first < ? and maybe the last ?> and your code should work.

      You could also watch the video comment where I explain exactly this.

      Basic understanding of PHP will take you a long ways when customizing thesis.

  • Kevin Ex says:

    Thanks for the tutorial. Although the link to adding a facebook like button is not working, can you recommend a good tutorial for that.

    PS: I had to delete the <? at the beginning to make it work.

  • William says:

    Like everyone here thank you for sharing. But sadly I have know lost my site following all your directions. Based on the information you provided I still managed to receive “Parse error: syntax error, unexpected ‘<' in /home/content/w/j/w/wjwjr/html/bymmagazine/wp-content/themes/thesis_18/custom/custom_functions.php on line 32" Even after going in coda to find "<" and deleting them. I would really appreciate if you can help me out on this cause I lost everything. Thanks

  • Ari Herzog says:

    Groovy, Nick, thanks for sharing your code on this. I was set with the custom function part, but needed some advice with the custom css. You can see the current iteration by clicking my name.

  • Sleek Social Media Icons for Blogger says:

    […] Sleek Social media Icons is the social bookmarking widget for the Thesis Woordpress theme by Artofblog and now I have made it compatible for blogger blogs. You just need to follow the simple three steps […]

  • Hey Nick, thanks, this looks great. I am having a minor issue though. I get this to work on each individual post, but not on the headline. If I remove the if(is_single()){ at the beginning of the function and remove the 2nd to last }, I get an error on the mainpage. Any ideas?

  • Jane says:

    Thanks for sharing! Your code worked for me and I even figured out (thanks to the Thesis RTFM) how to add Google +1 to the row! :) It looks funny still, but I’m proud.

    Jane

  • Nick, thanks for this code. It works like clock work on my website. Since it is very good-looking to attract even more visitors to share the site with others. Thanks again.

  • Philipp says:

    GREAT Work!

    But can you tell me how integrate the Google Plus button like in your social bar?

    That will be fine!
    Regards, Philipp

  • JohnR says:

    Took a little tweeking, but I finally got this working. I didn’t have the closing ?> in my custom_functions.php. Once I added that, it was all good.

    I’d love to add the Google +1 button like you did above. Can you share the code for that?

  • Could you share the code to add the “Google +1″ button that you have at the top of this page?

  • ragunath says:

    I would like to know one thing, You said that we wanna add the code in Custom Functions.php Right? You could find tons of Codings in Custom functions.php, Where we need to Insert? Whether the top of the code or Bottom or Where? This is very basic, but i never seen the Answer for this question in any Blog, Hope i ll get answer from you.

  • Dave says:

    Great post. Took me a while to get the code working. Realized the ending ?> was missing at the very end of the statement. Threw that in and it worked like a charm.
    Cheers

  • Amanda says:

    Works great on Firefox but Chrome it’s jumbled all in a box on the left, why!? :) Thanks!

  • Paul Kirtley says:

    Thanks for the post. Very useful. I was directed here from the DIYThemes forum. I was looking for a quick way to add multiple social buttons in a way that didn’t end up as a mess.

    I was able to quickly implement the code at http://www.frontierbushcraft.com/blog/ and then made some changes to remove Digg (not so relevant for the company blog) and email (doesn’t work with webmail), then added Google +1 and Linkedin share buttons.

    The code framework you wrote made this pretty simple.

    The only thing I can’t work out is why the rendering of the Facebook like button is included in the digg_footer function?

    I’ll do something similar on my personal blog when I get the time to tidy it up (it’s not running on Thesis yet).

    Thanks again – you saved me a bunch of time today :)

  • luoluo123 says:

    Ever thinked about adding a little bit more than just your articles? Some much more pics would be much better. Anyway, Fantastic blog!

  • ma'arif says:

    Thxs Nick
    it’s great tutorial. But i have question. How to change icon not in vertical, but i will make horisontal?

    Thxs

  • JESSE DZIEDZIC says:

    This might be your best blog post around!!!

  • azhar yatim says:

    Hi can you share the code you use for the social media you have for this site.. the one with facebook like and twitter and google plus. thanks!

  • adam says:

    Hey guys any update on what the code is to get it how you have it on the site now with just tweet, plus, like and stumble upon? Looks a lot better than the old version. Thanks in advance.

  • Matt Laz says:

    I prefer to add static buttons. Of course, if you do that, you can’t display how many retweets there are etc.

    You just have to decide whether or not the social proof is worth it for you which is totally dependent upon your situation. If you’re Darren Rowse, you probably sacrifice a bit of load time in order to gain all the cred you get from having your articles tweeted, stumbled, etc. hundreds of times. If you’re me, you go with static buttons ;)

  • Conor says:

    Hi folks,

    I seem to have a problem which is not addressed above in the comments.
    I’m using Thesis 1.8 & BlogSkin, but i removed the social icons from the blogskin posts to do this.

    What has happened is as follows, The Icons all appear just underneath the header, exactly as you see in the original video when the custom.php file is edited, i then edit the CSS file and it stays the same. I cannot get the icons to form in a row.

    Any help would be greatly appreciated.

    Regards,

  • Well, I tried using your script and … let’s just say I can’t access my account anymore. Everything –wp-admin, website– went blank white and now I’m in extreme recovery mode. If you have any suggestions, let me know.

    • Eric Binnion says:

      This could be from a PHP error. I recommend not editing your custom_functions file from the WordPress backend in the future. I would use a text editor and an FTP program, or a program like Espresso (for Mac). This way when you break your website, it’s as easy as doing an undo and reuploading.

  • getexback says:

    Fantastic tutorial. Good thing i read all comments. Now works very well.
    thanks!

  • Hi Nick,
    do you have any tips how to add Twitter, Facebook and Google+ inside byline?
    That would be really helpful.